How can Webflow websites be translated using Localize?

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().