How to Translate Your SaaS Pricing Page with SiteLocaleAI

International expansion for a SaaS startup often begins with a single, high‑impact page: the pricing table. Visitors need to understand the value proposition and see prices in their local currency, rounded in a way that feels natural. SiteLocaleAI makes this painless by letting you drop in a JavaScript library, run a CLI for SEO pre‑rendering, and keep everything self‑hosted on your own LLM API keys.

---

1. Install the library (framework‑agnostic)

SiteLocaleAI works with any front‑end framework—or none at all. In a typical React, Vue, or plain HTML project, you only need to add the script tag and initialise the client.

<!-- index.html -->
<script src="https://cdn.sitelocaleai.com/v1/site-locale-ai.min.js"></script>
<script>
  // Initialise with your LLM provider (Claude, GPT‑4o‑mini, etc.)
  const localeAI = new SiteLocaleAI({
    apiKey: 'YOUR_LLM_API_KEY',
    provider: 'openai', // or 'anthropic', 'groq', ...
    defaultLang: 'en' // fallback language
  });
</script>

If you prefer a module bundler, the same initialization works with npm:

npm install @sitelocaleai/client

import SiteLocaleAI from '@sitelocaleai/client';
const localeAI = new SiteLocaleAI({ apiKey: process.env.LLM_KEY, provider: 'openai' });

---

2. Mark up your pricing table for translation

Add a data-locale attribute to any element that should be translated. For price values, also specify the original currency and the target rounding strategy.

<div class="pricing">
  <h2 data-locale="title">Our Plans</h2>
  <ul>
    <li>
      <h3 data-locale="plan_name">Indie</h3>
      <p data-locale="price" data-currency="USD" data-round="psychological">$5</p>
      <p data-locale="desc">Perfect for solo founders.</p>
    </li>
    <li>
      <h3 data-locale="plan_name">Starter</h3>
      <p data-locale="price" data-currency="USD" data-round="psychological">$49</p>
      <p data-locale="desc">Small teams get more features.</p>
    </li>
    <!-- more plans -->
  </ul>
</div>

The data-round="psychological" flag tells SiteLocaleAI to apply the classic pricing trick of ending numbers in .99, .95, or .00 depending on the target market.

---

3. Translate on the fly (client‑side)

When a visitor lands on the page, SiteLocaleAI detects their locale (via navigator.language or a URL parameter) and calls the LLM to translate the marked strings. The library also rewrites the price using the appropriate exchange rate and rounding.

// Run after the DOM is ready
window.addEventListener('DOMContentLoaded', async () => {
  const userLang = localeAI.detectUserLang(); // e.g. 'fr', 'de', 'ja'
  await localeAI.translatePage({ lang: userLang });
});

All translations happen in the browser, but the heavy LLM work is performed by your own API key, keeping data private and cost predictable.

---

4. SEO‑friendly pre‑rendering with the CLI

Search engines cannot execute JavaScript reliably for every translation. SiteLocaleAI ships a CLI that pre‑renders static HTML for each target language, letting crawlers index the fully translated content.

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

# Generate pre‑rendered pages for French and German
localeai prerender \
  --src ./public/index.html \
  --out ./dist \
  --langs fr,de \
  --api-key $LMM_API 
nn
```` reads the source HTML, injects the translated strings, and writes language‑specific files (`index.fr.html`, `index.de.html`). You can then configure your server or CDN to serve the correct file based on the `Accept‑Language` header or a URL prefix (`/fr/`, `/de/`).

---

## 5. WordPress integration (no Node required)

If your pricing page lives in WordPress, the SiteLocaleAI plugin handles everything without a build step.

1. Install the **SiteLocaleAI** plugin from the WordPress marketplace.
2. In the plugin settings, paste your LLM API key and choose the default language.
3. Edit the pricing page and wrap translatable text in the `[locale]` shortcode:

```php
[locale]Our Plans[/locale]
[locale data-currency="USD" data-round="psychological"]$5[/locale]

1. Activate the SEO Pre‑Render option. The plugin will generate static HTML files for each language during the publishing workflow, which are then served to crawlers.

---

6. Test and iterate

After deployment, verify:

• Language detection – use a VPN or Chrome dev tools to change the Accept‑Language header.
• Price rounding – check that €4.99 appears for French users, ¥5,500 for Japanese users, etc.
• SEO – run curl -L https://yourdomain.com/fr/ and confirm the HTML contains the translated markup (no placeholders).

If you need fine‑grained control, SiteLocaleAI supports custom prompts. For example, to keep brand voice consistent:

await localeAI.translatePage({
  lang: 'es',
  prompt: 'Translate the following SaaS pricing copy into Spanish, preserving a friendly yet professional tone.'
});

---

7. Pricing plans that fit your growth stage

Plan	Monthly Cost	Ideal For
Indie	$5	Solo founders, early MVP
Starter	$49	Small teams, first paid customers
Growth	$99	Scaling SaaS, multi‑currency support
Enterprise	$249	High‑traffic global brands, dedicated support

Choose the plan that matches your traffic and number of languages. All plans include unlimited API calls up to your LLM quota.

---

8. Next steps

1. Add the library to your existing pricing page.
2. Configure the CLI for SEO pre‑rendering of your target markets.
3. Monitor translation quality and conversion rates per locale.

Ready to go global? Try SiteLocaleAI today and see how a few lines of code can open new revenue streams.

---

Start your free trial →

---

For deeper technical details, see the official documentation:
- Getting Started Guide
- CLI Reference