Contentful Visual Context Configuration

As Contentful is a headless CMS, precise Visual Context of content in its "destination" environment is not without its complexities. Contentful support content preview capability where it can integrate with your front-end application using its Preview API.

By default, simplified dynamic HTML Visual Context is supported with Smartling for Contentful content translation. If you have integrated with Contentful's Preview API, this can be used to provide more detailed Visual Context to linguists in the CAT Tool.

Configuring Contentful Visual Context

You can configure Visual Context preferences in your Smartling Project Settings:

1. Go to your Contentful Connector Project in Smartling
2. Click the Settings tab > Contentful Settings
3. Under Visual Context Settings, choose from one of three options to configure Visual Context for all content in our Contentful Connector Project.
   
   

Visual Context Options

• Default: simplified dynamic HTML Visual Context
• Disable: disables automatic default Visual Context. As a result, no Visual Context is provided to linguists in the CAT Tool. However, this options allows for the integration of additional Visual Context tools, such as capturing context by using Smartling’s JavaScript Library, or an API integration, or Smartling’s Context Capture Google Chrome Extension.
• Integrated: integrates Visual Context using Contentful's Preview API
  
  

Integrated Visual Context

Integrated Visual Context allows for previewing unpublished content from Contentful to linguists in the CAT Tool, as though it were published. To choose this option, you must first set up content preview with Contentful, and then choose your preferred authentication method for Smartling from one of the three options:

1. None: no authentication required, Smartling obtains Contentful Preview Context without validation
2. Basic Auth: using your Contentful user credentials, insert your Contentful username and password and click Save
3. API Key Auth: choose where Smartling should pull the API key from between the header or query parameter
   • Header: insert the HTTP Header Name and Value
   • Query: insert the Key and Value

The connector supports the following placeholder tokens in the preview URLs:

• {env_id}
• {locale}
• {entry.*}
  • This is an object that includes entry fields.

Tip: For more details and examples, see Contentful documentation