How a B2B SaaS Can Add 5 Languages with One Script Tag
International expansion is a top priority for SaaS companies, but the technical overhead of multilingual sites can be a blocker. SiteLocaleAI removes that friction with a single, framework‑agnostic JavaScript library that you host yourself. In this guide we’ll walk through adding Spanish, French, German, Japanese, and Chinese to a typical SaaS landing page using just one script tag, while also boosting international SEO and localizing prices.
1. Why a Single Script Tag Works
- Zero build‑time changes – No need to re‑compile React, Vue, or WordPress assets.
- Self‑hosted LLM – You provide your own Claude, GPT‑4o‑mini, or other API keys, keeping data private.
- SEO‑ready – A CLI pre‑renders translated pages for crawlers, so Google indexes the full content.
- Psychological price rounding – Prices are automatically adjusted per currency (e.g., €9.99 → €9.95) to improve conversion.
All of this is controlled through a tiny JSON configuration that lives on the page.
2. Add the Script Tag
Place the following two <script> blocks right before the closing </body> tag of your HTML. The first loads the library from the CDN; the second defines your configuration.
<!-- Load SiteLocaleAI library -->
<script src="https://cdn.sitelocaleai.com/v1/locale.js"></script>
<!-- Configuration – replace placeholders with your own values -->
<script>
window.localeConfig = {
apiKey: "YOUR_LLM_API_KEY",
// Languages you want to support (ISO‑639‑1 codes)
languages: ["es", "fr", "de", "ja", "zh"],
defaultLang: "en",
// Enable price rounding per currency
priceRounding: true,
// Let the CLI pre‑render pages for SEO
seoPreRender: true,
// Optional: custom domain for SEO URLs
seoBaseUrl: "https://app.yourcompany.com"
};
</script>
That’s it—no Node.js, no Webpack, no additional plugins. The library automatically scans the DOM, translates visible text, and rewrites price elements that carry the data-price attribute.
3. Markup Your Prices for Localization
SiteLocaleAI looks for a data-price attribute containing the raw numeric value in USD. It then converts the amount to the visitor’s currency and applies psychological rounding.
<p>Standard plan: <span data-price="49.99">$49.99</span> per month</p>
When a French visitor lands on the page, the snippet becomes:
<p>Standard plan: <span data-price="49.99">€42,95</span> par mois</p>
The conversion uses real‑time exchange rates from the LLM’s toolset, and the rounding logic follows best‑in‑class e‑commerce practices.
4. SEO Pre‑Rendering with the CLI
Search engines can’t execute JavaScript in the same way browsers do, which can leave your translated pages invisible to crawlers. SiteLocaleAI ships a lightweight CLI that pre‑renders each language version as static HTML files.
# Install the CLI globally (requires Node only for the build step only)
npm i -g sitelocaleai-cli
# Run the pre‑render for all configured languages
sitelocaleai-cli pre-render --config ./locale-config.json --output ./public
The CLI reads the same localeConfig object (you can export it to a JSON file) and produces a folder structure like:
public/
├─ index.html # English (default)
├─ es/index.html # Spanish
├─ fr/index.html # French
├─ de/index.html # German
├─ ja/index.html # Japanese
└─ zh/index.html # Chinese
Deploy the public folder to your CDN or static‑site host. Each language gets its own URL (/es/, /fr/, …) which Google indexes as separate pages, dramatically improving international search visibility.
5. Integrating with Popular Frameworks
Because the library works on plain DOM, you can use it inside React, Vue, Angular, or even a static HTML site without any extra wrappers. Here’s a quick React example that ensures the script runs after the component mounts.
import { useEffect } from "react";
export default function App() {
useEffect(() => {
// The script tag is already on the page; just call init when ready
if (window.initLocale) {
window.initLocale(window.localeConfig);
}
}, []);
return (
<div>
<h1>Welcome to Acme SaaS</h1>
<p data-price="99.99">$99.99 per year</p>
</div>
);
}
For Vue, you can place the same window.initLocale call inside the mounted() lifecycle hook. The key point is no build‑time translation files—everything happens at runtime.
6. WordPress Plugin (No Node Required)
If your SaaS marketing site runs on WordPress, SiteLocaleAI offers a plugin that injects the script automatically. After installing the plugin, go to Settings → SiteLocaleAI and paste your LLM API key and language list. The plugin also adds a shortcode [locale_price] for price localization.
[locale_price amount="49.99"]
The plugin handles the same SEO pre‑rendering via a WP‑CLI command:
wp sitelocaleai pre_render --output ./public
7. Monitoring and Updating Translations
Because translations are generated on‑the‑fly by your LLM, you can fine‑tune tone or terminology by adding a prompt template in the configuration:
window.localeConfig.promptTemplate = `Translate the following UI text into {lang} using a professional SaaS tone. Keep all technical terms unchanged.`;
Whenever you update the template, run the CLI again to regenerate static pages. The library also caches translations in localStorage for repeat visitors, reducing API calls and latency.
8. Internal Resources
- Detailed setup guide: https://sitelocaleai.com/docs/quick-start
- SEO pre‑rendering documentation: https://sitelocaleai.com/docs/seo-pre-render
9. Wrap‑Up
Adding five languages to a B2B SaaS site no longer requires a full i18n engineering team. With a single script tag, you get:
- Instant multilingual UI powered by your own LLM API keys.
- Psychologically rounded pricing that feels native to each market.
- SEO‑friendly static pages that rank in local search results.
- Framework‑agnostic integration – works with React, Vue, WordPress, Shopify, and more.
Ready to go global without the overhead? Try SiteLocaleAI today and see how a single line of code can unlock new markets.