Tutorial

Translate Your SaaS into 5 Languages with One Script Tag

Published May 12, 2026

Translate Your SaaS into 5 Languages with One Script Tag

How a a B2B SaaS Add 5 Languages with a Single Script Tag

International growth is a top priority for SaaS companies, but translating a web app can feel like a massive engineering effort. SiteLocaleAI solves this problem with a self‑hosted, framework‑agnostic JavaScript library that works with React, Vue, WordPress, Shopify, or any static site. In this tutorial we’ll walk through adding Spanish, French, German, Japanese, and English support to a B2B SaaS product using just one script tag.

1. Prerequisites

  • Access to an LLM API key (Claude, GPT‑4o‑mini, etc.)
  • Your SaaS front‑end hosted on any platform (static files, Node, WordPress, etc.)
  • Optional: Node.js installed locally if you want to use the SEO pre‑render CLI

All configuration lives on the client side; there is no server‑side code change required.

2. Include the SiteLocaleAI Library

Add the CDN‑hosted script to the <head> of your main HTML template. This file is tiny (≈ 12 KB gzipped) and loads asynchronously.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My SaaS Platform</title>
  <script src="https://cdn.sitelocaleai.com/v1/locale.js" async></script>
  <script>
    // Global configuration – replace with your own LLM key
    window.localeConfig = {
      apiKey: "YOUR_LLM_API_KEY",
      defaultLanguage: "en",
      // Languages you want to support
      supportedLanguages: ["en", "es", "fr", "de", "ja"],
      // Enable psychological rounding for prices (e.g., $9.99 → $10)
      priceRounding: true,
      // Let the library pre‑render SEO‑friendly pages for crawlers
      seoPreRender: true
    };
  </script>
</head>
<body>
  <!-- Your SaaS UI goes here -->
</body>
</html>

That’s it—no imports, no framework‑specific wrappers. The library reads window.localeConfig and automatically translates visible text, form placeholders, and price strings.

3. How Translation Works

When a visitor lands on the page, SiteLocaleAI:
1. Detects the browser language or falls back to defaultLanguage.
2. Calls your LLM API with the page’s DOM text chunks.
3. Replaces the original text nodes with the translated version.
4. Adjusts any currency values using psychological rounding (e.g., €9.95 → €10).

Because the LLM calls happen client‑side, you retain full control of API usage and costs. The library respects your API key, so you can switch providers without code changes.

4. SEO‑Friendly Pre‑Rendering (Optional but Recommended)

Search engines still struggle with client‑side rendering. SiteLocaleAI ships a CLI that pre‑renders static HTML for each language, ensuring crawlers index fully translated pages.

# Install the CLI globally (requires Node.js)
npx localeai pre-render \
  --langs es,fr,de,ja \
  --output ./dist

The command:

  • Crawls your site, renders each language in a headless browser, and writes the result to ./dist.
  • Generates <link rel="alternate" hreflang="..."> tags automatically, boosting international SEO.
  • Works with any static site generator or plain HTML folder.

For a deeper dive, see the SEO Pre‑Rendering Guide.

5. WordPress Integration (If Your SaaS Has a Blog)

If your marketing site runs on WordPress, you can skip the Node step entirely. The SiteLocaleAI WordPress plugin injects the same script tag and configuration via the admin panel. No npm or node_modules are required—just activate the plugin, paste your LLM key, and select the supported languages.

6. Testing the Implementation

  1. Open your SaaS in a private window.
  2. Append ?lang=es to the URL (or change your browser language).
  3. Verify that all UI strings, button labels, and price tags appear in Spanish.
  4. Use Chrome DevTools → Network to confirm a request to your LLM endpoint.

If you notice missing translations, you can add custom translation overrides in window.localeConfig.overrides:

window.localeConfig.overrides = {
  "Sign In": { es: "Iniciar sesión", fr: "Se connecter" },
  "$9.99": { es: "$9.99", fr: "9,99 $" }
};

7. Monitoring and Cost Management

Because the library uses your own LLM API key, you can monitor usage directly on the provider’s dashboard. Consider setting a per‑month quota or using a cheaper model (e.g., GPT‑4o‑mini) for high‑traffic pages while reserving Claude for premium content.

8. Going Live

  1. Deploy the updated HTML (or WordPress plugin) to production.
  2. Run the pre‑render CLI for each language and push the generated static files to your CDN.
  3. Submit the language‑specific URLs to Google Search Console using the International Targeting report.

Your SaaS is now fully multilingual, price‑localized, and SEO‑optimized—without a single line of framework‑specific code.

9. Next Steps

  • A/B test different price rounding strategies to see conversion impact.
  • Add locale‑specific FAQs using the overrides feature.
  • Explore dynamic content translation for user‑generated text via the same API.

Ready to start scaling globally? Try SiteLocaleAI today and add instant multilingual support to your SaaS with just one script tag. Visit our Documentation for more examples and start translating now!

Back to blog