Tutorial

Translate SaaS Pricing Pages with SiteLocaleAI: Step‑by‑Step

Published September 21, 2026

Translate SaaS Pricing Pages with SiteLocaleAI: Step‑by‑Step

Translate SaaS Pricing Pages with SiteLocaleAI: Step‑by‑Step

Published on 2026‑09‑21 • 8 min read

International growth for a SaaS startup often hinges on a single thing: price clarity. Visitors need to see their local currency, a familiar price format, and a seamless checkout flow. SiteLocaleAI lets you achieve this with a few lines of JavaScript, your own LLM API keys, and a CLI that pre‑renders SEO‑friendly pages.

1️⃣ Prerequisites

Item Reason
Node ≥ 18 Required for the CLI and build scripts
LMM API key (Claude, GPT‑4o‑mini, etc.) SiteLocaleAI never stores data; it forwards prompts to your key
Existing pricing page (React, Vue, WordPress, Shopify, etc.) The library works framework‑agnostic
Domain with HTTPS Required for the fetch calls that load translation bundles

If you’re on WordPress, you can skip the Node step – the official plugin handles everything without a server.

2️⃣ Install the Library

# Using npm (works for any front‑end build system)
npm i @sitelocaleai/js

Or, for a pure‑HTML site, just add the CDN script:

<script src="https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js"></script>

3️⃣ Configure the Global Settings

Create a tiny sitelocale.config.js file at the root of your project. This file tells SiteLocaleAI which LLM to use, the target currencies, and the rounding rules.

// sitelocale.config.js
export const localeConfig = {
  // Your LLM endpoint – keep the key secret on the server side
  llm: {
    provider: "openai",
    model: "gpt-4o-mini",
    apiKey: process.env.OPENAI_API_KEY,
  },
  // Currencies you support on the pricing page
  currencies: [
    { code: "USD", locale: "en-US", round: 0.99 },
    { code: "EUR", locale: "de-DE", round: 0.95 },
    { code: "GBP", locale: "en-GB", round: 0.99 },
    { code: "JPY", locale: "ja-JP", round: 0 },
  ],
  // Optional: custom prompt for price phrasing
  pricePrompt: `Translate the following price into {currency} using psychological rounding (e.g., 9.99 instead of 10.00). Keep the original tone of the page.`,
};

Tip: Store OPENAI_API_KEY in a server‑side environment variable and expose a thin proxy endpoint that forwards the request. This way the key never reaches the browser.

4️⃣ Drop‑In the Translator on Your Pricing Component

Below is a React example, but the same SiteLocaleAI.translate() call works in Vue, Svelte, or plain JavaScript.

// PricingTable.jsx
import React, { useEffect, useState } from "react";
import { SiteLocaleAI } from "@sitelocaleai/js";
import { localeConfig } from "../sitelocale.config";

export default function PricingTable() {
  const [prices, setPrices] = useState(null);

  useEffect(() => {
    async function fetchTranslations() {
      const basePrices = {
        basic: 9.99,
        pro: 29.99,
        enterprise: 99.00,
      };

      const translations = await SiteLocaleAI.translate(
        basePrices,
        localeConfig
      );
      setPrices(translations);
    }
    fetchTranslations();
  }, []);

  if (!prices) return <p>Loading…</p>;

  return (
    <table className="pricing">
      <thead>
        <tr>
          <th>Plan</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        {Object.entries(prices).map(([plan, price]) => (
          <tr key={plan}>
            <td>{plan.charAt(0).toUpperCase() + plan.slice(1)}</td>
            <td>{price}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

What happens under the hood?
1. SiteLocaleAI.translate() bundles the basePrices object.
2. It sends a single prompt to your LLM, asking for a localized string per currency.
3. The response is cached in localStorage for 24 h, so repeat visitors see instant translations.

5️⃣ Price Localization with Psychological Rounding

The round field in localeConfig tells SiteLocaleAI how to adjust the last cent. For example, a USD price of 10.00 becomes 9.99. The library applies the rule after the LLM has generated the textual representation, ensuring the number you display matches the rounded value.

// Inside SiteLocaleAI internals (simplified)
function applyRounding(value, round) {
  if (round === 0) return Math.round(value);
  const factor = 1 / round;
  return Math.floor(value * factor) / factor;
}

You can override the rounding per currency by passing a custom pricePrompt that includes the rounding logic.

6️⃣ SEO‑Friendly Pre‑Rendering with the CLI

Search engines need a fully rendered HTML snapshot. SiteLocaleAI ships a CLI that crawls your routes, fetches translations, and writes static HTML files.

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

# Run the pre‑render for the /pricing route
sitelocale prerender --route /pricing --output ./static/pricing.html

The generated pricing.html contains the translated price table for all configured currencies, wrapped in <link rel="alternate" hreflang="..."> tags. Google will index each locale separately, boosting international SEO.

Reference: See the full CLI docs at https://sitelocaleai.com/docs/seo-pre-rendering.

7️⃣ Deploying the Static HTML

If you host on a CDN (Vercel, Netlify, Cloudflare Pages), simply copy the static/ folder to your build output. The CDN will serve the correct version based on the Accept-Language header.

# Example for Netlify
netlify deploy --dir=static --prod

8️⃣ WordPress Users – One‑Click Plugin

For WordPress sites, install the SiteLocaleAI plugin from the admin dashboard. The plugin:
- Adds a settings page to paste your LLM API key.
- Auto‑detects price elements marked with .price class.
- Generates the SEO pre‑rendered pages on every publish.

No Node.js or build step is required.

9️⃣ Testing & QA

  1. Locale Switcher – Add a tiny dropdown that sets navigator.language and reloads the page. Verify the price format matches the target locale (e.g., € 29,95 for German).
  2. Lighthouse – Run a Lighthouse audit. The “International SEO” section should show a score of 100 % when the <link rel="alternate"> tags are present.
  3. A/B Test – Compare conversion rates between the default USD page and a localized version. Psychological rounding often lifts CTR by 3‑5 %.

🔚 Wrap‑Up

By following these eight steps you can:
- Keep your codebase untouched (drop‑in library).
- Leverage your own LLM API keys for data privacy.
- Offer psychologically rounded prices per currency.
- Serve fully indexed, SEO‑friendly pages to global audiences.

Ready to go global? Try SiteLocaleAI today and watch your international conversions climb.

For deeper technical details, visit the official documentation:
- https://sitelocaleai.com/docs/quick-start
- https://sitelocaleai.com/docs/seo-pre-rendering

Back to blog