JavaScript

Traduis n'importe quel site web en JavaScript simple : ajoute une balise de script et marque le texte que tu veux traduire. Cela fonctionne avec le HTML brut, les pages rendues par le serveur, WordPress et les autres CMS, ainsi qu'avec les applications créées avec n'importe quel framework.

Configuration à l'aide d'une balise de script

Ajoute le script Magic Translate à ta page :

<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>

Si tu n'as pas encore de clé API, inscris-toi à Magic Translate pour en obtenir une. Puisque la clé fait partie de ta page, limite-la à tes propres domaines dans les domaines autorisés.

Mets ensuite le texte que tu veux traduire dans un élément <t> :

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

C'est ça. Ton site web peut désormais être traduit dans plus de 70 langues.

Oublie data-language pour le traduire dans la langue du navigateur du visiteur.

Configuration avec npm

Si tu offres ton code JavaScript, installe plutôt le client depuis 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 commence à traduire la page immédiatement.

Configuration

Le tag de script accepte les attributs suivants :

Attribut	Description
`data-api-key`	Obligatoire. Ta clé API Magic Translate.
`data-language`	La langue dans laquelle ton contenu est traduit, par exemple `de`. Par défaut, c'est la langue du navigateur.
`data-source-language`	La langue dans laquelle ta page est écrite. Il est détecté automatiquement, donc ne le règle que si la détection donne de mauvais résultats.
`data-formality`	`formal` ou `informal`. Non disponible dans toutes les langues.
`data-debug`	Enregistre les demandes sur la console.

createMagicTranslate accepte les options correspondantes : apiKey, language, sourceLanguage, formality et debug. Il accepte également root pour limiter la traduction à un élément spécifique. Par défaut, il traduit l'intégralité du document.

Changer de langue

Appelle setLanguage pour traduire la page dans une autre langue. Avec le tag script, l'instance est disponible sous le nom window.magicTranslate :

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

Lorsque tu utilises la balise de script, la langue sélectionnée par le visiteur est enregistrée pour le chargement de la page suivante.

Exemple de projet

Tu peux trouver un exemple de projet sur GitHub et le suivre en direct.