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 or even inhibiting for linguists working on translating your website.
By default, 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 following example of a bot pop-up:
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.
How it works
Insert custom CSS and/or custom JavaScript into your Smartling Project Settings. The custom CSS is injected into the head tag of your webpage. The custom JS is injected at the end of the body tag, under the special event smartlingBeforeSnapshot. It is a best practice to use this event to alter the document since all scripts, images, and styles are already loaded and run.
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.
Example Use Cases
The following are some use cases for custom context. Please note that the examples provided are not ready-made copy-paste solutions to your individual context problems. Each example solution is relative to the example HTML provided. The examples only give a general idea of what a solution might look like and should be adapted to suit your unique website.
Hide Chats, Pop-ups, Paywalls from Context
The HTML of an example cookie pop-up looks like this:
|
<div class="cookie-popup" id="cookiePopup"> This website uses cookies to ensure you get the best experience on our website. <button onclick="acceptCookies()">Got it!</button> </div> |
The following custom CSS could be used to hide the above cookie pop-up:
|
#cookiePopup { 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.
Expanding Accordions
Accordions are a design component used to hide and reveal content, for example:
This is an example accordion. They are contracted by default. Click to expand for more information.
More information can be found within the accordion. It is a useful to keep pages tidy and reduce cognitive overload for readers. However, you may want to display all accordions expanded in context for translators. Let's explore how you could go about it.
The HTML of an accordion could look like this:
|
<ul class="accordion"> <li> <div class="title">Title 1</div> <div class="content" style="height: 0">Content 1</div> </li> <li class="active"> <div class="title">Title 2</div> <div class="content" style="height: 1200px">Content 2</div> </li> <div class="title">Title 3</div> <div class="content" style="height: 0">Content 3</div> </li> <!-- Other items --> </ul> |
It is important to note that accordions are managed by JavaScript. To make all items visible to translators, we need to add an active class name to each li tag and change the height of the content block.
The following custom CSS could be used to expand accordions in context:
|
.accordion .content { height: auto !important; } |
In addition, the following custom JavaScript could be used to expand accordions in context:
|
document.addEventListener("smartlingBeforeSnapshot", () => { document.querySelectorAll(".accordion li").forEach(element => { element.classList.add("active"); }); }); |
Note: While it is possible to expand accordions by using only custom JavaScript, we recommend using both custom CSS and JavaScript for ease of implementation.
Forcing Lazy Loaded Content
Images on a website are lazy-loaded. This means that they don't load and display until an end user scrolls to them, loading them into view. As translators are not scrolling your website when viewing it in context, lazy loaded content, such as images relevant to their context, may not display.
In this example HTML, lazy loading content is managed by JavaScript. We can see that the original image URL contains in data-src attribute:
|
<div class="gallery"> <img class="image" data-src="content/image1.jpg" /> <img class="image" data-src="content/image2.jpg" /> <img class="image" data-src="content/image3.jpg" /> </div> |
The following custom JavaScript could be used to load all images immediately:
|
document.addEventListener("smartlingBeforeSnapshot", () => { document.querySelectorAll("img:not([src])[data-src]").forEach(element => { element.src = element.getAttribute("data-src"); }); }); |
Anonymizing User Information
Your website may include a form or something similar that contains your end-user's personal information. Similarly, parts of your website could contain sensitive information that you do not want translators to see in context when translating your website. You can replace sensitive information with placeholders using custom JS.
The following HTML is an example of how your users' personal information is displayed on the page:
|
<div class="profile"> <div>Name:</div><div class=”profile-name”>John</div> <div>Email:</div><div class=”profile-email”>john@mail.com</div> </ul> |
The following custom JavaScript could be used to hide personal information:
|
document.addEventListener("smartlingBeforeSnapshot", () => { document.querySelectorAll(".profile-name, .profile-email").forEach(element => { element.innerText = "*********"; }); }); |
Restoring Original Content
Some content on your page may not automatically match with context because of additional tags in the underlying code. For example, where the first letter of a paragraph changes color during text rendering. The original string content may read:
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
However, the HTML has additional classes and tags that prevent the string matching to the context. for example:
| <span class="first-letter">L</span>orem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. |
To solve this, we need to remove a redundant “span” tag to allow Smartling automatically match this string with context.
The following custom JavaScript could be used to restore the changes to the original content:
|
document.addEventListener("smartlingBeforeSnapshot", () => { document.querySelectorAll(".first-letter").forEach(element => { element.replaceWith(element.innerText); }); }); |
How to Apply a Custom Context Script
Account Owner or Project Manager users can apply a custom context script to a Project.
- Go to the Smartling Project that the HTML context will be ingested into
- e.g. your GDN Project
- Click Settings > Contexts
- Insert JavaScript in the Custom JS pane
- Insert CSS in the Custom CSS pane
- Click Save
Important Considerations
- 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.