Tutorial

Add 5 Languages to SaaS with One Script Tag – SiteLocaleAI

Published March 24, 2026

Add 5 Languages to Your SaaS with One Script Tag

Published on SiteLocaleAI Blog

Introduction

International expansion is a top priority for B2B SaaS companies, but translating UI strings, localizing prices, and keeping SEO intact can become a massive engineering effort. SiteLocaleAI solves this with a drop‑in JavaScript library that works with any front‑end framework (React, Vue, plain HTML, WordPress, Shopify, etc.). Because the library is self‑hosted, you keep full control of your LLM API keys (Claude, GPT‑4o‑mini, etc.) and avoid third‑party data leakage.

In this tutorial we’ll show how to add five languages—Spanish, French, German, Japanese, and Portuguese—to a SaaS product using just one script tag and a few lines of configuration. We’ll also cover the CLI for SEO pre‑rendering so search engines can index the translated pages.

1. Include the SiteLocaleAI script

Place the following <script> tag right before the closing </body> tag of your main HTML layout. The script is served from our CDN and is framework‑agnostic.

<script src="https://cdn.sitelocaleai.com/v1/locale.js"></script>

That’s it—no bundler, no Node.js runtime required on the client side.

2. Initialise the library

After the script loads, initialise it with your LLM API key and the list of target languages. The configuration object also enables psychological price rounding and SEO pre‑rendering.

window.locale.init({
  // Your own LLM API key (Claude, GPT‑4o‑mini, etc.)
  apiKey: 'YOUR_LLM_API_KEY',

  // Language codes you want to support
  languages: ['es', 'fr', 'de', 'ja', 'pt'],

  // Default language shown to new visitors
  defaultLang: 'en',

  // Turn on price rounding (e.g., $9.99 → $10)
  rounding: true,

  // Enable SEO‑friendly pre‑rendering (see CLI section)
  seoPreRender: true
});

The library automatically scans the DOM for translatable text nodes, price elements marked with data-price, and replaces them on‑the‑fly. Because the translation happens client‑side, you don’t need to maintain separate language bundles.

3. Mark up price elements (optional but recommended)

To let SiteLocaleAI know which numbers represent prices, add a data-price attribute. The library will fetch the appropriate exchange rate, apply psychological rounding, and format the currency according to the visitor’s locale.

<span data-price="49.99" data-currency="USD">$49.99</span>

When a French visitor lands on the page, the element becomes 49,99 € (rounded to the nearest euro) automatically.

4. SEO pre‑rendering with the CLI

Search engines can’t execute JavaScript reliably for indexing. SiteLocaleAI provides a CLI tool that pre‑renders each language version as static HTML, ensuring full SEO coverage.

First, install the CLI globally (or use npx to avoid a global install):

npm i -g @sitelocaleai/cli

Then run the pre‑render command, pointing it at your build output directory and the language list:

sitelocaleai pre-render \
  --source ./dist \
  --output ./dist/seo \
  --langs es,fr,de,ja,pt

The CLI will:
1. Load each page in a headless browser.
2. Inject the same LLM API key you used on the client.
3. Generate a fully translated HTML snapshot for every language.
4. Write the snapshots to ./dist/seo/<lang>/.

You can now serve those static files to crawlers via a simple rewrite rule or a CDN edge function. The result is indexable, language‑specific URLs like https://app.example.com/es/ that rank in local search results.

Tip: For a quick start, see the official quick‑start guide: https://sitelocaleai.com/docs/quick-start.

5. WordPress users – no Node.js needed

If your SaaS also powers a WordPress blog, you can install the SiteLocaleAI WordPress plugin from the official repository. The plugin injects the same script tag automatically and reads the API key from the admin settings page. No npm or node environment is required on the server.

6. Verify the implementation

  1. Open the homepage in an incognito window.
  2. Append ?lang=es to the URL. The page should instantly switch to Spanish, and all prices should appear in euros.
  3. Use Google’s URL Inspection tool to fetch the pre‑rendered /es/ page and confirm that the HTML contains the translated content.

If you spot any missing translations, add a data-translate="true" attribute to the element and the library will prioritize it.

7. Monitoring and analytics

SiteLocaleAI emits custom events (locale:languageChanged, locale:priceRounded) that you can listen to for analytics:

window.addEventListener('locale:languageChanged', e => {
  console.log('User switched to', e.detail.lang);
  // Push to your analytics platform
});

Tracking language switches helps you understand which markets are most active and where to focus future product improvements.

8. Next steps

  • A/B test the rounded prices versus exact prices to see which drives higher conversion.
  • Add more languages by simply extending the languages array—no code changes required.
  • Upgrade your plan if you need higher LLM throughput or enterprise‑grade support. See the pricing page for details.

Conclusion

With SiteLocaleAI, a B2B SaaS can go from a monolingual product to a fully localized, SEO‑friendly experience in minutes—just a single script tag, a tiny configuration object, and an optional CLI run for search‑engine indexing. The self‑hosted model keeps your API keys private, while the price‑rounding feature boosts conversion across currencies.

Ready to make your SaaS truly global? Try SiteLocaleAI today and add five languages in under ten minutes.

For deeper technical details, visit our documentation: https://sitelocaleai.com/docs/cli

Back to blog