Translate Your SaaS into 5 Languages with One Script Tag

Published on SiteLocaleAI Blog ---

International expansion is often blocked by the perceived effort of translating UI strings, localizing prices, and making sure search engines can index the new language pages. With SiteLocaleAI, a self‑hosted, framework‑agnostic JavaScript library, you can accomplish all three with a single script tag.

In this tutorial we’ll walk a B2B SaaS through:

1. Adding five language packs (English, Spanish, French, German, Japanese).
2. Localizing subscription prices with psychological rounding.
3. Generating SEO‑friendly pre‑rendered pages using the CLI.

All steps work on any front‑end framework (React, Vue, plain HTML) and even on WordPress via the official plugin – no Node.js required on the client.

---

Prerequisites

• Self‑hosted LLM API key – SiteLocaleAI does not provide a model; you supply your own (Claude, GPT‑4o‑mini, etc.).
• Access to your site’s HTML – to insert the script tag.
• Node.js (optional) – only needed for the SEO pre‑render CLI.

If you’re on WordPress, you can skip the CLI and use the plugin, but the steps below cover the generic case.

---

1. Drop the Script Tag

Add the following snippet right before the closing </body> tag of your main layout file (e.g., index.html, footer.php, or your React root component). The script loads the library from your CDN and reads configuration from a global window.siteLocaleConfig object.

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

<!-- Configuration object – must appear *before* the library loads -->
<script>
window.siteLocaleConfig = {
  // Your LLM endpoint – can be Claude, GPT‑4o‑mini, etc.
  llmEndpoint: "https://api.openai.com/v1/chat/completions",
  apiKey: "YOUR_LLM_API_KEY",

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

  // Price localization settings
  price: {
    // Enable psychological rounding (e.g., $9.99 → $9.95)
    round: true,
    // Currency mapping per language – you can override per market
    currencyMap: {
      en: "USD",
      es: "EUR",
      fr: "EUR",
      de: "EUR",
      ja: "JPY"
    }
  },

  // Optional: custom selector for price elements
  priceSelector: ".price",
};
</script>

Tip: Keep the configuration in a separate file (site-locale-config.js) and load it before the CDN script for cleaner version control.

---

2. Markup Your UI for Translation & Price Localization

SiteLocaleAI works by scanning the DOM for translatable text nodes and for elements that match priceSelector. No extra markup is required, but you can help the engine with data attributes.

<h1 data-locale-key="hero.title">Welcome to Acme Analytics</h1>
<p data-locale-key="hero.subtitle">Turn data into insights instantly.</p>

<!-- Price element – the library will replace the inner text with a localized amount -->
<div class="price" data-price-usd="49">$49</div>

• data-locale-key – a stable identifier that persists across languages.
• data-price-usd – the base price in USD; the library converts it to the target currency and applies rounding.

When the page loads, SiteLocaleAI will:
1. Detect the visitor’s language (or fall back to defaultLanguage).
2. Call your LLM to translate each data-locale-key string.
3. Convert the price using the currencyMap and round it (e.g., $49 → €44.95).

---

3. SEO Pre‑Rendering with the CLI

Search engines struggle with client‑side translations. SiteLocaleAI’s CLI can pre‑render each language version as static HTML, ensuring crawlers see fully translated content.

Install the CLI (once per project)

npm install -g @sitelocaleai/cli

Run the pre‑render command

site-locale-cli prerender \
  --src ./public/index.html \
  --out ./public/locale \
  --langs en,es,fr,de,ja \
  --config ./site-locale-config.js

• --src points to the original HTML entry point.
• --out is the folder where language‑specific files will be written (en/index.html, es/index.html, …).
• --langs must match the languages array in the config.
• --config supplies the same configuration used by the client library.

After the command finishes, upload the locale/ folder to your CDN or static‑host. Each language gets its own URL (e.g., https://app.acme.com/es/).

Why this matters: Google and Bing index the pre‑rendered pages, giving you full international SEO coverage without sacrificing the dynamic translation experience for real users.

---

4. WordPress Users – No Node Required

If your SaaS runs on a WordPress site, install the SiteLocaleAI plugin from the WordPress marketplace. The plugin adds the same script tag automatically and provides a UI under Settings → SiteLocaleAI to paste your LLM API key and select languages. Prices are localized using the same data-price-usd attribute.

You can still generate SEO‑friendly pages using the CLI on a local machine and then push the static files to your WordPress public_html directory.

---

5. Best Practices & Gotchas

Practice	Reason
Keep data-locale-key stable	Changing the key forces a new translation request, increasing latency and cost.
Cache translations	SiteLocaleAI automatically caches per‑language strings in localStorage. For high‑traffic SaaS, consider server‑side caching of the LLM responses.
Test rounding	Psychological rounding works well for subscription tiers; verify that the rounded amount complies with local pricing regulations.
Monitor LLM usage	Because you supply the API key, keep an eye on token consumption to avoid surprise bills.
Validate SEO output	Run curl -I https://app.acme.com/es/ and inspect the <title> and <meta description> tags to ensure they’re translated.

---

6. Wrap‑Up

With just one script tag, a configuration object, and a single CLI command, your B2B SaaS can:
- Offer five fully translated language experiences.
- Show prices in the visitor’s native currency with psychologically rounded numbers.
- Provide search engines with static, indexable pages for each locale.

All of this runs on your own LLM API keys, keeping data private and costs predictable.

---

Ready to go global? Try SiteLocaleAI now and see how quickly you can add multilingual support to any web app.

---

For deeper technical details, visit our Documentation or join the community Slack.