alinio: Websites mit einer Zeile Code übersetzen

So funktioniert's

1. Website anlegen: Im Dashboard die Adresse, die Ausgangssprache und die gewünschten Zielsprachen eintragen.

2. Script-Tag einfügen: Eine Zeile in die Seitenvorlage, am besten in den <head>:

   <script src="https://alinio.de/widget.js" data-key="IHR_WEBSITE_SCHLUESSEL"></script>

3. Besucher wählen ihre Sprache: In einer Ecke der Seite erscheint ein kompakter Sprachumschalter. Die Wahl gilt auf allen weiteren Seiten.

Das funktioniert überall, wo sich ein Script-Tag einfügen lässt: WordPress, Shopify, Webflow, Wix, Squarespace, statisches HTML sowie React-, Vue- oder Angular-Apps.

Die Funktionen

• Das Layout bleibt intakt: Nur der Text ändert sich. Skripte, Formulare und Event-Handler laufen weiter, es entsteht keine Kopie der Website.
• Links und Formatierung bleiben erhalten: Fett gesetzte Wörter, Links und Icons innerhalb eines Satzes werden mitübersetzt und wandern mit der Grammatik der Zielsprache mit, statt den Satz in Bruchstücke zu zerlegen.
• Übersetzungseditor: Jeder Satz lässt sich im Dashboard prüfen und korrigieren. Manuelle Änderungen sind sofort live und werden nie von der maschinellen Übersetzung überschrieben.
• Glossar und Ausnahmen: Begriffe, die nicht übersetzt werden dürfen, kommen ins Glossar. Ganze Elemente nimmt translate="no" oder die Klasse notranslate aus – ideal für Markennamen, Preise oder Code.
• Dynamische Inhalte: Text, den JavaScript später nachlädt, und Seitenwechsel in Single-Page-Apps werden übersetzt, sobald sie erscheinen.
• Rechts-nach-links: Bei Arabisch, Hebräisch und Persisch wechselt die Leserichtung der Seite automatisch.
• Automatische Sprachwahl: Auf Wunsch sehen Erstbesucher die Seite gleich in ihrer Browsersprache, sofern diese zu den angebotenen Sprachen gehört.
• Vorab übersetzen: Texte werden normalerweise übersetzt, wenn jemand sie zum ersten Mal in einer Sprache liest. Optional übersetzt alinio sie vorab im Hintergrund, damit schon der erste Besucher jeder Sprache die fertige Version bekommt.
• Eigener Umschalter: Jeder Link oder Button mit data-alinio-lang="fr" wird zum Sprachbutton. Die Position des Standard-Umschalters ist wählbar, und über eine kleine JavaScript-API (alinio.setLanguage('de'), alinio.restore(), die Events alinio:change und alinio:status) lässt sich alles auch aus dem eigenen Code steuern.
• Nur auf Ihren Domains: Ein Website-Schlüssel funktioniert nur auf den eingetragenen Domains. So kann niemand sonst das eigene Übersetzungskontingent verbrauchen.
• Keine Cookies, kein Tracking: Die Sprachwahl liegt im localStorage des Browsers. Verarbeitet wird nur der Text der Seiten.

Zur Einordnung: Weil die Übersetzung im Browser stattfindet, indexieren Suchmaschinen weiterhin die Originalsprache. alinio ist für die Besucher einer Website gemacht, nicht als SEO-Werkzeug.

Warum es schnell ist

Vieles auf einer Website wiederholt sich: Navigation, Fußzeile, Produktnamen. alinio übersetzt jeden Satz deshalb nur einmal pro Website und liefert ihn danach für alle Seiten und alle Besucher aus dem Cache. Je nach Situation braucht ein Sprachwechsel unterschiedlich viel Netzwerk:

Bei ganz neuem Text erscheinen die ersten Sätze nach etwa einer Sekunde, der Rest folgt, sobald er fertig ist.

Die Technik dahinter

Backend: Go, ein einziges Binary

Der Server ist in Go geschrieben und wird zu einem einzigen statischen Binary kompiliert. Darin stecken Webserver, Hintergrund-Worker (Vorab-Übersetzung, Abgleich der Abos), tägliches Backup und alle Konsolenbefehle (serve, worker, setup, migrate, backup:restore …). Templates, statische Dateien und das Datenbankschema sind eingebettet, gerendert wird mit html/template. Die Liste der externen Abhängigkeiten ist kurz: MySQL-Treiber, Stripe-SDK, Anthropic-SDK, go-mail und golang.org/x/crypto.

Datenbank: MariaDB

MariaDB hält Konten, Websites und das Übersetzungsgedächtnis. Textsegmente sind pro Website eindeutig, jede Seite merkt sich ihre Segmente (daraus entsteht die cachebare Antwort für bekannte Seiten), und jede Übersetzung trägt ihre Herkunft: machine oder manual. Migrationen laufen beim Start automatisch.

Widget: Vanilla JavaScript

Das Widget kommt ohne Framework und ohne Abhängigkeiten aus. Es zerlegt den DOM in Textsegmente und ersetzt Inline-Markup durch Platzhalter wie <g1>…</g1> oder <x2/>. Übersetzungen schreibt es ausschließlich als Text zurück, das Original kann es jederzeit exakt wiederherstellen. Ein MutationObserver erfasst nachgeladene Inhalte, der Sprachumschalter lebt barrierearm in einem Shadow DOM und kollidiert so nicht mit dem CSS der Website. Für die Auslieferung wird das Script mit terser minifiziert.

KI-Übersetzung: austauschbare Modelle

Übersetzt wird von einem großen Sprachmodell im Ton der jeweiligen Website und unter Beachtung des Glossars. Ein paar Details:

• Die Antworten werden gestreamt und von einem inkrementellen JSON-Parser gelesen. Jeder Satz geht an den Browser, sobald sein schließendes Anführungszeichen ankommt.
• Die Pakete werden nach Zeichen begrenzt, weil die Generierungszeit mit der Länge der Ausgabe wächst. Das erste Paket ist bewusst klein, damit schnell etwas auf dem Bildschirm steht; mehrere Pakete laufen parallel in Goroutines.
• Das Modell liefert Übersetzungen, die per Segment-ID zugeordnet sind. Lässt es einen Eintrag weg oder fasst zwei zusammen, kann sich dadurch keine Übersetzung auf einen fremden Text verschieben.
• Jede Übersetzung wird geprüft: Die Platzhalter müssen exakt mit dem Original übereinstimmen und korrekt verschachtelt sein. Scheitert das auch im zweiten Versuch, werden die Textstücke zwischen den Platzhaltern einzeln übersetzt und wieder zusammengesetzt. Links und Formatierung gehen so nicht verloren.
• Übersetzt gerade die Anfrage eines anderen Besuchers denselben Text, wartet alinio auf dieses Ergebnis, statt den Text ein zweites Mal übersetzen zu lassen.

Betrieb und Sicherheit

• Docker: Multi-Stage-Build (Node zum Minifizieren, Go zum Kompilieren, ein schlankes Alpine-Image als Ziel). Das Binary läuft als unprivilegierter Nutzer, ein Healthcheck meldet den Zustand von Anwendung und Datenbank.
• Caddy als Reverse Proxy übernimmt HTTPS und Kompression und reicht die gestreamten API-Antworten ungepuffert durch.
• Stripe wickelt Abos ab: Checkout, Billing, Kundenportal und Webhooks. Ein Hintergrundjob gleicht die Abos regelmäßig ab, falls ein Webhook verloren geht.
• Sicherheit: CSRF-Tokens, HttpOnly- und SameSite-Cookies, eine strikte Content Security Policy, Rate-Limits pro IP (bei IPv6 pro /64-Netz) und Größenlimits für jede Anfrage.
• Zweisprachige Oberfläche: Website und Dashboard sind auf alinio.de deutsch, auf alinio.app englisch. Ein Test schlägt fehl, sobald ein Text ohne deutsche Übersetzung bleibt.
• Tests: Die Integrationstests starten die echte Anwendung gegen eine MariaDB-Datenbank.

Ausprobieren

Am schnellsten überzeugt die Demo auf alinio.de: Die Startseite übersetzt sich mit demselben Script, das auch die Websites unserer Kunden bekommen. Dort lässt sich auch direkt ein Konto anlegen. Alle Optionen des Widgets beschreibt die Dokumentation.