Webflow
Alex Terehov avatar
Written by Alex Terehov
Updated over a week ago

Webflow is a powerful website builder and content management system (CMS) that allows users to design professional, custom websites without needing to code.


โ€‹Please note that to leverage the integration, you will first need access to Webflow Localization with at least one locale set up on your Webflow site.

Supported content

Lokalise enables you to translate the following Webflow content:

  • Static pages

  • Collection items

  • Static elements of collection pages

The following content cannot be translated as it is currently not supported by the Webflow API:

  • Page settings (slug, title, and description)

  • Page components

  • Collection slugs

  • Assets

  • E-commerce product descriptions

  • Forms

  • Custom code snippets

Installation

To get started, open your Lokalise project ("software project type"), click Apps and find Webflow in the Content management category:

Click the app and then press Install. You'll be presented with the following screen:

Click Authorize and then choose a single website from the your Webflow workspace:

Please note that while Webflow allows granting access to multiple websites at once, you should only select one website per Lokalise project. If multiple websites are selected, only the first one will be connected.

After successful installation, it may take 5-10 minutes to synchronize the content:

Importing entries from Webflow to Lokalise

Once you've installed the app, the list of available content from Webflow will be presented for you. The content synchronization should start immediately but you can also start it manually by clicking Refresh.

On the Ready for import view, choose one or more items and click Import from Webflow.

You'll be presented with the following dialog:

Choose the languages to include in the import operation.

Tick the Overwrite existing keys option if you want to update existing translation keys with any updates that were made to the Webflow content since the last import. Updated keys will return to the Unverified status.

If you want to use Automations, you should import only the default language with the Overwrite existing keys option enabled. An alternative is to import all the desired languages, but keeping the Overwrite existing keys option disabled.

Importing will happen in the background, and once the operation is completed, you'll see the following notification:

Click View content to access the Imported view.

Translating exported entries on Lokalise

You can return to the Editor and perform translations as usual, or create tasks for your translators. All keys would have the tag assigned with the name of that page or collection item:

Re-importing updated content from Webflow to Lokalise

Sometimes the content on Webflow might go through some updates before the translations were finished, or even after they were exported.

In that case, you can click the Refresh button to see the last update date, select which items you want to reimport, and click the Reimport from Webflow button.

Exporting translations from Lokalise to Webflow

Once the translations are reviewed, return to the Webflow app on Lokalise, and switch to the Imported view.

Choose one or more items and click Export to Webflow:

You'll be presented with the following dialog:

Choose one or more languages and hit Export to Webflow. The operation will be performed in the background, and you'll be notified once it is completed.

You will be able to see translations by switching a language in Webflow's Designer:

Known limitations

Languages

If a language is set to Disabled on Webflow, it won't be possible to exchange content for this language with Lokalise. For example, on this screenshot the Spanish (Argentina) locale is set to disabled:

You should enable publication for this locale:

Collections

Reference fields are not automatically imported together with the original item, so linked items should be imported separately.

Pages

Exporting a base language (for example, en) to the page from Lokalise to Webflow is not supported by the Webflow API.

Did this answer your question?