Capturing Visual Context

Smartling's Context Capture Chrome Extension

Smartling's Context Capture Chrome Extension is a free add-on for the Chrome browser that captures dynamic HTML context for a web application as you browse. As your content is translated from a source language to a target language, the extension should be used on the source language sites.

This article covers:

Prerequisites 

  • Google Chrome browser
  • Strings of content for translation must already be uploaded into Smartling before capturing the website using the Smartling Context Capture Extension
  • Smartling Project access as an Account Owner or Project Manager user role

Default Behavior

  • Captures the entire website at the moment you log into Smartling via the extension, meaning the full webpage visible in the context panel in the CAT Tool.
  • Any string in files already in the selected Smartling Project will match with the captured context and highlight for users in the CAT Tool.
  • Once the context is captured and sent to Smartling, it can be viewed in the Context Dashboard of the selected Smartling Project
    • Type is HTML
    • Source is Chrome Extension

Installation & Set Up

  1. Go to the Chrome Store, and follow the steps to add the extension in your Chrome browser
    • Once the extension is installed, you should have the Smartling Context Capture icon in your browser toolbar
      Screenshot_2022-01-20_at_11.40.52.png

Setting a Keyboard Shortcut

Google Chrome has a Keyboard Shortcut feature that allows you to set up shortcuts for Chrome browser extensions. In your Chrome browser:

  1. Right-click the Smartling Context Capture icon > Manage Extensions
  2. On the top-left of the page, click the main menu icon
    Screenshot_2022-01-20_at_20.47.59.png
  3. Under Extensions, click Keyboard Shortcuts
    Screenshot_2020-07-07_at_16.02.54.png
  4. In the Smartling Context Capture section, insert the shortcut you want to activate the extension, i.e. hold down CTRL, ALT, or Command + the key (letter)
    • For example: Command + Shift + A

Screenshot_2022-01-14_at_15.57.46.png

Alternatively, you can skip setting up a keyboard shortcut and just use our pre-defined hotkey: Command + Shift + S

Capture Context

  1. Browse to the website you want to capture visual context for translators to view when translating content in the CAT Tool
    • The website should contain text that match strings already uploaded to a Smartling project
  2. Click the Smartling Context Capture icon to start the extension
    Screenshot_2022-01-20_at_11.40.52.png
  3. Login to Smartling by clicking the Click here to Log In button
    • This opens a browser to sign in with your Smartling credentials
    • Once logged in, the Smartling Context Chrome Extension automatically takes a snapshot of the page you are on.
  4. From the drop-down, select the Smartling project in your account that you want the context to be sent to
    • This Project should already contain the same strings of content as seen on the websiteScreenshot_2022-01-20_at_12.28.11.png
  5. You can preview the snapshot of context by clicking Preview
  6. If you're happy with the snapshot, click Send to automatically upload the snapshot to the selected Smartling Project
  7. Once sent, the Snapshot History dialog appears. Simply close the window to continue browsing the website.

Capture Context for Dynamic Content

Dynamic content in terms of visual context of a website refers to the parts of the website that move, pop-out, or appear when you hover over an element of the website. As the Smartling Context Capture Extension takes a snapshot of the page at the moment you log into Smartling via the extension, to capture a dynamic element of a page requires you to restart the extension. To save time and effort in logging in and out, you can simply use the following hotkey to retake a snapshot when the dynamic element is in view: Command + Shift + S

Alternatively, you can set up your own custom hotkey to retake a snapshot, by following the steps to Setting a Keyboard Shortcut

Capture Context for Specific Content

If you do not want the entire website captured for users to see in the CAT Tool, you can use the string selection tool to target specific strings for contextualization. This excludes areas of the webpage for which the snapshot will not provide good context. For example, if you want to capture context for a modal dialog in the middle of the page, but exclude visibility of anything outside that dialog, use the selection tool to target only the dialog and its strings.

To capture specific strings:

  1. Follow steps 1 - 4 in how to capture content
  2. Before sending, click Select strings.
  3. Select strings or regions of the page with the selection tool by hovering over a specific area of the website, or clicking on it
    • The extension will auto-select a specific area
    • All visible strings within that region will be included in your selectionScreenshot_2022-01-20_at_19.01.16.png
  4. You can also click Select Whole Page or Reset the selection
  5. You can preview the snapshot of context by clicking Preview
  6. When you have finished making your selection, click Send

Using this function will overwrite any existing context for your selected strings.

Viewing Captured Context in the CAT Tool

Smartling sends the context to the selected project. If it matches uploaded strings, Smartling displays the snapshot of the entire page to translators in the CAT Tool.

Screenshot_2022-01-20_at_19.26.48.png

As this is HTML visual context, it is dynamic, meaning the string matches will highlight for translators and update the context with their translation in real-time as they translate.

Screenshot_2022-01-20_at_19.27.26.png

Translators can toggle between viewing their translation in context or revert to viewing the source strings in context by clicking the gear icon on the context panel.

Screenshot_2022-01-20_at_19.27.43.png

Snapshot History

The History function displays a list of context snapshots and statistics about the number of successful string matches.

  1. From the Context Capture toolbar button, click the Gear icon > History.
    • The Feedback dialog displays a list of context snapshots with information such as the number of strings updated and matched.
    • Note, that a snapshot will only be created if context has been updated for at least one string.
  2. If your submission matches strings in the project, clicking the view link displays the new context snapshot.
  3. Clicking Clear History allows you to clear the history log.
    • This will not affect context already in the Dashboard.

Overwrite Context

By default, Smartling's Context Capture Chrome Extension will not override existing context for a string. To replace context for a string, either use the Reset Context action in the list view before using the Extension, or use the Select Strings function to override existing context for selected strings.

Alternatively, you can use HTML classes to control context overwrite.

Additional Resources

Need more control over what's captured? Read the Control Smartling's Context Capture with Custom JavaScript documentation.

Looking for tips on how to improve matching? Read all about how to do so with instrumental files.

Want some automation? Read our documentation on Automation Options with Smartling's Context Capture Chrome Extension.

 

Was this article helpful?