Tutorial

Add 5 Languages to Your SaaS with One Script Tag

Published March 13, 2026

Add 5 Languages to Your SaaS with One Script Tag

Add 5 Languages to Your SaaS with One Script Tag

Published on SiteLocaleAI.com

Overview

For a B2B SaaS, entering new markets means more than just translating UI strings—it requires localized pricing, SEO‑ready pages, and a seamless developer experience. SiteLocaleAI’s drop‑in JavaScript library lets you achieve all of this with a single <script> tag, while keeping the heavy lifting on your own LLM API keys (Claude, GPT‑4o‑mini, etc.). This guide shows how to add five languages to a SaaS product in under an hour.

Prerequisites

Item Why it matters
Self‑hosted LLM API key Keeps data private and lets you pick the model that fits your budget.
Node.js (optional) Only needed for the SEO CLI; the runtime script works in any browser.
Access to your site’s HTML template You’ll inject a single script tag in the <head> section.
Basic knowledge of your tech stack (React, Vue, WordPress, etc.) The library is framework‑agnostic, but you’ll want to know where the HTML is rendered.

Step 1: Install the Library (Optional CLI)

If you want to pre‑render translated pages for search engines, install the CLI globally:

npm i -g @sitelocaleai/cli

The CLI is optional for runtime translation, but it dramatically improves indexing because crawlers receive fully rendered HTML.

Step 2: Configure Your Languages

Create a JSON file (e.g., sitelocale.config.json) that lists the target locales and price‑rounding rules. SiteLocaleAI automatically applies psychological rounding (e.g., $9.99 → $9.95) per currency.

{
  "locales": [
    { "code": "en-US", "currency": "USD" },
    { "code": "en-GB", "currency": "GBP" },
    { "code": "de-DE", "currency": "EUR" },
    { "code": "ja-JP", "currency": "JPY" },
    { "code": "pt-BR", "currency": "BRL" }
  ],
  "priceRounding": {
    "USD": 0.05,
    "GBP": 0.05,
    "EUR": 0.05,
    "JPY": 1,
    "BRL": 0.05
  }
}

Store this file alongside your static assets; the library will fetch it at runtime.

Step 3: Add the Single Script Tag

Place the following snippet once in the <head> of your main HTML template (e.g., index.html, header.php, or a React <Helmet> component).

<script>
  // Load the SiteLocaleAI library from your CDN or self‑hosted bundle
  (function(){
    var s=document.createElement('script');
    s.src='https://cdn.sitelocaleai.com/v1/sitelocale.min.js';
    s.async=true;
    s.onload=function(){
      // Initialize with your LLM API key and config URL
      SiteLocale.init({
        apiKey: 'YOUR_LLM_API_KEY', // e.g., Claude or GPT‑4o‑mini
        configUrl: '/sitelocale.config.json',
        defaultLocale: 'en-US',
        fallbackLocale: 'en-US'
      });
    };
    document.head.appendChild(s);
  })();
</script>

Key points:
- apiKey is never exposed to the public; the library forwards requests server‑side via your own backend proxy (see docs for a minimal Node/Express example).
- configUrl points to the JSON you created in Step 2.
- The script works with any framework because it manipulates the DOM directly after the page loads.

Step 4: Pre‑render SEO‑Friendly Pages with the CLI

Search engines struggle with client‑side translations. Run the CLI to generate static HTML for each locale and serve them under language‑specific paths (/en-us/, /de-de/, etc.).

sitelocale-cli prerender \
  --src ./public \
  --out ./dist \
  --locales en-US,en-GB,de-DE,ja-JP,pt-BR \
  --api-key $LMM_API_KEY

The CLI:
1. Crawls your site.
2. Sends each page to your LLM for translation.
3. Applies price rounding.
4. Writes locale‑specific HTML files.

After the run, configure your web server (NGINX, Apache, Vercel, Netlify) to serve the appropriate folder based on the Accept‑Language header or URL prefix.

Step 5: Verify & Test

  1. Browser test – Open https://your‑saas.com and use the language selector that SiteLocaleAI injects automatically. Verify UI text, dates, and prices.
  2. SEO test – Use curl -I https://your‑saas.com/de-DE/ and inspect the <title> and <meta description> tags. They should be in German and contain localized pricing.
  3. Performance check – The library loads asynchronously and only translates visible text, keeping the Time‑to‑Interactive under 1 s on a typical 3G connection.

Tips for B2B SaaS

  • Feature flags – If certain modules are only available in specific regions, wrap them in a data‑locale‑only attribute. SiteLocaleAI will hide them for other locales.
  • Legal compliance – Use the priceRounding config to meet local pricing regulations (e.g., ending in .99 for US, .95 for EU).
  • Analytics – Append ?lang=xx-XX to your tracking URLs so you can segment users by locale in tools like Mixpanel or GA4.
  • WordPress users – Install the official SiteLocaleAI plugin; it automatically injects the script and creates the sitelocale.config.json file for you, without any Node.js.

Conclusion

With just one script tag and a tiny JSON config, a B2B SaaS can launch a fully localized experience in five languages, boost international SEO, and keep pricing psychologically appealing. The self‑hosted model guarantees data privacy while giving you full control over LLM costs.

Ready to go global? Try SiteLocaleAI today and see how fast your SaaS can speak every language.

For deeper integration details, see the official documentation:
- https://sitelocaleai.com/docs/quick-start
- https://sitelocaleai.com/docs/cli

Back to blog