Back to top image

Setting Up Your Webflow Connector

Please note that this Connector is a paid product. For pricing information, please reach out to your Smartling Customer Success Manager.

Prerequisites

In Webflow, your primary locale is the default locale for your site. Before you begin setting up the connector, you will need to prepare your Webflow environment for localization by adding the target languages you want to translate into. In Webflow, these are referred to as secondary locales.

  1. From within Design mode, click the language code in the top navigation > Localization settings
     
    localization-settings.png

    Or navigate to the Localization settings via the sidebar under Settings > Localization

    settings-localization.png

Once your site is configured with the appropriate source (primary) locale and target (secondary) locales, you can begin setting up the connector.

 

Step 1: Create a dedicated Smartling project for the Webflow Connector

You must create one dedicated Smartling project per Webflow website. If you have multiple Webflow sites, you will need to create a separate Smartling project for each one. 

  1. Create a new project in Smartling.
  2. Select the project type "Connector".
  3. Select "Webflow" as your connecting platform.
  4. Choose your desired source and target locales. 

Once the project has been created, ensure that all workflows, linguistic assets, and team members are set up correctly. In particular, we recommend checking that the default workflows for all of your target languages are set up according to your preferences. If auto-authorization is enabled in your Smartling settings, these workflows will be used automatically for all translation requests through the connector. 

 

Step 2: Connect Webflow to Smartling

    1. Navigate to your Webflow Connector project in Smartling
    2. Click the Settings tab > Webflow Settings > Connect to Webflow 
      connect-webflow.png
    3. The authorization modal will appear. Select which Webflow site you would like to connect to Smartling then click Authorize App. 
      authorize-modal.png

    4. Next select the Webflow source language (primary locale) from the dropdown menu. 
      webflow-source-language.png
    5. Click Save.


Step 3: Configure the Webflow Connector

Once you have successfully connected your Webflow environment to Smartling, complete the following configurations within the Webflow Settings page by navigating to the project > Settings tab > Webflow Settings. 

General 

Automation of Prior Requests for Translation 

This setting controls how you want the connector to monitor changes to content that has already been requested for translation in Smartling. 

Options include: 

  • Auto: The connector will detect changes to previously submitted source content every three hours. Any detected updates are batched into a Job and sit in awaiting authorization. However, if auto-authorize is enabled under Smartling Settings, the updated content is automatically authorized for translation. This feature does not detect content in new assets—only updates to content from assets previously submitted for translation. In other words, if an asset is brand new and has never been requested for translation, its content will not be picked up by this automation. See additional details here. 
  • Manual: The connector checks for changes to source content every 3 hours but does not automatically submit updates for translation.
  • Disabled: The connector does not check for changes to source content.

Three hours is the shortest recommended duration between checks. Consult your Solution Architect to adjust the frequency to a longer interval using cron. 

Language Configuration 

In the Language Configuration section, you will see the target languages for the project. The first time you open this page, you will find a blank field to the left of each of the Smartling target languages. For each Smartling target language, select the appropriate Webflow language from the dropdown menu.

Click the checkmark to save each mapping. 

Any language left blank will not appear in the list of target languages when requesting content for translation in Smartling. 

Each time you add a new language to the project, you must map that language in the connector settings.

  1. From within your Webflow project, click on the Settings tab > Webflow Settings. 
  2. Select the appropriate language from the dropdown menu. 
  3. Click the checkmark to save each mapping. 

    language-mapping.png

Content Parsing 

Content parsing refers to the process of breaking content into translatable strings. Content parsing settings are only available for CMS Collections. All fields are localizable by default. Use the dropdown menu to select how each field should be parsed or if it should not be translated. 

content-parsing.png

Rich text fields have three parsing options: Copy Source, Do Not Translate, and HTML, while plain text fields include an additional option: Plain Text.

Smartling Settings

Talk to your Customer Success Manager or Solution Architect about options regarding auto-authorization, translation retrieval type, file versioning, and capturing custom placeholders. For more details, see the information linked here. 

 

Now, you're ready to start Translating with the Webflow Connector.

Table of Contents