Translating SaaS Pricing Pages with SiteLocaleAI
“International growth starts with a localized experience—especially on the pricing page.”
When a SaaS startup decides to go global, the pricing page becomes the most critical conversion funnel. Visitors need to understand the value proposition and see prices in their local currency, rounded to psychologically appealing numbers (e.g., $9.99 → $9.95). SiteLocaleAI gives you a drop‑in, framework‑agnostic JavaScript library that:
- Uses your own LLM API key (Claude, GPT‑4o‑mini, etc.) – no data leaves your infrastructure.
- Localizes prices with per‑currency rounding rules.
- Generates SEO‑ready static HTML via a CLI, so search engines index the translated content.
- Works on any stack—React, Vue, WordPress, Shopify, or plain HTML.
Below is a step‑by‑step guide to translate a typical SaaS pricing page, localize the numbers, and pre‑render the page for search engines.
1. Install the Library
SiteLocaleAI is distributed as an NPM package, but you can also load it directly from a CDN if you prefer a zero‑build setup.
# Using npm (recommended for CI/CD pipelines)
npm install @sitelocaleai/core
Or embed the CDN script in your HTML head:
<script src="https://cdn.sitelocaleai.com/v1.0.0/sitelocaleai.min.js"></script>
Tip: The CDN version works out‑of‑the‑box for WordPress sites that cannot run Node.js.
2. Initialise the Library with Your LLM Key
Create a small bootstrap file (e.g., locale‑init.js). The library expects an object with the target languages, the LLM endpoint, and optional price‑localisation rules.
// locale-init.js
import { SiteLocale } from '@sitelocaleai/core';
// Pull the API key from an environment variable – never hard‑code it.
const LLM_API_KEY = process.env.LLM_API_KEY; // e.g., "sk-..."
const locale = new SiteLocale({
apiKey: LLM_API_KEY,
provider: 'openai', // or 'anthropic', 'gemini', etc.
languages: ['en', 'es', 'de', 'fr', 'ja'], // add more as needed
priceConfig: {
// Psychological rounding per currency
USD: { roundTo: 0.05, symbol: '$' },
EUR: { roundTo: 0.05, symbol: '€' },
JPY: { roundTo: 1, symbol: '¥' },
// default fallback
default: { roundTo: 0.05, symbol: '' }
}
});
// Attach to window for easy access in the page script
window.siteLocale = locale;
If you are using a static site generator, you can import this file in your build pipeline and bundle it with your main JS bundle.
3. Markup Your Pricing Table
SiteLocaleAI works by scanning the DOM for elements that contain translatable text and price data attributes. Add data-i18n to any textual node and data-price to numeric values.
<div id="pricing" class="pricing-table">
<h2 data-i18n="pricing.title">Choose Your Plan</h2>
<div class="plan" data-plan="pro">
<h3 data-i18n="plan.pro.title">Pro</h3>
<p data-i18n="plan.pro.description">All features, unlimited users.</p>
<span class="price" data-price="49" data-currency="USD">$49</span>
<button data-i18n="plan.pro.cta">Get Started</button>
</div>
<!-- repeat for other plans -->
</div>
The data-price attribute holds the base price in USD (or your default currency). SiteLocaleAI will:
1. Convert the amount to the visitor’s locale using the latest FX rates (via the LLM or a separate API).
2. Apply the psychological rounding defined in priceConfig.
3. Replace the displayed text with the formatted string.
4. Trigger Translation on Page Load
Add a small script that tells SiteLocaleAI to translate the page once the DOM is ready.
<script type="module">
import './locale-init.js';
document.addEventListener('DOMContentLoaded', async () => {
// Detect visitor language – fallback to English
const lang = navigator.language.split('-')[0] || 'en';
await window.siteLocale.translatePage('#pricing', lang);
});
</script>
The translatePage method sends the extracted text to your LLM, receives a multilingual version, and injects it back into the DOM. Prices are automatically localized and rounded.
5. SEO‑Friendly Pre‑Rendering with the CLI
Search engines cannot execute JavaScript in the same way browsers do, so you need a static, fully translated HTML snapshot for each language. SiteLocaleAI ships a CLI that crawls your site, runs the translation pipeline, and writes the output to a dist/ folder.
# Install the CLI globally (once)
npm i -g @sitelocaleai/cli
# Run the pre‑render for the languages you support
sitelocaleai prerender \
--url https://app.yourdomain.com/pricing \
--out-dir ./dist/pricing \
--languages en,es,de,fr,ja \
--api-key $LLM_API_KEY
The CLI does the following:
- Fetches the original page.
- Executes the same translation logic as the client‑side library.
- Writes index.html for each language (e.g., en/index.html, es/index.html).
- Updates the <link rel="alternate" hreflang="…"> tags automatically.
You can now point your CDN or static host to the dist/ folder. Search engines will index the translated pages, giving you a massive boost in international SEO.
6. WordPress Integration (No Node Required)
If your pricing page lives on WordPress, simply install the SiteLocaleAI WordPress plugin from the repository. The plugin:
- Enqueues the CDN script.
- Adds a settings page for your LLM API key and price rounding rules.
- Provides a shortcode [sitelocaleai] that wraps any block you want to translate.
[ sitlelocaleai ]
<div class="plan" data-plan="pro">
<h3>Pro</h3>
<p>All features, unlimited users.</p>
<span class="price" data-price="49" data-currency="USD">$49</span>
<button>Get Started</button>
</div>
[/sitelocaleai]
The plugin handles the DOM scanning and translation automatically, so you can keep your existing WordPress workflow.
7. Testing & QA
- Unit test the price conversion – write a small Jest test that calls
siteLocale.formatPrice(49, 'EUR')and expects a rounded value like€41.95(assuming a 0.85 exchange rate). - Crawl the pre‑rendered pages – use
wget --mirroror a SEO crawler to verify that each language version returns a200and contains the correct<html lang="…">attribute. - A/B test the CTA – because the LLM can also adapt copy, experiment with localized call‑to‑action phrasing to improve conversion.
8. Monitoring & Maintenance
- LLM usage – keep an eye on token consumption in your OpenAI/Anthropic dashboard; set a monthly budget to avoid surprises.
- Currency updates – schedule a weekly job that refreshes exchange rates via a free API (e.g., exchangerate.host) and stores them in a JSON file that SiteLocaleAI reads at runtime.
- Content drift – whenever you add new features, run the CLI again to generate fresh translations.
9. Wrap‑Up
By leveraging SiteLocaleAI’s self‑hosted LLM library, you can:
- Offer a fully localized pricing experience in minutes.
- Keep pricing psychologically appealing per market.
- Ensure search engines index every language version, driving organic traffic worldwide.
Ready to go global? Try SiteLocaleAI today and see how fast you can launch a multilingual pricing page that converts.