Overview

The Smartling Webflow Connector does not include built-in visual context because there is currently no public API endpoint for Webflow's Preview feature. By default, context is provided as simple HTML that doesn't reflect your actual website design. However, you can set up dynamic, HTML-based visual context using one of two alternative solutions:

• Context Capture Chrome Extension: a browser extension that captures context page by page
• Context Capture JavaScript Library: a code snippet that automatically captures context as you browse your site (recommended)

This article explains both options, helps you choose the right one, and walks you through setting up the JavaScript library with Webflow.

Why visual context matters

Visual context shows translators how your content appears on your actual website, directly within the Smartling CAT Tool. Without it, translators see only raw strings and may not understand where text appears, how long it should be, or how it relates to surrounding content. With visual context, translators can produce more accurate, natural-sounding translations that fit your design.

Here is some content in the CAT tool with the default visual context. It is not considered true visual context because it doesn't show how the content will actually look on the web page. 

Here is the same content in the CAT Tool, with good visual context. 

For a full overview of visual context across different content types, see Overview of Visual Context.

Choosing a solution

Context Capture Chrome extension

Context Capture JavaScript library (recommended)

Our recommendation: Use the JavaScript library. It automates context capture across all your pages and works in Webflow's preview mode, so you can capture context for content that is still in development and hasn't been published yet.

Setting up the Context Capture JavaScript library in Webflow

Prerequisites

• An existing Smartling Webflow Connector project
• A Smartling user role of Project Manager or Account Owner (you'll need access to the API section under Account Settings)
• Content already submitted for translation in your Smartling project (strings must exist in the project before context matching can run)

Step 1: Generate API token for the Organization ID

1. In the Smartling Dashboard, go to Account Settings > API.
   
2. Generate a Project-level API Token and select your Webflow Connector project.
3. Note your Organization ID, as you'll need it in the next step.
   

Step 2: Add the JavaScript snippet to Webflow

You can add the Context Capture snippet at the site level (recommended) or the page level.

Option A: Site level (recommended)

This applies the snippet across your entire Webflow site.

1. In Webflow, go to Site Settings > Custom Code.
2. In the Head Code section, paste the Smartling Context JS snippet.
3. Replace YOUR-SMARTLING-ORG-ID-HERE with your Organization ID from Step 1.
4. Save your changes.

For the exact snippet code, refer to the Embedding the Library section in our Context Capture JS Library documentation.


 

Option B: Page level

Use this if you only want context capture on specific pages, not across your entire site. Adding it at the page level also only affects the specific users (if your team members each have their own seats). 

1. In Webflow, open the page and go to Page Settings > Custom Code.
2. Paste the Smartling Context JS snippet.
3. Replace YOUR-SMARTLING-ORG-ID-HERE with your Organization ID from Step 1.
4. Save your changes.

Step 3: Generate context by browsing Webflow preview page

Once the Smartling JavaScript Context library snippet is added to the custom code:

1. Submit your content for translation via the Webflow Connector. This is important because content must already exist as strings in your Smartling Webflow Connector project before context capturing and matching services can run.
2. Then, go back into Webflow and open the page in Preview mode.
3. Look for the "Enable Custom Code in Preview" toggle in the bottom-left corner. If it's off (this may be the default), turn it on and reload the preview page. For more details, see Webflow's documentation on enabling custom code in preview mode.
   
4. Browse through your pages while in preview mode. The Context Capture library runs in the background and automatically matches strings as you navigate.

If you have multiple pages submitted for translation, simply navigate to each one while in preview mode. It behaves similarly to a published site.

Known limitations

• Non-visible strings won't have visual context. Metadata, alt text, and other strings that don't appear on the rendered page cannot be captured as visual context.
• Preview mode doesn't capture distinct page URLs. When context is captured in preview mode, the Context tab in Smartling will show all pages under a generic URL (e.g., Canvas App | https://[your-site].canvas.webflow.com/) rather than specific paths like /about or /pricing.
  
  
   

Related resources

• Overview of Visual Context
• Context Capture JavaScript Library
• Context Capture Chrome Extension
• Translating with the Webflow Connector