Tutorial

How to Translate Your SaaS Pricing Page with SiteLocaleAI

Published June 10, 2026

How to Translate Your SaaS Pricing Page with SiteLocaleAI

How a Translate Your SaaS Pricing Page with SiteLocaleAI

Published on SiteLocaleAI Blog

Introduction

Going global is no longer a luxury for SaaS startups—it’s a necessity. The biggest hurdle is often the pricing page: you need accurate translations, localized currency formatting, and SEO‑friendly URLs. SiteLocaleAI solves all three with a single, framework‑agnostic JavaScript library that runs on your own LLM API keys.

In this tutorial we’ll walk through a real‑world scenario:

  1. Add the SiteLocaleAI library to a React‑based pricing page.
  2. Configure LLM context so the model knows your product tiers.
  3. Localize prices with psychological rounding per currency.
  4. Pre‑render translated pages for search‑engine indexing using the CLI.
  5. Deploy on WordPress with the zero‑Node plugin (optional).

By the end you’ll have a fully translated, SEO‑optimized pricing page that adapts to any market you target.

1. Install the Library

SiteLocaleAI is a single‑file script you can drop into any HTML page. For a React project, add it to public/index.html before your bundled script:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My SaaS – Pricing</title>
  <!-- SiteLocaleAI core -->
  <script src="https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script src="/static/js/bundle.js"></script>
</body>
</html>

Tip: The library is framework‑agnostic, so the same script works for Vue, Angular, plain HTML, Shopify, etc.

2. Initialise with Your LLM API Key

SiteLocaleAI does not provide an LLM; you supply your own API key (Claude, GPT‑4o‑mini, etc.). Initialise the client in a separate file, e.g., src/locale.js:

import { SiteLocaleAI } from 'sitelocaleai';

// Load your key from an environment variable (never commit it)
const LLM_API_KEY = process.env.REACT_APP_LLM_API_KEY;

// Create a singleton instance
export const locale = new SiteLocaleAI({
  apiKey: LLM_API_KEY,
  provider: 'openai', // or 'anthropic', 'google', etc.
  // Optional: set a default language fallback
  fallbackLang: 'en',
});

Now you can call locale.translate() anywhere in your app.

3. Provide Context for Accurate Pricing Translations

LLMs work best when they understand the product tier names and feature lists. Create a JSON schema that describes each plan and pass it as context when translating.

const pricingContext = {
  plans: [
    {
      name: 'Starter',
      features: ['10 GB storage', 'Basic support'],
      priceUSD: 9.99,
    },
    {
      name: 'Growth',
      features: ['100 GB storage', 'Priority support'],
      priceUSD: 29.99,
    },
    {
      name: 'Enterprise',
      features: ['Unlimited storage', 'Dedicated manager'],
      priceUSD: 99.99,
    },
  ],
};

When you request a translation, include this context so the model can keep the tier names intact and apply appropriate rounding for each target currency.

4. Localise Prices with Psychological Rounding

SiteLocaleAI ships a helper locale.localizePrice(amount, currency) that applies psychological rounding (e.g., €9.99 → €9.95, ¥1,200 → ¥1,199). Here’s how you can render a price card:

import React from 'react';
import { locale } from './locale';

function PriceCard({ plan, targetLang, currency }) {
  const localized = locale.localizePrice(plan.priceUSD, currency);
  const priceStr = `${localized.symbol}${localized.amount}`;

  const translation = locale.translate(
    `Plan: ${plan.name}\nFeatures: ${plan.features.join(', ')}\nPrice: ${priceStr}`,
    { targetLang, context: pricingContext }
  );

  return (
    <div className="price-card">
      <h3>{translation.name}</h3>
      <p>{translation.features}</p>
      <strong>{translation.price}</strong>
    </div>
  );
}

The translate call returns an object with the same keys (name, features, price) but in the target language. The library automatically caches translations per language to avoid repeated LLM calls.

5. SEO‑Friendly Pre‑Rendering with the CLI

Search engines still struggle with client‑side rendering. SiteLocaleAI’s CLI can pre‑render every language version of your pricing page, producing static HTML files that you can serve via your CDN.

# Install the CLI globally
npm i -g @sitelocaleai/cli

# Generate pre‑rendered pages for French, German, and Japanese
sitelocaleai prerender \
  --src ./public/pricing.html \
  --out ./dist/pricing \
  --langs fr,de,ja \
  --api-key $LLM_API_KEY

The command creates:

  • dist/pricing/fr/index.html
  • dist/pricing/de/index.html
  • dist/pricing/ja/index.html

Each file contains the fully translated content and the localized price markup, so Google can index them directly.

Best practice: Add a <link rel="alternate" hreflang="..."> block in your <head> to point crawlers to the language‑specific URLs.

6. WordPress Deployment (Zero‑Node Option)

If your SaaS site runs on WordPress, you can skip the Node build entirely. Install the SiteLocaleAI WordPress plugin from the repo, then add your LLM API key in the settings page. The plugin automatically injects the JS library and creates a shortcode for price tables:

[site_localeai_pricing plan="growth" currency="EUR"]

The shortcode renders a localized price card and registers the SEO‑friendly URLs for you.

7. Testing & Validation

  1. Visual check – Open http://localhost:3000/pricing?lang=de and verify the translation and price rounding.
  2. SEO audit – Use Google Search Console’s URL Inspection tool on the pre‑rendered /de/ page. Ensure the content is fully rendered in the source HTML.
  3. Performance – Because the translation happens at build time, the runtime page loads in < 200 ms on a typical 3G connection.

8. Going Live

Deploy the static dist/ folder to your CDN (Vercel, Netlify, Cloudflare Pages, etc.). Update your DNS to point language language‑specific subfolders (/fr/, /de/, /ja/).

Your pricing page is now:

  • Translated with LLM context awareness.
  • Price‑localized using psychological rounding.
  • SEO‑ready thanks to static pre‑rendering.
  • Self‑hosted, keeping your API keys and data private.

9. Next Steps

  • Add currency‑specific tax calculations using the same locale.localizePrice helper.
  • Expand to regional promotions by passing additional context (e.g., “Black Friday discount”).
  • Monitor conversion metrics per locale to iterate on copy and pricing.

Conclusion

With SiteLocaleAI you can turn a single pricing page into a multilingual, SEO‑optimized conversion engine in minutes. The library’s framework‑agnostic design, self‑hosted LLM integration, and powerful CLI make it the perfect fit for SaaS startups aiming to scale globally.

Ready to launch your global pricing page?

Try SiteLocaleAI today and start translating with confidence.

For more details, see our Quick‑Start Guide and the SEO Pre‑Render Documentation.

Back to blog