Tutorial

Add 5 Languages to Your SaaS with One Script Tag

Published October 15, 2026

Add 5 Languages to Your SaaS with One Script Tag

Introduction

International growth is a top priority for B2B SaaS companies, but adding multilingual support often means a massive engineering effort. SiteLocaleAI eliminates that friction with a drop‑in, framework‑agnostic JavaScript library that runs on the client, uses your own LLM API keys, and can pre‑render translated pages for SEO. In this tutorial we’ll add five languages—French, German, Spanish, Japanese, and Portuguese—to a SaaS product with just one script tag.

Prerequisites

  • Your SaaS front‑end is hosted on any stack (React, Vue, plain HTML, WordPress, Shopify, etc.).
  • Access to an LLM API key (OpenAI gpt-4o-mini, Anthropic Claude, etc.).
  • Node.js installed locally for the optional CLI SEO pre‑rendering step.
  • (Optional) WordPress site – you can skip the CLI and use the plugin.

1. Install the SiteLocaleAI library

Add the library via a CDN script tag once in the <head> of your main HTML template:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Acme Analytics – Dashboard</title>
  <!-- SiteLocaleAI core script -->
  <script src="https://cdn.sitelocaleai.com/v1/site-locale.min.js" defer></script>
  <!-- Configuration script (see next step) -->
  <script src="/js/site-locale-config.js" defer></script>
</head>
<body>
  <!-- Your app root -->
  <div id="app"></div>
</body>
</html>

The defer attribute ensures the script loads after the page’s HTML, preventing layout shifts.

2. Create a single configuration file

All language settings live in one JSON‑compatible JavaScript file. Create /js/site-locale-config.js:

// site-locale-config.js
window.SiteLocaleAI = {
  // Your LLM provider and API key (keep it secret on the server side)
  llm: {
    provider: 'openai', // or 'anthropic', 'gemini', etc.
    apiKey: 'YOUR_OPENAI_API_KEY', // set via environment variable in production
  },
  // Languages you want to support (ISO‑639‑1 codes)
  languages: ['fr', 'de', 'es', 'ja', 'pt'],
  // Default language – the one your site already serves in
  defaultLanguage: 'en',
  // Price localization rules – SiteLocaleAI handles rounding automatically
  priceOptions: {
    currencyMap: {
      fr: 'EUR',
      de: 'EUR',
      es: 'EUR',
      ja: 'JPY',
      pt: 'BRL',
    },
    // Enable psychological rounding (e.g., €9.99 → €10)
    rounding: true,
  },
  // SEO pre‑rendering – optional but highly recommended
  seo: {
    enable: true,
    // Paths that should be pre‑rendered for each language
    routes: ['/pricing', '/features', '/blog/*'],
  },
};

Security tip: In production, inject the API key server‑side (e.g., via a signed JWT) instead of hard‑coding it.

3. Activate the library in your app

If you’re using a framework, call the init method after the DOM is ready. Below is a vanilla‑JS example that works everywhere:

// main.js – your existing entry point
document.addEventListener('DOMContentLoaded', () => {
  if (window.SiteLocaleAI) {
    SiteLocaleAI.init()
      .then(() => console.log('SiteLocaleAI ready'))
      .catch(err => console.error('SiteLocaleAI init error', err));
  }
});

For React, Vue, or Next.js you can place the same call inside a top‑level component’s useEffect/onMounted hook.

4. Translate static content automatically

SiteLocaleAI scans the DOM for text nodes and translates them on the fly using the configured LLM. No additional markup is required. However, you can fine‑tune translations with data-sitelocale attributes:

<h1 data-sitelocale="welcome">Welcome to Acme Analytics</h1>
<p data-sitelocale="pricing_desc">Our plans start at $5 per month.</p>

The attribute value is used as a translation key so the same sentence stays consistent across languages.

5. Localize prices with psychological rounding

Wrap any price in a <span> with the data-price attribute. SiteLocaleAI will replace it with the correctly formatted, rounded value for the current locale.

<p>Starter plan: <span data-price="5">$5</span>/month</p>

When a French visitor loads the page, the output becomes:

<p>Starter plan: <span data-price="5">10 €</span>/mois</p>

(The library converts $5 → €4.5, then rounds to the nearest psychologically appealing figure, €5 → €5, but for demonstration we show €10.)

6. SEO pre‑rendering with the CLI (optional but recommended)

Search engines can’t execute JavaScript on every request, so we pre‑render static pages for each language. Install the CLI globally:

npm i -g @sitelocaleai/cli

Run the pre‑render command for your site’s build folder:

site-locale-cli pre-render \
  --input ./dist \
  --output ./dist-localized \
  --languages fr,de,es,ja,pt \
  --api-key $OPENAI_API_KEY

The CLI crawls the routes defined in seo.routes, generates translated HTML files, and writes them to dist-localized. Deploy that folder to your CDN or static host. Search engines will now index each language version under URLs like /fr/pricing or /ja/blog/how-to-scale.

WordPress users: Skip the CLI and install the official SiteLocaleAI plugin. It automatically creates the localized pages and adds <link rel="alternate"> tags.

7. Verify the implementation

  1. Open your site in a private window.
  2. Append ?lang=fr to the URL (or use the language selector UI that SiteLocaleAI injects automatically).
  3. Confirm that all UI text, pricing, and meta tags are in French.
  4. Use Google’s URL Inspection tool to fetch the pre‑rendered /fr/pricing page and verify that the HTML contains the translated content.

8. Monitoring and analytics

SiteLocaleAI emits events you can hook into for analytics:

SiteLocaleAI.on('languageChanged', (lang) => {
  console.log('User switched to', lang);
  // Push to your analytics platform
  gtag('event', 'language_change', { language: lang });
});

Track conversion rates per locale to see which markets are most responsive.

9. Wrap‑up

With one script tag, a tiny JSON config, and an optional CLI step, you’ve turned a monolingual SaaS into a truly global product. The benefits are immediate:
- Faster time‑to‑market – no separate codebases per language.
- SEO‑friendly – search engines index fully translated pages.
- Accurate pricing – each currency is rounded to psychologically appealing numbers, boosting conversion.
- Control – you keep the LLM API key, so data never leaves your infrastructure.

Next steps

  • Add a language selector UI (SiteLocaleAI provides a ready‑made widget).
  • Expand to more languages by updating the languages array.
  • Experiment with custom translation prompts for industry‑specific terminology.

Ready to go global? Try SiteLocaleAI for free and see how easy multilingual localization can be.

Internal resources:
- Detailed API reference: https://sitelocaleai.com/docs/api
- SEO pre‑rendering guide: https://sitelocaleai.com/docs/seo

Happy translating!

Back to blog