JavaScript

Übersetze jede Website mit einfachem JavaScript: Füge ein Script-Tag hinzu und markiere den Text, den du übersetzen möchtest. Das funktioniert mit einfachem HTML, servergerenderten Seiten, WordPress und anderen CMS und Apps, die mit jedem Framework erstellt wurden.

Einrichtung mit einem Skript-Tag

Füge das Magic Translate-Skript zu deiner Seite hinzu:

<script
  src="https://cdn.jsdelivr.net/npm/@magic-translate/js@1/dist/magic-translate.min.js"
  data-api-key="<your-api-key>"
  data-language="de"
  defer
></script>

Falls du noch keinen API-Schlüssel hast, melde dich für Magic Translate an, um einen zu erhalten. Da der Schlüssel Teil deiner Seite ist, beschränke ihn auf deine eigenen Domains unter erlaubten Domains.

Dann füge den Text, den du übersetzen möchtest, in ein <t>-Element ein:

<h1><t>Please translate me!</t></h1>

Das ist es. Deine Website kann jetzt in über 70 Sprachen übersetzt werden.

Lass data-language weg, um in die Sprache des Browsers des Besuchers zu übersetzen.

Einrichtung mit npm

Wenn du dein JavaScript bündelst, installiere stattdessen den Client von npm:

# using npm
npm i @magic-translate/js

# using yarn
yarn add @magic-translate/js

import { createMagicTranslate, Language } from '@magic-translate/js';

const magicTranslate = createMagicTranslate({
  apiKey: '<your-api-key>',
  language: Language.DE // any supported language
});

createMagicTranslate beginnt sofort mit der Übersetzung der Seite.

Konfiguration

Das Script-Tag akzeptiert diese Attribute:

Attribut	Beschreibung
`data-api-key`	Erforderlich. Dein Magic Translate API-Schlüssel.
`data-language`	Die Sprache, in die dein Inhalt übersetzt wurde, zum Beispiel `de`. Standardmäßig die Sprache des Browsers.
`data-source-language`	Die Sprache, in der deine Seite geschrieben ist. Es wird automatisch erkannt, also stelle es nur ein, wenn die Erkennung falsche Ergebnisse liefert.
`data-formality`	`formal` oder `informal`. Nicht für alle Sprachen unterstützt.
`data-debug`	Protokolliert die Anfragen auf der Konsole.

createMagicTranslate akzeptiert die entsprechenden Optionen: apiKey, language, sourceLanguage, formality und debug. Es akzeptiert auch root, um die Übersetzung auf ein bestimmtes Element zu beschränken. Standardmäßig wird das gesamte Dokument übersetzt.

Sprachen ändern

Rufe setLanguage an, um die Seite in eine andere Sprache zu übersetzen. Mit dem Script-Tag ist die Instanz als window.magicTranslate verfügbar:

<select onchange="magicTranslate.setLanguage(this.value)">
  <option value="en">English</option>
  <option value="de">Deutsch</option>
  <option value="fr">Français</option>
</select>

Wenn du das Script-Tag verwendest, wird die Sprachauswahl des Besuchers für das nächste Laden der Seite gespeichert.

Beispielprojekt

Du kannst ein Beispielprojekt auf GitHub finden und es live sehen.