How can Webflow websites be translated using Localize?
TL;DR
- Create a Localize project with your source and target languages, then add the provided JavaScript snippet to your Webflow site's Head Code.
- Capture site text using Localize's In-Context or Auto Capture tools, provide translations via the dashboard, and optionally add a language switcher using Webflow UI and custom code.
To translate a Webflow website using Localize, you integrate the Localize script and configure your translation languages and content. Here's how to do it:
1. Sign Up and Set Up a Localize Project
- Create a Localize account at localizejs.com.
- Start a new project and choose the source language of your Webflow site.
- Add target languages, which are the languages you want your site to be translated into.
2. Install the Localize Snippet in Webflow
- In Localize, go to the "Install" section of your project to get your JavaScript snippet.
- Go to Webflow Designer > Project Settings > Custom Code > Head Code.
- Paste the Localize script snippet into this section.
- Save changes and publish your Webflow site.
3. Capture Text for Translation
- Open your published Webflow site in a browser.
- While logged into Localize, use the In-Context Editor or Auto Capture tool to identify and extract text.
- Localize will collect textual content automatically as the site is visited.
4. Translate the Content
- Go back to your Localize dashboard.
- Use machine translation, submit for human translation, or manually enter your own translations.
- Localize will serve the translated content dynamically when users select a language.
5. Add a Language Switcher (Optional)
- Use Webflow to create a language dropdown or button UI.
- Add links or custom code that calls Localize’s
Lokalise.translate("LANGUAGE-CODE")method via HTML Embed components or custom JavaScript. - Example: To change to French, call
Localize.setLanguage('fr').
6. Test the Translations
- Visit your live site and examine the functionality of:
- Language switcher
- Dynamic translation loading
- Persistence of selected language across pages
Summary
To translate your Webflow site using Localize, add the Localize script to your project, capture text via the dashboard, provide translations, and optionally set up a custom language switcher. Localize handles dynamic delivery, allowing you to keep your Webflow design untouched while enabling multilingual support.