Excluding Content
Learn how to exclude specific elements, sections, or content types from the translation widget.
Excluding Content
While the Translation Widget translates most visible text automatically, you may want to exclude certain elements from translation.
Using data-translate-skip
Add the data-translate-skip attribute to any element to exclude it and all its children from translation:
<!-- This entire section will not be translated -->
<div data-translate-skip>
<h2>Brand Name</h2>
<p>Tagline that shouldn't change</p>
</div><!-- Single element exclusion -->
<span data-translate-skip>TM</span>Common Exclusion Scenarios
Brand Names & Trademarks
<header>
<span data-translate-skip>Acme Healthcare</span>
<nav><!-- Navigation will be translated --></nav>
</header>Legal Text
<footer>
<div data-translate-skip>
© 2024 Company Name. All rights reserved.
<a href="/terms">Terms of Service</a>
</div>
</footer>Code Snippets
<pre data-translate-skip>
<code>const apiKey = "your-key-here";</code>
</pre>Proper Nouns & Technical Terms
<p>
Our platform integrates with
<span data-translate-skip>Salesforce</span>, <span data-translate-skip>HubSpot</span>, and
<span data-translate-skip>Marketo</span>.
</p>Automatically Excluded Content
The widget automatically skips these elements without any configuration:
| Element/Selector | Reason |
|---|---|
<script> | Code, not content |
<style> | CSS, not content |
<input>, <textarea> | User input fields |
<iframe> | External content |
<noscript> | Fallback content |
display: none | Hidden content |
visibility: hidden | Hidden content |
For any other content you want to exclude, use the data-translate-skip attribute.
CSS Class Exclusion
You can also use CSS classes for bulk exclusions:
<style>
.no-translate {
/* Your styling */
}
</style>
<div class="no-translate" data-translate-skip>Content to exclude</div>Parent-Child Inheritance
The data-translate-skip attribute cascades to all child elements:
<article data-translate-skip>
<!-- Everything in this article is excluded -->
<h1>Title</h1>
<p>Paragraph</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</article>Selective Inclusion (Not Supported)
Currently, there's no way to include a child element if a parent has data-translate-skip. Plan your exclusions at the most specific level needed:
<!-- Don't do this -->
<div data-translate-skip>
<p data-translate-include>This won't work</p>
</div>
<!-- Do this instead -->
<div>
<p data-translate-skip>Excluded text</p>
<p>This will be translated</p>
</div>Dynamic Content
The data-translate-skip attribute works for dynamically-added content too. Any new elements with this attribute will be automatically excluded.
// Dynamically added content with exclusion
const el = document.createElement('div');
el.setAttribute('data-translate-skip', '');
el.textContent = 'This will not be translated';
document.body.appendChild(el);Best Practices
- Be specific: Apply exclusions to the smallest element necessary
- Brand consistency: Exclude brand names, product names, and trademarks
- Legal content: Consider excluding legal text that must remain in original language
- Technical terms: Exclude industry-specific terms that shouldn't be translated
- Test thoroughly: Verify exclusions work as expected in all languages
Next Steps
How is this guide?