Do you have a website with Bubble.io that you want to translate into various languages so that it can be reached by external customers? Bubble.io is a powerful and flexible no-code platform that offers a powerful environment for building and managing web applications. Integrating automatic translation into your Bubble.io app allows you to simplify the creation and maintenance of multilingual content, saving time and resources while ensuring a consistent, high-quality user experience across multiple languages.
Therefore, in this article, we will discuss how to easily implement automatic translation on the Bubble.io site using an automatic translation service.
The benefit of implementing automatic translation on Bubble.io
Implementing automatic translation on the Bubble.io website can provide several benefits, including the following.
- Global market access: Automatic translation enables your Bubble.io app to reach users worldwide. For example, a recipe-sharing app originally in English can instantly become available to food enthusiasts in Japan, Brazil, and France, allowing them to explore and contribute recipes in their native languages.
- Increased user satisfaction: Content in a user’s preferred language leads to a more enjoyable and immersive experience. Example: A travel planning app that automatically translates itineraries, reviews, and local recommendations into the user’s language can significantly enhance their trip planning experience.
- Higher conversion potential: Users are more likely to make purchases or sign up for services when information is presented in their native language. For example, an online course platform could see a surge in enrollments from Spanish-speaking countries after implementing automatic translation, as potential students can now fully understand course descriptions and benefits.
- Enhanced search visibility: Multilingual content improves your app’s chances of appearing in search results across different regions and languages. For example, a job search app that offers automatically translated job listings and resume tips could start appearing in local language searches in multiple countries, attracting job seekers who previously couldn’t find the platform.
Examples of multilingual websites with Bubble.io
According to trends.builtwith.com, more than 55 thousand sites use Bubble.io. Therefore, this time, we will discuss some examples to give you an idea of whether you are considering creating a multi-language site with Bubble.io.
Fanova.io
Fanova is a great example of a website built using Bubble.io. It connects fans with their favourite content creators and allows them to subscribe to exclusive content. The site showcases Bubble.io’s ability to create sophisticated, user-friendly applications with advanced features like multilingual support.
The language switcher in the bottom left corner offers English, Spanish, and Brazilian Portuguese options. This multilingual approach allows Fanova to cater to a diverse, international audience across North America, Latin America, and Brazil. Using Bubble.io’s features, Fanova can manage and present content in multiple languages while maintaining a consistent design, enhancing the user experience for visitors from different linguistic backgrounds.
IC-academy.io
Impact Creative Academy (ICA) is the platform’s ability to create professional and functional web applications. The site offers AI-powered career resources, including free courses, grant competitions, and job application opportunities. Its clean design features a prominent headline, a concise value proposition, and an engaging “Dive in” call-to-action button.
A notable feature of the ICA website is the language switcher located in the top right corner, offering users the choice between English and Arabic. This multilingual support demonstrates how Bubble.io can effectively create globally accessible platforms. By providing content in both English and Arabic, ICA can serve a diverse user base across English-speaking countries and the Arab world.
How to implement automatic translation on Bubble.io
After examining examples of multilingual sites created with Bubble.io, we’ll explore how to implement automatic translation using an automatic translation service. Many services can translate websites quickly and easily with just a few configuration steps. One such service is Linguise.
Linguise integrates with various CMS platforms and web builders, including integrates with Bubble.io. Here are the steps to install Linguise automatic translation on Bubble.io.
#1 Register your domain website
First, create a free Linguise account and add your website domain. You can use the 30-day free trial before deciding on a subscription plan.
Next, you will be prompted to register your domain to authorize translation. To do this, copy your domain name, including “https://” and select “other” as the platform.
Next, choose your source and target languages.
#2 Automatically Add domain DNS using entri
After successfully registering your website on the Linguise dashboard, you have two options to proceed with the installation.
If you prefer to add the DNS records automatically, you can click on “Connect your DNS automatically.” This feature, called Entri, will handle the DNS records for you, making the installation process easier. Alternatively, you can manually copy the DNS records to your domain provider.
After clicking the button, Entri will analyze your registered website URL and examine your public DNS records. Based on this analysis, it will identify the necessary provider and DNS records.
Next, click on “Authorize with [your domain provider]” (for example, Cloudflare). This action will redirect you to your domain provider’s login page, where you can log in and proceed.
Once you log in to your domain provider, Entri will handle the rest, automatically adding the appropriate DNS records—one DNS per language and one TXT DNS for the validation key. You should see the DNS records added to your domain, such as:
After authorization, Entri will notify you that all DNS settings have been successfully configured. You should be able to use the translation feature once all the DNS entries have propagated on your domain, which usually takes about 20 to 30 minutes.
If you prefer Manual Installation, you can also do this manually by following the steps that we will provide below.
#3 Copy DNS records
If you prefer manual installation, you’ll be redirected to a screen with the DNS records needed to set up your multilingual pages, such as fr.domain.com or es.domain.com.
Copy these essential elements to your Bubble.io DNS configuration.
Next, connect to your domain manager and access the DNS setup area. Then, follow the instructions to copy.
- One TXT record for domain verification
- One or several CNAME records for the languages
Here are examples for each record type (TXT and CNAME)
Once you’ve added all your records, your configuration should resemble this.
#4 Verify DNS
After you’ve added all your records to your domain DNS, you can verify DNS propagation by clicking the “Check DNS configuration” button.
DNS validation typically takes about 30 minutes to 1 hour. After this period, you should see green indicators on the right side of the DNS list in the Linguise dashboard. You’re nearly set to translate your Bubble website; only the link to the language switcher with country flags is still needed.
#5 Activate dynamic translation
From a technical perspective, Bubble integrates JavaScript-coded modules, CSS, and HTML into a functional Node.js application. Bubble’s programming language is built on JSON.
With our “Dynamic Translation” feature, you can effortlessly translate content on your Bubble.io website, including content that loads asynchronously (dynamically) after the initial page load. This improvement provides a smoother multilingual experience for your visitors!
To use this feature, click Yes at the bottom of the Settings page.
#6 Enable and customize language switcher design
The language switcher is a flag popup that allows you to select your desired language. To implement it, copy the code provided in the header of your Bubble.io site pages. The flag language switcher will then automatically appear on your public website.
The link to copy is at the end of the domain registration process or within the domain settings. Be sure to copy the link to your clipboard.
Next, navigate to your Bubble website panel. In the left sidebar menu, click on ‘Settings’ and then select “SEO / metatags.”
In the settings menu, scroll down slightly until you find “Script/meta tags in header” under “Advanced Settings.”
Paste the Linguise script you copied earlier, then click ‘Save’ and publish your site.
You can customize the language switcher from the Linguise dashboard by navigating to Settings > Language flags display. Any changes made here will be reflected on the website.
On the right side of the screen, you’ll see a preview of the language switcher. Here are the elements you can configure.
- Three layouts, side-by-side, dropdown, or popup
- Position of the language switcher
- Content of the language switcher
- Language names in English or their native language
- Shapes and sizes of the flags
- Colors and box shadows
#7 Automatic translation of your website Bubble
Here’s a demonstration of how Bubble.io appears when automatically translated using Linguise’s automatic translation service.
Automatically translate your Bubble.io website with Linguise
Linguise translation service provides a smooth integration of automatic translation for your Bubble.io website. As a leading translation service, it supports over 80 languages and works with over 40 CMS platforms, including Bubble.io. This integration makes it easy to create a multilingual website, enhancing the overall user experience.
Front-end live editor translation
Linguise also offers a front-end live editor that enables quick adjustments to translations as needed. This tool ensures that translations remain accurate and allows for fast changes. Additionally, you can work with professional translators to ensure cultural and contextual precision.
Multilingual SEO support
Through its multilingual SEO features Linguise, Linguise can improve your website’s search engine visibility by optimizing its SEO. It generates multilingual sitemaps, creates hreflang codes and tags, sets up canonical URLs, and translates URLs and meta descriptions. These functionalities help boost your site’s search engine rankings and make it more accessible to users in various languages.
Global translation exclusion rules
To address translation challenges, Linguise includes exclusion rules that allow you to keep or exclude specific terms that might not translate well. You can establish rules to exclude pages, inline content, or specific pages, ensuring clarity and accuracy in your translations.
Possible to add professional translators for collaboration
Additionally, Linguise allows you to invite professional translators to join your dashboard, facilitating collaboration to maintain cultural and contextual precision in your content.
Conclusion
Implementing automatic translation on your Bubble.io website can greatly enhance your reach, increase user engagement, and improve conversion rates. With Linguise, you can easily manage multilingual content, providing a seamless experience for users across various languages while optimizing your SEO strategies.
Linguise offers powerful features such as front-end live editing, dynamic content translation, exclusion rules for specific terms, and extensive SEO support. These capabilities make it an ideal choice for integrating automatic translation with Bubble.io. So, what are you waiting for? Register for a Linguise automatic translation website and transform your Bubble.io website into a multilingual one.
