Install with HTML

Add Saintara with one line.

For any website where you can edit the page HTML. On WordPress? The plugin does this for you.

The language picker

The easiest option. It adds a ready-made language button and dropdown, and loads the engine and your languages automatically.

Get your site ID
Sign up and add your website’s address in the portal. Your site ID looks like SB-xxxxxxxxxx. The portal shows the line below with your real ID filled in.
Paste the line just before the closing body tag
In your page template, add it just before </body>, on every page that should offer translation.
Check it
Open your site. A Translate button appears in the bottom-right corner. Pick a language and the page text changes in place. You choose which languages to offer in your portal.

HTML · just before </body>

<script src="https://api.saintara.io/api/dropdown.js" data-sb-id="SB-your-id" defer></script>

Replace SB-your-id with your site ID. The copy button copies the line as written here; the portal copies it with your real ID.

Optional settings

Add any of these to the same script tag. All are optional.

Optional settings for the language picker
Attribute	What it does	Default
`data-sb-trigger`	Where the picker shows. `floating`, `nav`, or a CSS selector for your own button.	`floating`
`data-sb-position`	Which corner the floating button sits in: `bottom-right` or `bottom-left`.	`bottom-right`
`data-sb-accent`	The button color.	`#4f46e5`
`data-sb-icon`	An emoji, or `none`.	🌐
`data-sb-label`	The button text.	Translate

Put the dropdown in your own page

Want it inline, in your header for example, instead of a floating button? Add this <select> where you want it. Saintara fills it with your languages and translates when it changes.

HTML · where you want the dropdown

<!-- Place this where you want the dropdown. It fills itself in. -->
<select data-sb-dropdown aria-label="Language"></select>

<script src="https://api.saintara.io/api/dropdown.js" data-sb-id="SB-your-id" defer></script>

When a <select data-sb-dropdown> is on the page and you haven’t set data-sb-trigger, the floating button isn’t shown.

Starter CSS

Paste this into your stylesheet and change the colors, radius and accent to match your site.

CSS · your stylesheet

/* Saintara language dropdown: edit freely to match your site */
select[data-sb-dropdown] {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: #0f172a;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 34px 8px 12px;   /* room on the right for the arrow */
  cursor: pointer;
  appearance: none;             /* replaces the native arrow */
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
select[data-sb-dropdown]:hover { border-color: #cbd5e1; }
select[data-sb-dropdown]:focus {
  outline: none;
  border-color: #4f46e5;        /* your accent color */
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

/* Dark background? Uncomment:
select[data-sb-dropdown] { background-color: #1e293b; color: #f1f5f9; border-color: #334155; }
*/

This styles the dropdown control fully. The open list of options is drawn by the browser and can only be partly styled, and that varies between browsers. For a fully branded list, use the language picker above: Saintara styles its panel, so you don’t depend on how each browser draws its list.

Fully custom controls

Building your own switcher? Load the engine on its own and call it from your buttons.

HTML · load the engine

<script src="https://api.saintara.io/api/script/SB-your-id" defer></script>

HTML · call it from your own controls

<button onclick="SB.translate('fr')">Français</button>
<button onclick="SB.restore()">Original</button>

SB.translate('fr') translates the page into the language code you pass, and SB.restore() returns it to the original.

If nothing appears

Check the site ID: The script tag needs data-sb-id with your site ID. Without it the picker doesn’t load, and your browser’s console says so.
Check the address: Requests are checked against the websites you registered. Make sure the address you’re testing on, including www if you use it, is added in your portal.
Check your languages: If your account has no languages switched on, the dropdown has nothing to show. Add them in your portal.
Still stuck?: See the FAQ, or contact us and tell us the page address.

Try it on your own site.

7 days free with your own translation key. No credit card.

Start free trial