Tutorial

Translate Your SaaS Into 5 Languages With One Script Tag

Published March 10, 2026

How to Add 5 Languages to Your B2B SaaS with a Single Script Tag

Published on SiteLocaleAI.com

International expansion is a top priority for B2B SaaS companies, but the engineering overhead of translating UI, localizing prices, and ensuring search engines index the right content can be daunting. SiteLocaleAI solves this with a drop‑in JavaScript library that works with any front‑end framework (React, Vue, Angular, plain HTML) and lets you self‑host the translation model using your own LLM API keys (Claude, GPT‑4o‑mini, etc.).

In this tutorial we’ll walk through a practical use case: a SaaS product that wants to support English, Spanish, German, French, and Japanese using a single script tag. You’ll see how to:

  1. Install the library via a CDN.
  2. Configure the language list and price rounding.
  3. Enable SEO‑friendly pre‑rendering with the CLI.
  4. Add a WordPress plugin for the marketing blog (optional).

TL;DR – Add the script, set a JSON config, and you’re live in all five languages.

1. Drop‑in Script Tag

SiteLocaleAI’s library is framework‑agnostic, so you can embed it directly in your <head>.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Acme Analytics – Dashboard</title>

 <!-- SiteLocaleAI CDN -->
  <script src="https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js" defer></script>

  <!-- Configuration – placed after the library loads -->
  <script defer>
    window.SiteLocaleAIConfig = {
      // Your LLM API key – keep it secret on the server side and inject via env var
      apiKey: "YOUR_OPENAI_OR_CLAUDE_KEY",

      // Languages you want to support (ISO‑639‑1 codes)
      languages: ["en", "es", "de", "fr", "ja"],

      // Default language for visitors (fallback to browser language)
      defaultLanguage: "en",

      // Price localization – rounding rules per currency
      priceLocalization: {
        USD: { round: 0.99 },   // $9.99, $19.99
        EUR: { round: 0.95 },   // €9.95, €19.95
        GBP: { round: 0.99 },   // £9.99
        JPY: { round: 0 },      // ¥1000, ¥2000
        // Add more currencies as needed
      },

      // Enable SEO pre‑rendering (CLI will pick this up)
      seo: { preRender: true }
    };
  </script>
</head>
<body>
  <!-- Your SaaS UI goes here -->
  <div id="app"></div>
</body>
</html>

What’s happening?
- The CDN script loads the core translation engine.
- window.SiteLocaleAIConfig tells the library which languages to generate, how to round prices, and where to find your LLM API key.
- Because the library is self‑hosted, you stay in control of cost and data privacy.

2. Translating UI Text

SiteLocaleAI automatically scans the DOM for elements with the data-i18n attribute. Wrap any user‑facing string like this:

<h1 data-i18n="dashboard.title">Welcome to Acme Analytics</h1>
<p data-i18n="pricing.note">All plans are billed monthly.</p>

When a visitor selects a language (or their browser reports es), the library calls your LLM API to translate the strings once and caches the result in localStorage. Subsequent visits are instantaneous.

If you use a component framework, you can also call the API directly:

import { translate } from "sitelocaleai";

async function getLabel(key) {
  const locale = window.SiteLocaleAI.getCurrentLanguage();
  return await translate(key, locale);
}

3. Localizing Prices with Psychological Rounding

Assume you have a price element like:

<span class="price" data-currency="USD" data-amount="12">$12.00</span>

SiteLocaleAI will replace it with a rounded value based on the priceLocalization config:

<span class="price" data-currency="USD" data-amount="12">$11.99</span>

The rounding logic is simple: it finds the nearest value ending in the configured “psychological” suffix (e.g., .99, .95). You can also supply a custom function if you need more complex rules.

4. SEO‑Friendly Pre‑Rendering

Search engines struggle with client‑side translation. SiteLocaleAI ships a CLI that crawls your site, renders each language, and writes static HTML files for crawlers.

# Install the CLI globally (Node.js required only for the build step)
npm i -g sitelocaleai-cli

# Run the pre‑render for all configured languages
sitelocaleai prerender --output ./dist --url https://app.acmeanalytics.com

The CLI does the following:
1. Launches a headless browser.
2. Sets the Accept-Language header for each language.
3. Saves the fully rendered HTML to ./dist/<lang>/index.html.
4. Generates a sitemap.xml that includes language‑specific URLs (/es/, /de/, …).

You can now serve the static files from any CDN or your own server. Search bots will index the translated pages, giving you a significant SEO boost.

Tip: Combine this with the robots.txt rule Allow: /es/ etc., to make sure crawlers see the language folders.

5. Optional: WordPress Plugin for Your Marketing Blog

If your SaaS also runs a WordPress blog, you don’t need Node.js. The SiteLocaleAI WordPress plugin injects the same script automatically and adds a language switcher widget.

  1. Install the plugin from the WordPress admin → Plugins → Add New → Search “SiteLocaleAI”.
  2. In the plugin settings, paste your LLM API key and the language list.
  3. Publish a post, and the plugin will translate it on‑the‑fly for visitors while the CLI pre‑renders static versions for SEO.

6. Testing the Integration

  1. Open your SaaS in an incognito window.
  2. Append ?lang=es to the URL – you should see Spanish UI and rounded prices.
  3. Use Google’s Mobile-Friendly Test on https://app.acmeanalytics.com/es/ to verify that the pre‑rendered HTML is served.

If any string is missing, add the data-i18n attribute or update your translation keys in the SiteLocaleAI docs.

7. Deploy and Monitor

  • Deploy the static pre‑rendered files to your CDN (e.g., Cloudflare, Netlify).
  • Monitor LLM usage via your provider’s dashboard; SiteLocaleAI caches results, so the cost is minimal after the first translation.
  • Analytics: Add a custom event locale_change to your analytics platform to track language adoption.

8. Wrap‑Up

With just a single script tag and a tiny JSON config, you can:
- Offer five fully translated languages.
- Show psychologically rounded prices per currency.
- Serve SEO‑ready static pages that rank in local search results.
- Keep full control of your LLM costs and data.

Ready to go global? Try SiteLocaleAI now and watch your SaaS grow across borders.

For deeper technical details, see the official documentation: https://sitelocaleai.com/docs.

Back to blog