Webflow sync, pageviews & more.
NEW

How can Webflow websites be translated using Localize?

TL;DR
  • Copy the Localize JavaScript snippet from your dashboard and paste it into Webflow’s “Before tag” section under Project Settings > Custom Code.
  • Configure target languages in Localize, then manage translations manually or with automatic translation, and optionally add a custom or built-in language switcher using Localize.setLanguage().

To translate your Webflow website using Localize, you’ll need to integrate Localize’s JavaScript snippet and configure your language settings. The process involves embedding the Localize code, choosing the languages you want, and allowing Localize to manage and serve translations.

1. Get Your Localize Snippet

  • Log into your Localize dashboard.
  • Under your project, navigate to the "Settings" > "Installation" section.
  • Copy the JavaScript snippet provided. It typically includes your project key.

2. Add the Snippet to Webflow

  • In Webflow, go to your project’s dashboard and click Project Settings.
  • Navigate to the Custom Code tab.
  • Paste the Localize snippet into the Footer section of the “Before tag” area.
  • Click Save Changes, then Publish your site for the script to go live.

3. Choose and Configure Your Languages

  • In your Localize dashboard, go to the Languages tab.
  • Add one or more target languages, such as Spanish, French, etc.
  • Localize will automatically detect text on your site the first time it loads.
  • You can then manually translate or enable automatic machine translation.

4. Manage and Review Translations

  • Use the Localize visual editor or string editor to manually update translations.
  • Define custom rules if necessary, such as excluding certain elements or handling dynamic content correctly.
  • Preview translations in context and adjust if needed.

5. Customize the Language Selector (Optional)

  • Localize offers a built-in language switcher, or you can create a custom one.
  • To use the built-in switcher, enable it via Settings > Widget in the Localize dashboard.
  • Alternatively, for a custom selector in Webflow:
  • Create buttons or a dropdown.
  • Add an onClick attribute that calls Localize.setLanguage('language_code') (replace with the appropriate code like 'fr', 'es', etc.).
  • Include this script in Page Settings > Footer or via Custom Code.

6. Test Your Integration

  • Publish your Webflow site, then open it in a browser.
  • Confirm the language switcher appears (if installed) and that text is translated properly.
  • Check responsive behavior and content loading dynamically.

Summary

To translate a Webflow website using Localize, embed the Localize JavaScript snippet via Project Settings, configure your desired languages in the Localize dashboard, and manage translations visually or through machine translation. Optionally, create a custom language switcher using Localize.setLanguage().

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I keep images in the same position when resizing in Webflow without using one large image? I have tried using %, VH, and VW, and have reached out to Webflow for support. Can someone please assist with this issue? Thank you.
How can I create a form in Webflow with information from my CMS, and set unique names for all the fields to avoid issues with checkboxes displaying incorrectly and receiving random field numbers in emails?
How can I style images and their captions in a Rich Text Block on Webflow?
How can I create a dropdown menu from a tab component in Webflow that improves user experience and reduces scrolling on mobile views?
How can I fix the "Snapshot not found" error in Webflow when trying to preview past backups? I've tried multiple backups and different Webflow accounts, but the issue persists.
How can the styling of the unordered list in the CMS rich text field be edited in Webflow?
How can I make hyperlinks appear in blue when the text is bold or part of a heading in Webflow?
How can I disable the hover effect when the state is on current in Webflow?
How can I make two separate animations for a text block and button on my home page in Webflow activate simultaneously?
How can I remove auto-generated columns in Webflow's tablet view to make a navigation bar with only 4 columns and 2 rows?
How can I fix the issue of GIFs not animating when imported as images in Webflow?
Can Webflow create a map element on a Collection Page that shows multiple locations using latitude and longitude attributes stored in a CMS Collection?
How can I fix the issue where the other divs do not move downward when content is expanded in Webflow?
Why do SVG images on my Webflow website appear blurry on mobile and tablet devices, but not in the previewer or when using JPEGs?
How can I link specific sections of a page in Webflow's dropdown menu?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?