How to localize your Webflow website using TextUnited
To translate a Webflow website you need an account on TextUnited. You can signup for a 14 days free trial.
The translation process is as follows:
- Scan your website using TextUnited crawler
- Select landing pages for translation
- Add translators who will correct the machine translated content in the overlay editor or order translation from TextUnited
- Copy a Java code and place it on your Webflow website.
- Customize your language selector to match your brand
Scan your website and create a project
1. Create a new website project.
If you are a new user, select Website Translation by clicking Start a New Project button.
In the next steps you will be guided to scan your website and choose a language(s) you want to translate it into.
Start with scanning your website:
Click SCAN to start scanning.
Hint:
If you are only checking how the system works, you do not have to scan the whole website. You can click STOP button and test translate only a few pages. You will be able to add the remaining pages to the project later.
In the next step choose the language(s) you want your website to translate into and select whether you want the content of your website to be pre-translated with machine translation.
When you are done with language selections, click Continue.
In the next step you can choose who will translate or correct the pre-translated content:
Me and my team - you will create a project which is going to be translated by you and/or by someone from your team.Professional full service - you will create a project which will be translated by professional translators selected and allocated by TextUnited's project manager. This is a paid service, for which you can request a quote in advance.
As the last step, click CREATE A PROJECT
Translate your website using the Overlay Editor
Once a project is created you can access the pretranslated landing pages by clicking Overlay editor button on the project list. Remember, to select Website header in the project list:
The Overlay editor is a tool for light editing and previewing your website. Check this article for more information how to use it.
Hint:
If the Overlay Editor is not showing your website correctly, you may try to use a different approach:
-
Add a java code to your home page HTML code (see the section below)
-
Launch the Overlay Editor directly on your website by:
-
opening your website and adding an extension at the end of the URL:
/#text-united-translation or
-
use CTRL+ALT+T keyboard shortcut while on your website.
You will need to login with your TextUnited credentials to access the Overlay Editor.
Add a java code to your Webflow website
Now it's time to finalize integration of TextUnited with your website, so you will be able to make the translations public and make a language selector visible.
You will need to install the java code in the head section of the HTML code of the Webflow website.
Get the java code
Click the project name to open the project details. Navigate to Install code tab:
Click COPY SCRIPT
Install the java code on your Webflow website
-
From your Webflow dashboard, navigate to the project settings. Click on the three dots icon in the bottom right corner of your project and select Settings.
-
Navigate to the Custom Code section
- Paste the code snippet in the Head Code section. This will add the code at the end of the <head> tag and click on "Save Changes"
Make the translated website public
In order for the translated version of your website to appear on-line, you'll have to publish translations in TextUnited (of course, the java code must be installed in your Webflow website as described above).
-
Open a project in TextUnited by clicking the project's name and find the buttons in the top-right corner of the project's details.
-
Click PUBLISH
Once translations are published, visitors can access the translated version of your website using the language selector which will appear on the website.
Customize the language selector
You can choose appearance of the language selector from a few pre-defined styles or can customize it by using CSS.
Click the project name to open the project details. Navigate to Install code tab:
Access the language selector settings by clicking CUSTOMIZE.