How can Webflow websites be translated using Localize?
TL;DR
- Create a Localize account and project, then copy the provided JavaScript snippet.
- Paste the snippet into Webflow’s Footer Code section under Project Settings and publish the site.
- Ensure your Webflow content is visible and structured with semantic HTML for Localize to detect it.
- Visit your live site to allow Localize to capture text, then add translations via the dashboard.
- Configure language switching in the Localize dashboard using widgets, custom buttons, or URL parameters.
To translate a Webflow website using Localize, you need to integrate Localize's translation script and configure your content for proper detection and translation.
1. Sign Up and Set Up a Localize Project
- Create an account at Localize if you haven’t already.
- Create a new project, selecting your source language and any target languages.
- Localize will generate a JavaScript snippet specific to your project.
2. Add the Localize Script to Webflow
- In Webflow, go to Project Settings > Custom Code.
- Paste the Localize script into the Footer Code section (before
</body>tag). - Example content: Localize will give you a
<script>tag likeLokalise.init({ ... })or similar—add that as provided. - Click Save and Publish your site.
3. Configure Webflow Content for Translation
- Make sure your site's content is not embedded in iframes or hardcoded JavaScript, as Localize detects text in the DOM.
- Use clear semantic HTML and avoid hiding translatable content with complex CSS or scripts.
- CMS content is supported—Localize can detect dynamic text as long as it's rendered client-side.
4. Capture and Translate Content in Localize
- Visit your live website with the Localize script installed.
- Localize will automatically capture any visible text.
- Go to your Localize dashboard and add translations manually or via machine translation, human translators, or translation files.
5. Publish Translations and Enable Language Switching
- In the Localize dashboard, go to Languages > Language Switcher to configure how users can change languages.
- You can use their widget, custom buttons, or pass a query string to auto-load a language (
?locale=es). - Once translations are ready and live, they will appear automatically when a visitor selects a non-default language.
Summary
To use Localize with Webflow, add their script to your site’s custom code, let it capture your content, and then manage translations in the Localize dashboard. Once configured, Localize handles dynamic translation and language switching on your site.