Translate Pricing Pages with SiteLocaleAI: SaaS Global Guide
International growth for SaaS startups often hinges on clear, localized pricing. With SiteLocaleAI you can let a self‑hosted LLM translate your pricing page, apply psychological rounding per currency, and serve pre‑rendered HTML to search engines for SEO.
1. Install the library
npm install @sitelocaleai/translator
If you prefer a CDN, add the script tag to your <head>:
<script src="https://cdn.sitelocaleai.com/translator.min.js"></script>
Note: No Node.js is required for WordPress or Shopify; the library works in any browser environment.
2. Configure with your LLM API key
Create a sitelocale.config.js file at the project root:
export const localeConfig = {
apiKey: "YOUR_OPENAI_OR_CLAUDE_KEY",
model: "gpt-4o-mini", // or "claude-3-haiku-20240307"
defaultLocale: "en",
supportedLocales: ["en", "es", "de", "fr", "ja"],
priceRounding: {
// Psychological rounding per currency
USD: 0.99,
EUR: 0.95,
GBP: 0.99,
JPY: 0,
},
};
The library reads this file automatically when you call initLocale().
import { initLocale } from "@sitelocaleai/translator";
import { localeConfig } from "./sitelocale.config.js";
initLocale(localeConfig);
3. Mark up your pricing page
Wrap every translatable string in a data-locale attribute. The library will replace the inner text at runtime.
<h1 data-locale="pricing.title">Our Plans</h1>
<div class="plan" data-locale="plan.indie.title">
<h2>Indie</h2>
<p class="price" data-locale="plan.indie.price">$5 / month</p>
<ul>
<li data-locale="plan.indie.feature1">Basic analytics</li>
<li data-locale="plan.indie.feature2">Email support</li>
</ul>
</div>
For dynamic values like prices, use the helper:
import { formatPrice } from "@sitelocaleai/translator";
const price = formatPrice(5, "USD"); // → "$4.99"
ocument.querySelector('[data-locale="plan.indie.price"]').textContent = price;
4. Enable SEO pre‑rendering
Search engines struggle with client‑side translation. SiteLocaleAI’s CLI can pre‑render each locale into static HTML files.
npx sitelocale prerender --locales es,de,fr,ja --output ./public/localized
The command fetches translations from your LLM, applies price rounding, and writes index.es.html, index.de.html, etc. Add these files to your sitemap:
<url>
<loc>https://example.com/es/</loc>
<xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/"/>
</urlnn```
Read more about the CLI in the [docs](https://sitelocaleai.com/docs/seo-prerender).
---
## 5. Deploy to a static host or CDN
Because the pages are fully rendered, you can serve them from any static host (Netlify, Vercel, Cloudflare Pages). The JavaScript bundle only handles language switching for users who manually change the locale.
```js
import { switchLocale } from "@sitelocaleai/translator";
document.getElementById("lang-select").addEventListener("change", (e) => {
switchLocale(e.target.value);
});
6. Test the experience
- Open
https://example.com/– you see the English version. - Change the locale selector to Deutsch – the price updates to “€4.95 / Monat”.
- Verify that
https://example.com/de/returns the translated HTML without JavaScript execution (view source).
7. Monitor SEO impact
After a few weeks, check Google Search Console for impressions per locale. You should see a lift in organic traffic for the new languages, especially for price‑related queries.
Why SiteLocaleAI works for SaaS pricing
- Self‑hosted – you keep control of the LLM API key, no third‑party data leakage.
- Psychological rounding – the library automatically adjusts prices (e.g., $4.99 instead of $5) to match local buying habits.
- Framework‑agnostic – works with React, Vue, WordPress, Shopify, or plain HTML.
- SEO‑ready – CLI pre‑renders pages so crawlers index the translated content.
Ready to go global? Try SiteLocaleAI today and see how a few lines of code can unlock new markets.