Add 5 Languages to Your B2B SaaS with a Single Script Tag
Published on SiteLocaleAI.com
International growth is a top priority for B2B SaaS companies, but the engineering effort required to localize UI, pricing, and SEO can be daunting. SiteLocaleAI eliminates that friction with a drop‑in JavaScript library that works with any framework (React, Vue, Angular, plain HTML) and self‑hosted LLM API keys. In this tutorial we’ll walk through adding five languages—English, Spanish, German, French, and Japanese—to a SaaS product using one script tag and a few configuration lines.
1. Why SiteLocaleAI?
| Feature | Benefit |
|---|---|
| Framework‑agnostic | No need to rewrite components; works with WordPress, Shopify, or a custom React app. |
| Self‑hosted LLM | You keep control of your API keys (Claude, GPT‑4o‑mini, etc.) and data privacy. |
| Price localization | Automatic psychological rounding per currency (e.g., $9.99 → €8.99). |
| SEO pre‑rendering CLI | Generates static, translated HTML for crawlers, boosting organic traffic. |
| WordPress plugin | Zero‑Node.js required for non‑dev teams. |
All of these features are accessible via a single script tag, making the implementation virtually invisible to your existing code.
2. Prerequisites
- API keys for the LLMs you plan to use (e.g.,
OPENAI_API_KEY). - A Node.js environment for the optional CLI (for SEO pre‑rendering).
- Access to your site’s HTML template (or a place to inject a script tag globally).
Tip: If you’re on WordPress, the SiteLocaleAI plugin will add the script automatically—skip to step 5.
3. Install the library (optional npm for bundlers)
If you bundle assets with Webpack, Vite, or similar, you can install the package locally:
npm i @sitelocaleai/js
You can also load the library from a CDN, which is the approach we’ll use for the single‑script‑tag method.
4. Add the script tag to your global HTML
Place the following snippet just before the closing </body> tag of your main layout (e.g., index.html, base.html, or your CMS theme footer).
<!-- SiteLocaleAI – Global Script -->
<script src="https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js"></script>
<script>
// Configuration object – adjust to your needs
window.SiteLocaleAI.init({
// Your LLM API key (kept secret on the server side via a proxy)
apiKey: 'YOUR_LLM_API_KEY',
// Languages you want to support (ISO‑639‑1 codes)
locales: ['en', 'es', 'de', 'fr', 'ja'],
// Default locale – usually your current language
defaultLocale: 'en',
// Enable price localization with psychological rounding
priceLocalization: {
enabled: true,
rounding: 'psychological' // e.g., $9.99 → €8.99
},
// Optional: custom domain for SEO‑friendly URLs
urlPattern: '/{locale}/{path}',
// Optional: callback when translation is ready (useful for analytics)
onReady: function(locale) {
console.log('Locale ready:', locale);
}
});
</script>
What happens under the hood?
- The script detects the visitor’s Accept‑Language header and loads the matching translation via your LLM API.
- Prices are converted using real‑time exchange rates and rounded psychologically.
- URLs are rewritten to the pattern you defined, so /dashboard becomes /es/dashboard for Spanish users.
5. Verify the integration
Open your SaaS in an incognito window and append ?locale=es to the URL. You should see the entire UI, including buttons, tooltips, and price tags, rendered in Spanish. Repeat for de, fr, and ja.
If you need to force a locale for testing, use the global helper:
SiteLocaleAI.setLocale('de'); // Switches UI to German instantly
6. SEO Pre‑rendering (Optional but highly recommended)
Search engines struggle with client‑side rendered content. SiteLocaleAI ships a CLI that crawls your site, fetches translations, and writes static HTML files for each locale. Run it once during your CI/CD pipeline.
n install -g @sitelocaleai/cli
sitelocaleai prerender \
--base-url https://app.your-saas.com \
--locales en,es,de,fr,ja \
--output ./static
The CLI will produce a folder structure like:
static/
├─ en/
│ └─ index.html
├─ es/
│ └─ index.html
├─ de/
│ └─ index.html
├─ fr/
│ └─ index.html
└─ ja/
└─ index.html
Deploy the static folder to your CDN or static‑hosting service. Search engines will now index each language version, dramatically improving international organic traffic.
Read more about the CLI in the official docs: https://sitelocaleai.com/docs/cli
7. WordPress users – No Node.js needed
If your SaaS is built on WordPress, install the SiteLocaleAI plugin from the marketplace. After activation, go to Settings → SiteLocaleAI and paste your LLM API key. The plugin automatically injects the script tag and creates a /locale/ endpoint for SEO pre‑rendering. No additional code required.
8. Monitoring & Analytics
SiteLocaleAI emits events you can hook into for analytics platforms (Google Analytics, Mixpanel, etc.).
SiteLocaleAI.on('translationComplete', (data) => {
// data.locale, data.duration, data.success
gtag('event', 'translation_complete', { locale: data.locale });
});
Track conversion rates per locale to understand which markets are most receptive.
9. Scaling to more languages
When you’re ready to add more locales, simply extend the locales array and re‑run the SEO CLI. The library will fetch translations on‑the‑fly for any new language, so you can roll out additional markets without code changes.
10. Wrap‑up
With one script tag, you’ve turned a single‑language SaaS into a multilingual, SEO‑optimized product ready for global customers. The benefits are immediate:
- Zero code churn – no component rewrites.
- Full control over LLM providers and data privacy.
- Accurate price presentation that respects local purchasing psychology.
- Higher organic rankings thanks to static, pre‑rendered pages for each locale.
Ready to go live? Grab your API key, drop the script, and watch your international traffic soar.
Try SiteLocaleAI today – sign up for the Indie plan at $5/month and start translating instantly. Visit the docs for deeper integration details.