JavaScript

Traduci qualsiasi sito web con un semplice JavaScript: aggiungi un tag di script e segna il testo che vuoi tradurre. Funziona con HTML semplice, pagine renderizzate dal server, WordPress e altri CMS e app create con qualsiasi framework.

Configurazione con un tag di script

Aggiungi lo script Magic Translate alla tua pagina:

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

Se non hai ancora una chiave API, iscriviti a Magic Translate per ottenerne una. Poiché la chiave fa parte della tua pagina, limitala ai tuoi domini tra i domini consentiti.

Quindi inserisci il testo che vuoi tradurre in un elemento <t>:

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

Questo è tutto. Il tuo sito web ora può essere tradotto in oltre 70 lingue.

Tralascia data-language per tradurre nella lingua del browser del visitatore.

Configurazione con npm

Se raggruppi il tuo JavaScript, installa invece il client da 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 inizia subito a tradurre la pagina.

Configurazione

Il tag script accetta questi attributi:

Attributo	Descrizione
`data-api-key`	Obbligatorio. La tua chiave API Magic Translate.
`data-language`	La lingua in cui vengono tradotti i tuoi contenuti, ad esempio `de`. Il valore predefinito è la lingua del browser.
`data-source-language`	La lingua in cui è scritta la tua pagina. Viene rilevato automaticamente, quindi impostalo solo se il rilevamento dà risultati errati.
`data-formality`	`formal` o `informal`. Non supportato per tutte le lingue.
`data-debug`	Registra le richieste nella console.

createMagicTranslate accetta le opzioni corrispondenti: apiKey, language, sourceLanguage, formality e debug. Accetta anche root per limitare la traduzione a un elemento specifico. Per impostazione predefinita, traduce l'intero documento.

Cambiare lingua

Chiama setLanguage per tradurre la pagina in un'altra lingua. Con il tag script, l'istanza è disponibile come 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>

Quando usi il tag script, la selezione della lingua del visitatore viene salvata per il successivo caricamento della pagina.

Esempio di progetto

Puoi trovare un progetto di esempio su GitHub e vederlo dal vivo.