Works With Any Website or Framework

SiteLocaleAI translates at the DOM level. No plugins, no framework adapters, no build step. If it renders HTML, we can translate it.

React / Next.js

Works with client-side React, server-side rendering (SSR), and static site generation (SSG). No React-specific wrapper needed — the JS library operates on the rendered DOM after React hydrates. 

// next.js — app/layout.tsx or pages/_app.js
import Script from 'next/script'

export default function App({ Component }) {
  return (
    <>
      <head>
        <meta name="sitelocaleai:url"
          content="https://your-sdk.example.com" />
        <meta name="sitelocaleai:locales"
          content="en,de,fr,es,ja" />
        <meta name="sitelocaleai:default-locale"
          content="en" />
      </head>
      <Script
        src="https://cdn.jsdelivr.net/npm/sitelocaleai/dist/sitelocaleai.iife.js"
        strategy="afterInteractive"
      />
      <Component />
    </>
  )
}

Vue / Nuxt

Compatible with Vue 2, Vue 3, and Nuxt. The JS library observes DOM mutations, so it automatically translates content that Vue renders after the initial page load, including route transitions. 

<!-- nuxt.config.ts -->
export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        { name: 'sitelocaleai:url',
          content: 'https://your-sdk.example.com' },
        { name: 'sitelocaleai:locales',
          content: 'en,de,fr,es,ja' },
        { name: 'sitelocaleai:default-locale',
          content: 'en' },
      ],
      script: [{
        src: 'https://cdn.jsdelivr.net/npm/sitelocaleai/dist/sitelocaleai.iife.js',
      }]
    }
  }
})

WordPress

Dedicated WordPress plugin — no Node.js required. Install from the WordPress plugin directory, enter your license key, and your site is translated. The plugin includes a lightweight PHP translation cache for maximum performance. 

// Install via WP-CLI
wp plugin install sitelocaleai --activate

// Or search "SiteLocaleAI" in
// Plugins → Add New

Shopify

Works with Shopify's Liquid templates and any Shopify theme. Add the script tag to your theme.liquid layout file. Product prices, collection pages, and checkout text are all translated and localized automatically. 

<!-- theme.liquid, before </head> -->
<meta name="sitelocaleai:url" content="https://your-sdk.example.com">
<meta name="sitelocaleai:locales" content="en,de,fr,es">
<meta name="sitelocaleai:default-locale" content="en">
<script src="https://cdn.jsdelivr.net/npm/sitelocaleai/dist/sitelocaleai.iife.js"></script>

Static HTML

The simplest integration. Add one script tag to your HTML and you are done. Works with any static site generator — Hugo, Jekyll, Eleventy, Astro, Gatsby — or plain hand-written HTML. No build step, no configuration files. 

<!-- Add to your <head> -->
<meta name="sitelocaleai:url" content="https://your-sdk.example.com">
<meta name="sitelocaleai:locales" content="en,de,fr,es">
<meta name="sitelocaleai:default-locale" content="en">
<meta name="sitelocaleai:base-currency" content="USD">
<script src="https://cdn.jsdelivr.net/npm/sitelocaleai/dist/sitelocaleai.iife.js"></script>

Angular

Works with Angular's change detection and component rendering. The JS library uses a MutationObserver to detect when Angular updates the DOM, then translates new content. No Angular module or service needed. 

<!-- index.html — add meta tags + script -->
<meta name="sitelocaleai:url" content="https://your-sdk.example.com">
<meta name="sitelocaleai:locales" content="en,de,fr,es">
<meta name="sitelocaleai:default-locale" content="en">
<script src="https://cdn.jsdelivr.net/npm/sitelocaleai/dist/sitelocaleai.iife.js"></script>

Svelte / SvelteKit

Svelte compiles to vanilla DOM operations, making it a perfect fit for SiteLocaleAI. Add the script tag to your app.html layout and the JS library handles the rest, including SvelteKit page transitions. 

<!-- src/app.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="sitelocaleai:url" content="https://your-sdk.example.com">
  <meta name="sitelocaleai:locales" content="en,de,fr,es">
  <meta name="sitelocaleai:default-locale" content="en">
  <script src="https://cdn.jsdelivr.net/npm/sitelocaleai/dist/sitelocaleai.iife.js"></script>
  %sveltekit.head%
</head>

Ruby on Rails

Works with server-rendered ERB, HAML, or Slim templates. Add the script to your application layout. Turbo and Stimulus-driven pages are supported — the JS library detects Turbo Drive navigation and re-translates on page change. 

<%# app/views/layouts/application.html.erb %>
<head>
  <meta name="sitelocaleai:url" content="https://your-sdk.example.com">
  <meta name="sitelocaleai:locales" content="en,de,fr,es">
  <meta name="sitelocaleai:default-locale" content="en">
  <script src="https://cdn.jsdelivr.net/npm/sitelocaleai/dist/sitelocaleai.iife.js"></script>
  <%= csrf_meta_tags %>
</head>

PHP / Laravel

Works with any PHP-rendered HTML — Laravel Blade, Symfony Twig, plain PHP, or any CMS. Add the script tag to your base layout template. For WordPress specifically, use our dedicated plugin instead for the best experience. 

<!-- resources/views/layouts/app.blade.php -->
<head>
  <meta name="sitelocaleai:url" content="https://your-sdk.example.com">
  <meta name="sitelocaleai:locales" content="en,de,fr,es">
  <meta name="sitelocaleai:default-locale" content="en">
  <script src="https://cdn.jsdelivr.net/npm/sitelocaleai/dist/sitelocaleai.iife.js"></script>
</head>

Why It Works With Everything

Most translation tools require framework-specific integrations — React hooks, Vue composables, Angular pipes, or PHP middleware. That means every framework needs a dedicated adapter, and if your framework is not supported, you are out of luck.

SiteLocaleAI takes a fundamentally different approach. Instead of integrating at the framework level, we operate at the DOM level. Our JS library:

  1. Observes the rendered DOM using a MutationObserver, so it detects content changes regardless of which framework produced them.
  2. Extracts visible text nodes from the live page, not from source templates or virtual DOMs.
  3. Replaces text in place without modifying the DOM structure, preserving event handlers, CSS classes, and framework bindings.
  4. Handles dynamic content by re-translating when the DOM changes — whether from React state updates, Vue reactivity, Angular change detection, or Turbo Drive navigation.

This means SiteLocaleAI works with any technology that produces HTML. If a browser can render it, SiteLocaleAI can translate it.

React

Vue

Angular

WordPress

Shopify

PHP

Rails

Svelte

Static HTML

DOM-level translation = universal compatibility

Your framework is supported

Add one script tag and start translating. No framework adapter. No build step. No config files.

Get started free How it works