Smartcat Website Translator: What It Does and How It Works

Smartcat’s Website Translator is a script-based localization tool that translates your website without changing the CMS, backend, or codebase.

Instead of creating separate language versions of a site with multiple URLs, it works directly on the rendered page in the browser. You add a small JavaScript snippet to the site, choose the target languages, and your pages get translated and served to international visitors automatically.

The translated content is stored on a CDN and is rendered dynamically when visitors load the site.

Since the translation works on top of the rendered website rather than the backend, it can usually be deployed without major engineering involvement. In short, with Smartcat, content and marketing teams can handle the translation.

Smartcat’s translation boils down to - translate what users see on their browser.

When someone visits your site, their browser renders the page from HTML, CSS, and JavaScript, which together form the final visual output.

This rendered page exists as a structure called the DOM ( Document Object Model ), and that's what the translator works with.

A small JavaScript snippet added to the site runs when the page loads. It detects the visitor's language settings, fetches the relevant translations from Smartcat’s CDN, and replaces the visible text on the page. Users can switch languages manually, and their preference stays on as they move through the site.

Since the entire translation system works at the browser layer, the website’s backend stack doesn’t matter here. Whether the site is built with WordPress, Shopify, Webflow, React frontends, or even older legacy systems. As long as the site renders in a browser, the translator works.

The script also doesn't stop after the initial page load. Modern websites don’t load everything up front. There might be modals appearing after clicks, dropdowns populating from APIs, and/or validation messages appearing after form submissions.

So, instead of scanning the page once and stopping, the script continuously watches for new text nodes appearing in the DOM and translates them as they render.

Smartcat’s setup process is shorter than you expect.

A project starts once you enter the site’s URL and select target languages. Smartcat then generates a preview version of the site inside its own interface by proxying the rendered pages and translating them.

Next, the content team can review the translated pages, make edits, and approve the final version.

Once translations are approved, Smartcat publishes them as lightweight JSON assets to its CDN. Then all you need to do is add a single JavaScript snippet to your website page header for the translation to activate on the live site.

From there, whenever a user visits the site, the translated content is fetched from the CDN and served to the visitor in their preferred language.

You can check out the step-by-step setup guide here.

Smartcat’s architecture provides several key advantages over traditional translation approaches. These include:

One of the biggest frustrations of traditional website translation tools is their coverage. The main page content gets translated, but interactive elements often don’t.

The forms stay in the original language, modals appear as is, and dropdowns and validation messages remain untranslated. For a visitor, the site looks only partially translated.

Since Smartcat’s Translator works directly on the rendered DOM, it can pick up content that appears after the initial page load. This includes dynamically rendered UI elements like modals, popups, notifications, dropdowns, and any components rendered by JavaScript frameworks after the page is interactive.

So, instead of translating a static snapshot of the page, the script continuously watches for new text appearing in the interface and translates it as it renders.

Smartcat delivers the published translations through a CDN rather than directly from its servers.

As a result, translation assets are lightweight, cached, and served from edge locations close to the visitor, which makes delivery fast even across large multilingual sites.

It also means resilience. Once translations are published, they continue working even if Smartcat is down and temporarily unavailable.

The system also doesn’t require every page to be translated upfront.

When a visitor lands on untranslated content, the script can generate the translation on demand, cache it, and reuse it for future visits. So, every visitor after that gets the cached version instantly. Smartcat calls this mechanism "crowding."

The only tradeoff is a small latency cost, i.e., delay in translation, on first visits to new or updated content.

Smartcat supports multiple translation providers, including Google, DeepL, Gemini, ChatGPT, Claude, Apple, Amazon, Microsoft, and applies its logic to select the best one for each language pair.

Websites often use specific terminologies, brand-specific names, and industry jargon that need to be reused consistently. These terms can often get lost in translation.

Smartcat accounts for translation memory and allows you to reuse specific terms consistently across languages. You can also fine-tune the translation with custom prompts for LLM engines on tone and style.

Websites have repeating sections like headers, footers, navigation menus, and banners, appearing across pages.

The st-shared-section attribute allows teams to define shared sections so recurring elements are translated once and reused consistently everywhere.

Beyond visible body text, Smartcat also gives the option to translate elements that affect SEO.

The site’s metadata, like page titles, descriptions, image alt attributes, placeholder text, ARIA labels, and hreflang tags, are also translated.

Some websites may contain personal or sensitive information that should not be processed for translation.

To handle this, Smartcat allows site owners to explicitly exclude sections of the page from translation.

Elements marked with the st-ignore attribute are skipped by the translation system entirely, along with the content inside them. This gives teams a way to isolate account data, payment details, internal tools, or other sensitive interface areas from translation workflows.

Sites that want tighter control over data handling can also disable on-demand translation entirely and rely only on pre-published translation assets.

Every translation model comes with tradeoffs. Smartcat’s script-based approach has several advantages we discussed above, but it also has constraints, mainly from the browser environment it operates in.

One of the biggest roadblocks is cross-domain iframes.

If a site embeds a third-party booking tool, payment form, embedded scheduling tools, or external widgets, browser security rules prevent the script from accessing the content inside.

This limitation applies to any browser-based translation system. The only workaround is installing a translation script inside the iframe separately, which is only possible if you also control the embedded source.

Layout is another common edge case, especially for RTL languages like Arabic or Hebrew. Smartcat can switch the page direction using the browser’s native RTL support, but it can’t rewrite the site’s CSS.

Layouts built around fixed-width containers, hard-coded positioning, or left/right assumptions often break under longer translated text or mirrored interfaces.

The same issue appears with text expansion in languages like German or French. The in-context editor helps surface these problems during review, but fixing the underlying layout is beyond Smartcat here. The website owner or engineering team needs to address the layout.

When a visitor lands on content that hasn’t been translated yet, the system generates and caches the translation before serving it.

Subsequent visitors receive the cached version instantly, but the first visit can experience a short delay.

Bot protection systems like Cloudflare sometimes block Smartcat's preview from loading during setup, because the requests originate from AWS IP addresses and look like automated traffic. The fix is whitelisting Smartcat's static IP addresses.

Single-page applications built with frameworks like React can occasionally run into rendering conflicts if the translated HTML structure isn’t preserved correctly.

Browser extensions that inject content into the DOM can also create noise the translation layer attempts to process. Smartcat has filters for known extensions and source-language detection to mitigate this.

Smartcat Website Translator isn't built for every site.

It’s most useful for teams that need to support multiple languages without rebuilding their existing infrastructure.

These can be SaaS products serving international users, content-heavy websites, and companies expanding into new markets without wanting localization tied to engineering release cycles.

For smaller sites with only a handful of pages or one or two target languages, a simpler CMS plugin or manual workflow is often enough.

The advantages of a browser-layer translation system like Smartcat become obvious as the volume of content, number of languages, and frequency of updates increase.

So, if you’re looking for a translation tool for your website and don’t want the hassles of changing the codebase or managing duplicate URLs, check out the Smartcat Website Translator .