Back to top image

How to avoid cookies and pop-outs in Visual Context

Websites come in all shapes and sizes. Depending on the purpose of your website, you may have a variety of dynamic content, such as a "Call-to-Action", banner, pop-out, chatbot, etc. This is great for getting the attention of your audience, but can prove distracting for linguists working on translating your website.

Visual Context is contributory to high-quality translations. This is especially the case with websites, when the same term or string can have a different meaning, depending on where exactly it is placed, e.g. "Home" could mean "back" or the place you live. 

By default, this dynamic content is ingested into Smartling as part of your content's Visual Context. Often, it can impede on the linguist's full visualization of the content they are translating, as seen in the example below.

Screenshot_2021-10-19_at_19.55.25.png

Smartling supports the ability to apply custom JavaScript and CSS to HTML context. With this functionality, you can apply custom scripts to remove parts of or alter the HTML context that appears in the CAT Tool. This functionality not only improves the visual representation of content to linguists, but it also can increase the accuracy and amount of string matches between content and context.

Once the script is saved in the Project Settings, it applies to HTML context that is ingested into Smartling after the script is saved. Think of it as a permanent import setting that applies to any new context unless you edit or remove it from your Project Settings entirely.

Ensure the custom script is saved in the Project's Settings before the HTML context is ingested into Smartling.

How to Apply a Custom Context Script

Account Owner or Project Manager users can apply a custom context script to a Project.

  1. Go to the Smartling Project that the HTML context will be ingested into
    • e.g. your GDN Project
  2. Click the gear icon > Project Settings
  3. Click Contexts
  4. Insert JavaScript in the Custom JS pane
  5. Insert CSS in the Custom CSS pane
  6. Click Save

Example

If you want to hide the cookie dialog on your website, you could do so by inserting the following CSS in the Custom CSS pane:

#cookie_popup {
   display: none !important;
}

In the above example, "#cookie_popup" is a placeholder ID. In order for this to work, you should replace "#cookie_popup" with the ID of the cookie popup used in your source code.

Important

  • You don't need to insert a script into both panes in order for this to work. Insert JavaScript and/or CSS as necessary. 
  • The maximum character count that can be inserted into either pane is 10,000.
  • This script will be applied to the newly uploaded HTML context that is ingested into that Smartling Project, until it is removed from the Project Settings.
  • Custom CSS is supported with any context integration, including the Smartling Context Chrome Extension and Smartling JS Library.
  • Custom JS is not supported on any context ingested via the Smartling JS Library.

 

 

 

Table of Contents