Webflow is a website builder for non-technical people. Following the same easy-to-follow steps, turn your Webflow website multilingual using Transifex. The connection between Webflow and Transifex is achieved through a technology called Transifex Live.
Below, you'll find instructions for localizing your Webflow site.
📝Note: Before you begin, you must have a Transifex account and a project you will associate with your Webflow site. If you have not already done so, sign up for Transifex here.
Getting the Transifex Live JavaScript Snippet
Before using Transifex Live, you must install the Transifex Live JavaScript snippet on your site. To do this, follow the instructions here.
Installing the Live snippet
To localize your Webflow site, you need to add the JavaScript snippet to the script of every page in your Webflow site:
From your Webflow project, open the pages list and click on the gear icon of a page:
Navigate to the script part of the page settings and paste the Transifex Live script in Custom Code Before </body> tag:
Click Save in page settings and repeat for all pages on your Webflow site.
After adding the Transifex Live snippet on all pages, Publish changes to make Transifex Live work on your live Webflow site:
Now, you can begin to save and translate content!
Saving content, translating, and publishing
Now that Transifex Live is embedded in your page, you can use Transifex Live to save content to Transifex, translate in context, and publish translations on the fly.
Handling dynamic content
Dynamic content like dates, times, and counters (e.g., # of articles, # of comments, etc) should not be translated. When approving phrases in Transifex Live, ignore these types of non-translatable dynamic content. If your platform lets you edit the theme, you can mark elements of your pages as non-translatable.
To learn how, click here.
Translating Images
To translate an image on webflow you will need to follow the TX live instructions on url localization as described here.
Now in order to succesfully do that we need to add a custom attribute to the image settings inside webflow.
Inside webflow, find the image you want to translate
Click on settings and go to Custom Attributes
Add the translate urls attribute that TX live demands for url translation
Save setting and publish to site
💡Tip
Looking for more help? Get support from our Transifex Community Forum!
Find answers or post to get help from Transifex Support and our Community.