Connect and translate your Webflow website with Smartcat

Overview

Smartcat lets you AI-translate your Webflow website into up to 280 languages. You preview and refine the translation in Smartcat, then add a JavaScript snippet to your Webflow site to publish the translated pages to your visitors.

This guide walks you through connecting your Webflow site, reviewing the translation, and publishing it.

Translate your Webflow website in Smartcat

1. Open your Workspace and click the Translate a website shortcut

2. Specify both the source and target languages. You can select multiple target languages if you need them

3. In the Website URL field, paste the URL of your Webflow page

4. Click Preview my website

5. Smartcat opens the translated version of your Webflow page

6. Use the toolbar at the top to switch between languages

7. Adjust the preview settings with the gear icon in the top-right corner of the screen

8. In the Translation mode section, specify how the translation is rendered for your website visitors

9. On the Language selector tab, choose how the language selector fits your Webflow page design

10. Under Preview settings, specify how you want to view the translated page

11. Under Publish settings, select your Published Languages and copy the JavaScript code for publishing your translated page

12. To review the translation, click Edit. This opens the CAT editor

13. Review your translation, which is split automatically into segments. Make any edits here, and confirm each segment translation before moving to the next

14. To return to your website preview, click Back

15. From here, publish your website translation by clicking the button next to the address field

16. Click Copy code to save the code to your clipboard

You now have the Smartcat JavaScript code ready to add to your Webflow site.

📌 Add the Smartcat code snippet to the header of the page to ensure the Smartcat website translator works correctly.

Add the Smartcat code to Webflow

1. Open Webflow, open Site settings, then go to the Custom code section

2. Paste the JavaScript code of your Smartcat translation into the Head code

3. Click Save to save the changes, then publish the site by clicking the Publish button

4. Once the code has been added, click Validate and continue in Smartcat

Your Webflow site now serves the Smartcat translations to your visitors.