Documentation
Everything you need to add translation to a website, customize the language switcher and control what gets translated.
Installation
Add your website in the dashboard, then paste its snippet into the <head> of every page, ideally near the top:
<script src="https://alinio.app/widget.js" data-key="YOUR_SITE_KEY"></script>Loading the script in the <head> without defer lets returning visitors see their language before the page is first painted. The script is small and cached by the browser. If you prefer, defer or async work as well; the page is then briefly shown in its original language.
Options
Configure the widget with attributes on the script tag:
| Attribute | Values | Purpose |
|---|---|---|
data-key | your site key | Required. Identifies your website. |
data-position | bottom-right, bottom-left, top-right, top-left, inline, none | Where the switcher appears. Overrides the dashboard setting. none hides it, for example when you build your own. |
data-container | CSS selector | Renders the switcher inside this element instead of floating, e.g. #language. An element with the class website-translator is used automatically. |
data-de, data-fr, … | URL | You already have a separate website for this language: visitors who pick it are sent there instead of translating in place, e.g. data-de="https://www.example.de/". |
Links can open a page in a specific language with the parameter alinio_lang, e.g. https://www.example.com/?alinio_lang=fr. The parameter is removed from the address bar and the choice is remembered.
Your own language buttons
Any element with a data-alinio-lang attribute becomes a language button. An empty value switches back to the original language. The attribute aria-pressed is kept up to date for styling.
<a href="#" data-alinio-lang="de">Deutsch</a>
<a href="#" data-alinio-lang="fr">Français</a>
<a href="#" data-alinio-lang="">English</a>Keeping content untranslated
Mark elements with the standard translate="no" attribute or the class notranslate. Code blocks, form fields, scripts and styles are never translated. Brand names and other terms can also be listed in the glossary in your website settings; they are kept as they are everywhere.
JavaScript API
The widget exposes window.alinio:
alinio.setLanguage('fr') | Translate the page into a language enabled for your site. |
alinio.restore() | Show the original language again. |
alinio.language | The current language code, or null for the original. |
alinio.refresh() | Translate content you inserted without triggering DOM mutations (rarely needed). |
Events are dispatched on document: alinio:change when the language changes and alinio:status with detail.state busy, done or error.
Content Security Policy
If your website sends a Content-Security-Policy header, allow the script and its API requests:
script-src … https://alinio.app;
connect-src … https://alinio.app;Allowed domains
New translations are only produced for requests coming from the domains listed in your website settings. Add every domain that serves your pages, including staging domains. *.example.com allows all subdomains.
Search engines
Translations are applied in the browser, so search engines index your original language. Use a dedicated multilingual setup if translated pages must rank in search results.
Support
Questions or problems? Write to info@alinio.app.