Translating with the Webflow Connector

Request Translation in Smartling 

There are two ways in which you can Request Translation in Smartling: 

1. Select asset > Actions > Request Translation.
   This option allows you to bulk-select multiple assets for translation. 
   
   
   
2. Click the information icon for an asset > Request Translation. 
   This option allows you to request translation for a single asset. 
   
   
   

Both methods will open the two-step Request Translation wizard: 

Step 1

• Choose to create a New Job or add the content to an Existing Job. 
• Under Assets, ensure the assets selection is correct. Click the X to remove any asset listed. 
• (Optional) Add a description for linguists. 
• Select the Target Languages. 
• Click Save Job and Continue to create the Job in Smartling. 

Step 2

• Here you can see a cost estimate for the Job based on your selected workflows. 
• If you edit the workflow(s), the estimate will update automatically. 
• (Optional) Add a Job Due Date. 
• Select Save for Later, to create the Job, but have the content sit in Awaiting Authorization. Select Authorize Job, to kick off the translation process. 
  

  We recommend selecting Save for Later, so you can review the strings in the Job before authorizing it for translation. 

   

 

Translation Delivery to Webflow

The Webflow Connector is file-based, meaning translation progress is tracked at the file level rather than the job level. When you request a Webflow asset for translation, the content is bundled into a JSON file and sent to Smartling for translation. Once the file is fully translated for a target locale, the translations for that locale are automatically delivered back to Webflow.

You can also trigger translation delivery manually at any time. To export translated content from Smartling to Webflow: 

1. From your Webflow project, click the Webflow tab 
2. Select the assets you would like to export translations for 
3. Click the Actions menu > Export Translation
   
   

You can also manually export translations from the Asset Details page. 

Check Translation Progress 

You can check the translation status of any asset via the Asset Details page, by clicking the info icon next to an asset in the Webflow tab. 

The Delivered column shows the date when translations were last delivered to Webflow. The state Completed means all content is translated and was successfully delivered back to Webflow. For more details on different states please see the info here. 

Hover over the requested date to view the exact time the asset was requested and by whom. Similarly, hover over the delivered date to see the exact time the asset’s translations were delivered.

 

Important Considerations

By default, when you create a new asset in Webflow, it is created across all locales, ensuring a version exists for each locale configured in your Localization Settings. If you manually delete a localized version of an asset, the connector will be unable to deliver translations for that asset. The localized version must exist in Webflow for the connector to deliver translations.

 

Viewing Translations in Webflow

To view translated Pages or Components, click the language name in the top navigation banner and select the target locale you wish to view.



For CMS Collections, you can switch the locale in the top navigation from the list view. 


When viewing a particular CMS Collection asset, you can also navigate to the locale section and click the arrow to open a particular language version. 

 

Adding or Editing Translations

Translations should not be added directly in Webflow, as the connector does not recognize translations added manually. If your team adds translations directly, they will be overwritten when the connector delivers translations.

If you need to edit translations after they have been delivered to Webflow, all edits should be made in Smartling. The connector does not track or recognize changes made directly in Webflow. Any edits made in Webflow will be overwritten the next time the connector delivers translations for the asset. To ensure changes are preserved, always make edits in Smartling.

 

Visual Context

By default, the connector generates simplified dynamic HTML Visual Context. The connector generates a simple HTML file that renders the Webflow fields and their values, providing a basic representation of the asset's content. An example of this can be seen below. 

If you are interested in integrating an additional Visual Context tool, such as adding context via an API integration or Smartling's JavaScript Context Capture Library please reach out to your Solution Architect or another Smartling Representative.