Add 5 Languages to Your SaaS with One Script Tag

Published on SiteLocaleAI.com ---

International expansion is a top priority for B2B SaaS companies, but the engineering effort can be daunting. SiteLocaleAI removes that friction with a drop‑in JavaScript library that works with any front‑end framework—or none at all. In this tutorial we’ll walk through adding five languages (English, Spanish, German, Japanese, and Portuguese) to a typical SaaS product using just one script tag.

---

1. Prerequisites

Item	Why it matters
Self‑hosted LLM API key (Claude, GPT‑4o‑mini, etc.)	Keeps data private and lets you control costs.
Node.js (optional)	Needed only if you want to pre‑render SEO pages with the CLI.
Access to your site’s HTML	The script tag is injected into the <head> of every page.

Tip: If you’re on WordPress, you can skip the manual script injection and use the free WordPress plugin—no Node.js required.

---

2. Install the library (optional CLI)

For SEO‑friendly pre‑rendering you can install the CLI globally:

npm i -g @sitelocaleai/cli

The CLI will crawl your routes, generate static HTML for each language, and write the files to a dist/ folder ready for your CDN.

---

3. Add the single script tag

Place the following snippet once in the <head> of your main HTML template (e.g., index.html, base.html, or your framework’s layout component).

<head>
  <!-- SiteLocaleAI – One‑liner integration -->
  <script
    src="https://cdn.sitelocaleai.com/v1/siteLocaleAI.min.js"
    data-api-key="YOUR_LLM_API_KEY"
    data-default-lang="en"
    data-supported-langs="en,es,de,ja,pt"
    data-price-rounding="true"
    defer
  ></script>
</head>

Explanation of attributes:

• data-api-key: Your LLM provider key (Claude, GPT‑4o‑mini, etc.).
• data-default-lang: Fallback language when the visitor’s locale can’t be detected.
• data-supported-langs: Comma‑separated list of ISO‑639‑1 codes you want to serve.
• data-price-rounding: Enables psychological rounding per currency (e.g., €9.99 → €10).
• defer: Guarantees the script runs after the page has parsed, avoiding layout shifts.

That’s it—no additional bundle, no React‑specific wrapper, and no server‑side changes.

---

4. How SiteLocaleAI works under the hood

1. Locale detection – The library reads the browser’s Accept‑Language header and falls back to the data-default-lang.
2. Dynamic translation – When a new language is requested, the script calls your LLM API, passing the raw HTML of the page. The LLM returns a translated version, which the script swaps in‑place.
3. Price localization – Numbers that look like prices (e.g., $49.99) are detected, converted using the latest exchange rates, and rounded to the most persuasive price point for the target currency.
4. SEO pre‑rendering (optional) – The CLI runs the same translation pipeline at build time, outputting static HTML files for each language. Search engines index these pages as if they were hand‑crafted translations.

---

5. Verify the integration locally

Run a quick local server (e.g., python -m http.server) and navigate to http://localhost:8000. Open the dev console and you should see:

[SiteLocaleAI] Detected language: es
[SiteLocaleAI] Translating page…

Switch your browser language to Japanese (ja) and refresh – the UI text and price labels will instantly appear in Japanese yen, rounded to the nearest ¥10.

---

6. SEO pre‑rendering with the CLI (recommended for B2B SaaS)

If you want search engines to crawl the translated pages, run:

siteLocaleAI prerender \
  --src ./public \
  --out ./dist \
  --langs en,es,de,ja,pt \
  --api-key YOUR_LLM_API_KEY

The CLI will:

• Crawl every route under ./public.
• Generate en/index.html, es/index.html, … etc.
• Replace price placeholders with localized, rounded values.

Deploy the dist/ folder to your static host (Vercel, Netlify, CloudFront, etc.). Googlebot will now see fully rendered, language‑specific pages, boosting international SEO.

---

7. Advanced: Custom price rounding rules

SiteLocaleAI lets you fine‑tune rounding per currency. Add a small JSON config and reference it via data-price-config:

<script
  src="https://cdn.sitelocaleai.com/v1/siteLocaleAI.min.js"
  data-api-key="YOUR_LLM_API_KEY"
  data-supported-langs="en,es,de,ja,pt"
  data-price-config="/price-config.json"
  defer
></script>

price-config.json example:

{
  "USD": { "round": 0.99 },
  "EUR": { "round": 0.95 },
  "JPY": { "round": 10 },
  "BRL": { "round": 0.90 }
}

Now $49.99 becomes $49.99 (no change), €49.99 → €49.95, ¥5000 → ¥5000 (already a multiple of 10), and R$49.99 → R$49.90.

---

8. Internal documentation links

For deeper configuration options, see the official docs:
- SiteLocaleAI Configuration Guide
- SEO Pre‑rendering CLI Reference

---

9. Wrap‑up

With one script tag you’ve turned a single‑language SaaS into a five‑language, SEO‑ready product that respects local pricing psychology. The approach works across React, Vue, Angular, WordPress, Shopify, or any static site generator—no framework lock‑in.

Ready to go global? Try SiteLocaleAI today and watch your international conversions soar.