Add 5 Languages to Your B2B SaaS with One Script Tag

International growth for a B2B SaaS product often stalls because translating the UI, localizing pricing, and making the pages crawlable feels like a massive engineering effort. SiteLocaleAI removes that friction: a single, framework‑agnostic JavaScript snippet can spin up LLM‑powered translations, apply psychological price rounding, and even pre‑render SEO‑friendly pages for Google and Bing.

In this tutorial we’ll take a typical SaaS landing page built with plain HTML/CSS (the same steps work in React, Vue, Next.js, or any static site) and add English, Spanish, German, French, and Japanese in under ten minutes.

1. Grab Your LLM API Keys

SiteLocaleAI is self‑hosted, meaning you keep full control of the LLM you call. Sign up for the provider of your choice (Claude, GPT‑4o‑mini, etc.) and copy the API key.

# Example: set the key as an environment variable for the CLI
export OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx

2. Insert the Drop‑in Script

Add the following tag just before the closing </body> tag of every page you want to translate. The script automatically detects the visitor’s language preference, fetches the translation from your LLM, and swaps the text in place.

<script src="https://cdn.sitelocaleai.com/v1/locale.min.js"></script>
<script>
  LocaleAI.init({
    // Your LLM endpoint – you can switch providers without code changes
    llmEndpoint: "https://api.openai.com/v1/chat/completions",
    apiKey: window.env.OPENAI_API_KEY, // injected by your server or a meta tag
    // Languages you want to support
    languages: ["en", "es", "de", "fr", "ja"],
    // Default language (fallback when detection fails)
    defaultLang: "en",
    // Price localization rules – see docs for full options
    price: {
      round: "psychological", // 9.99 → 9.95, 19.99 → 19.95, etc.
      currencyMap: {
        USD: "$",
        EUR: "€",
        GBP: "£",
        JPY: "¥"
      }
    }
  });
</script>

That’s it—no bundler, no Node.js, no framework magic. The library works in any environment that can serve a static HTML file. For more details, see the initialization docs.

3. Prepare Your Text for Translation

SiteLocaleAI looks for elements with a data-locale-key attribute. Add the attribute to any user‑visible string (headings, button labels, feature lists, etc.). The value is a stable identifier that the LLM will use to keep translations consistent across updates.

<h1 data-locale-key="hero.title">All‑in‑One Analytics Platform</h1>
<p data-locale-key="hero.subtitle">
  Turn raw data into actionable insights in seconds.
</p>
<button data-locale-key="cta.button">Start Free Trial</button>

If you forget an attribute, the library falls back to on‑the‑fly translation, which is slower but still works.

4. Localize Prices with Psychological Rounding

For SaaS pricing tables, you probably already have a data-price attribute. SiteLocaleAI will replace the raw number with a rounded, currency‑appropriate string.

<div class="plan">
  <h2>Pro</h2>
  <p class="price" data-price="29.99" data-currency="USD">$29.99</p>
  <ul>
    <li data-locale-key="plan.pro.feature1">Unlimited projects</li>
    <li data-locale-key="plan.pro.feature2">Priority support</li>
  </ul>
</div>

When a Japanese visitor lands on the page, the price becomes ¥2,950 (rounded to the nearest 50 yen) and the currency symbol switches automatically.

5. SEO Pre‑Rendering with the CLI

Search engines can’t execute JavaScript in the same way browsers do, so you need static, fully translated HTML for indexing. SiteLocaleAI ships a tiny CLI that crawls your site, renders each language, and writes the result to a dist/ folder.

npx localeai prerender \
  --src ./public \
  --out ./dist \
  --langs en,es,de,fr,ja \
  --base-url https://app.yourcompany.com

After the command finishes, deploy the dist/ folder to your CDN. Google will see separate URLs like /es/ and /ja/, each containing the exact same markup as a native page, which dramatically improves international SEO. Detailed CLI options are documented at https://sitelocaleai.com/docs#cli.

6. WordPress Users: No Node.js Required

If your SaaS blog lives on WordPress, install the SiteLocaleAI plugin from the WordPress marketplace. The plugin injects the same script automatically and adds a settings page where you paste your API key and select the target languages. No additional build step is needed.

7. Test, Iterate, and Monitor

1. Manual test – Use Chrome DevTools → Network → Disable JavaScript to verify the fallback text.
2. A/B test – Compare conversion rates between the original English page and the localized versions.
3. Analytics – Add a data-locale-key to your event tracking so you can segment users by language.

8. Going Live

1. Push the updated HTML (or the dist/ folder) to production.
2. Verify that the hreflang tags are present. SiteLocaleAI adds them automatically based on the languages array.
3. Submit the new language URLs to Google Search Console.

---

TL;DR

• Add the CDN script and LocaleAI.init() with your LLM key and language list. n* Mark up translatable strings with data-locale-key.
  
• Use data-price and data-currency for automatic price rounding.
  
• Run localeai prerender to generate SEO‑friendly static pages.

Your B2B SaaS is now ready for global customers without a single line of backend code.

---

Ready to eliminate translation bottlenecks? Try SiteLocaleAI today and launch your product in any language with a single script tag.