Integration Guides Bubble
Integrate Bubble with SiteTran
Integrate Bubble with SiteTran
Last updated: a month ago
3 minute read
Yuliia Kovalchuk
Writer at SiteTran

ALL ARTICLES

Overview of Bubble SiteTran Integration

This guide offers a straightforward, step-by-step approach to make your Bubble website multilingual in just a few minutes. Anyone can follow along successfully, no technical background needed.

Expanding your online business's reach to a global audience has never been easier for Bubble users thanks to SiteTran. Whether you're looking to attract new customers from different backgrounds or enhance the user experience for your current international clientele, this guide will walk you through the entire process.

Let's dive into the world of website translation and unlock new possibilities for your Shift4Shop site, with SiteTran!

Prerequisites:

A Bubble website that you want to translate.

A SiteTran account that you will integrate with your Bubble site. If you haven’t already, sign up for SiteTran, and add a new site.

Time needed:

Estimated time needed: 3 minutes.

Let’s get started.

Get your Widget Code

First retrieve your widget code from SiteTran. If you haven’t already signed up for SiteTran, it only takes 30 seconds. After creating your account, create a site in SiteTran, and then proceed to get your widget code, which is what generates the language dropdown on your Shift4Shop site.

In SiteTran go to the "Widget" page.

To get your site’s SiteTran Widget Code, go to your site’s "Widget" page from the menu on top.

Screen to find your SiteTran Widget Code

Copy the Widget Code

Click the "Copy" button to copy your widget code (includes your styles). You will use this in a bit.

Button to copy out your SiteTran Widget Code

Integrating with Bubble

Initial Login and Navigation

In a new tab, log in to your Bubble website

Select the App

On the Bubble home page, locate and click on the app where you want to add SiteTran Widget Code

Bubble Interface highlighting the Apps

Opening the HTML Editor

On the left side menu of the App Editor, find and click on "HTML".

Screenshot of Bubble to Access HTML Editor

Selecting Website Section

Identify the section of your website where you want to add the SiteTran widget.

Click and drag your mouse to highlight the specific area.

An HTML editor will appear on the right side of your screen.

Bubble site App Editor interface view of HTML editor

Adding SiteTran Widget Code

  1. Paste your SiteTran widget code into this HTML editor.
  2. Click on the close icon at the top right of the editor to close the HTML editor.

Don't worry about saving your changes manually. Bubble automatically saves your modifications.

Bubble app editor SiteTran integration widget code location

Verifying & Translating

Testing the Integration.

Visit your Bubble site, and locate the SiteTran Widget. Choose your new language from the dropdown, and SiteTran will begin discovering your phrases.

SiteTran Widget on Bubble website

Congratulations! You have successfully integrated SiteTran with your Bubble site.

Guide to Translating

Translating is easy. Read our quick guide on translating for newcomers.

Couldn't find what you were looking for?

In this article

Website Translation Made Easy