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

International growth is no longer a distant goal for SaaS founders – it’s a prerequisite. SiteLocaleAI makes it possible to launch a fully translated, price‑localized, SEO‑ready version of your product with just one line of JavaScript. In this tutorial we’ll walk through adding English, Spanish, French, German, and Japanese to a typical SaaS dashboard.

1. Install the Library

The library is framework‑agnostic, so you can drop it into any HTML page. Add the following script tag right before the closing </body> tag:

<script src="https://cdn.sitelocaleai.com/v1/site-locale.min.js"></script>
<script>
  // Initialize SiteLocaleAI
  SiteLocale.init({
    apiKey: "YOUR_LLM_API_KEY",   // e.g. Claude, GPT‑4o‑mini
    defaultLang: "en",
    supportedLangs: ["en","es","fr","de","ja"],
    priceConfig: {
      // Psychological rounding per currency
      USD: { round: 0.99 },
      EUR: { round: 0.95 },
      JPY: { round: 0 }
    },
    // Optional: custom translation prompt
    translatePrompt: "Translate UI text, keep placeholders intact."
  });
</script>

All you need is an API key for the LLM you want to use. Because the request is made from your own server (or a serverless function you control), you keep the key private and stay compliant with data‑privacy regulations.

2. Mark Up Your UI

SiteLocaleAI scans the DOM for elements that have a data-i18n attribute. Replace static strings with a key and provide the default English text:

<h1 data-i18n="dashboard.title">Welcome to Acme Analytics</h1>
<p data-i18n="pricing.note">All prices are shown in your local currency.</p>
<span data-i18n="price.monthly">$29.99 / month</span>

The library will automatically replace the inner text with the translated version once the LLM returns the result. Placeholders like ${plan} or {count} are preserved, so you don’t have to worry about broken strings.

3. Localize Prices

The priceConfig object tells SiteLocaleAI how to round numbers for each currency. When the script detects a price element, it converts the amount using the latest exchange rates (fetched from a free API) and then applies the psychological rounding:

// Example: 29.99 USD → 27.95 EUR (rounded to .95)
SiteLocale.formatPrice(29.99, "USD", "EUR"); // → "€27.95"

You can also call the helper manually for dynamic pricing components:

const priceEl = document.querySelector('[data-i18n="price.monthly"]');
const usdPrice = 49.00;
priceEl.textContent = SiteLocale.formatPrice(usdPrice, "USD", SiteLocale.currentLang);

4. SEO Pre‑Rendering with the CLI

Search engines still struggle with client‑side translations. SiteLocaleAI ships a CLI that pre‑renders each language version as static HTML, which you can serve from your CDN or host on Vercel/Netlify.

npx site-locale-cli prerender \
  --url https://app.acme-analytics.com \
  --langs en,es,fr,de,ja \
  --output ./dist/i18n

The CLI crawls your site, runs the same translation pipeline on the server, and writes a folder per language (/en, /es, …). Deploy the generated folder alongside your normal build and add a link[rel="alternate"] header for Google:

<link rel="alternate" hreflang="es" href="https://app.acme-analytics.com/es/">
<link rel="alternate" hreflang="fr" href="https://app.acme-analytics.com/fr/">

Now every language gets its own indexable URL, boosting international SEO.

5. WordPress Option (No Node Required)

If your SaaS runs on a WordPress front‑end, you can skip the manual script injection and use the official plugin. Install it from the WordPress marketplace, paste your LLM API key, and configure the same language list in the admin panel. The plugin automatically adds the script tag to the footer and creates the data-i18n attributes for you.

6. Testing & Quality Assurance

1. Smoke test – Open the site in incognito, append ?lang=es to the URL, and verify that all UI strings and prices appear in Spanish.
2. Automated snapshot – Use Cypress or Playwright to capture DOM snapshots for each language and compare against a baseline.
3. Performance check – Because the translation happens on the server, the client only loads the final text. Measure the Time‑to‑First‑Contentful‑Paint (FCP) before and after adding SiteLocaleAI; you should see less than a 200 ms increase.

7. Going Live

Deploy the updated front‑end, push the pre‑rendered static folders to your CDN, and update your sitemap to include the new language URLs. Submit the sitemap in Google Search Console and monitor the “International Targeting” report for any hreflang errors.

---

Recap

• One script tag + SiteLocale.init → instant multilingual UI.
• data-i18n attributes keep your code clean and framework‑agnostic.
• Built‑in price rounding respects local purchasing psychology.
• CLI pre‑rendering guarantees full SEO indexing.
• WordPress plugin removes the need for Node.js.

Ready to go global? Try SiteLocaleAI today and see how quickly you can launch a multilingual SaaS with zero code churn.