Webflow is a website design tool that includes a robust CMS. The online visual editor platform allows users to design, build, and launch websites. In 2023 they introduced a new localization feature to their customers, allowing them to do basic localization within Webflow. With this new localization feature, Webflow released a set of APIs that allow Phrase to build an app inside their website design and CMS tools to push content for localization.
The integration is available as an App within the Webflow marketplace. It is built across Webflow Design and Data APIs, a middleware service (built by Phrase) and the Phrase TMS APIs. Customers are able to install the app from Webflow marketplace and authenticate their Phrase accounts to start the connection of data between the two systems.
By installing the app and selecting , Webflow users are able to select individual components on their website, a CMS collection, or entire pages; all handled through a single-select component to be sent to TMS for localization. Users are able to send their content from Webflow into either an existing Phrase project or create a new project from a Phrase project template.
Once content has been localized within TMS, the newly localized content is automatically sent from Phrase back to Webflow and into the appropriate localized version.
Customers must have Webflow localization enabled on their Webflow account plan for this feature to be available.
Webflow content is primarily formatted in .JSON.
Automatic Project Creation is not supported.
Support for Select/Option elements
Webflow has introduced a select type in their node response, and the Phrase plugin supports this element. Users can send strings from components for localization without needing to manually extract them.
SEO metadata is supported for localization and sync through the Phrase TMS plugin, including page titles and descriptions. CMS collections/items are also supported, allowing users to submit a wider range of CMS content for translation directly from within Webflow.
Use Cases
-
Sending source locale content that is ready for localization from Webflow into Phrase TMS then exporting it back into the appropriate target locale in Webflow.
-
Automated localization of SEO-critical fields such as page titles and metadata, reducing manual effort and improving consistency across locales.
-
Direct translation of CMS Collection content from within Webflow, streamlining the end-to-end localization process for large-scale sites.
-
Bulk import of completed translations from Phrase TMS back into Webflow, eliminating the need to manually reapply translations page by page.
-
Support for Select/Option elements, enabling localization of dropdown fields and enhancing user interface consistency across languages.
Install the plugin
To install the plugin, follow these steps:
-
Login to a Webflow account.
-
From the Webflow App store, search for and add the plugin to the Webflow account.
-
Provide Phrase username and password.
Note
Phrase username is displayed in the tab of the user profile settings.
Login via email address is not supported.
Using the plugin
To send content for localization, follow these steps:
-
Ensure localization is part of the Webflow account.
-
Create target locales to be translated from.
-
From the section, select Phrase.
-
Select whether to send a page for translation, CMS collection or just a component of a selected page.
-
Select whether to include SEO metadata fields in the translation job.
-
Select whether to create a localization job within an existing Phrase project or create a new one from a template.
-
Send the content to Phrase for localization.
-
When the job is complete in Phrase, the translated content can be imported back into Webflow and into the appropriate target local copy of the website. The user can apply translations one by one, or choose the bulk import of all the completed translations back into the Webflow.