JavaScript

Traduce cualquier sitio web con JavaScript simple: añade una etiqueta de guion y marca el texto que quieres traducir. Funciona con HTML simple, páginas renderizadas por el servidor, WordPress y otros CMS, y aplicaciones creadas con cualquier marco.

Configuración con una etiqueta de guion

Añade el guion Magic Translate a tu página:

<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 aún no tienes una clave de API, regístrate en Magic Translate para conseguir una. Como la clave forma parte de tu página, limítala a tus propios dominios según los dominios permitidos.

Luego coloca el texto que quieres traducir en el elemento <t>:

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

Eso es todo. Tu sitio web ya se puede traducir a más de 70 idiomas.

Omite data-language para traducirlo al idioma del navegador del visitante.

Configuración con npm

Si combinas tu JavaScript, instala el cliente desde npm en su lugar:

# 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 empieza a traducir la página de inmediato.

Configuración

La etiqueta de guion acepta estos atributos:

Atributo	Descripción
`data-api-key`	Necesario. Tu clave de API Magic Translate.
`data-language`	El idioma al que está traducido tu contenido, por ejemplo, `de`. Por defecto es el idioma del navegador.
`data-source-language`	El idioma en el que está escrita tu página. Se detecta automáticamente, así que configúralo solo si la detección arroja resultados incorrectos.
`data-formality`	`formal` o `informal`. No es compatible en todos los idiomas.
`data-debug`	Registra las solicitudes en la consola.

createMagicTranslate acepta las opciones correspondientes: apiKey, language, sourceLanguage, formality y debug. También acepta root para limitar la traducción a un elemento específico. Por defecto, traduce todo el documento.

Cambiar de idioma

Llama al setLanguage para traducir la página a otro idioma. Con la etiqueta script, la instancia está disponible como 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>

Cuando utilizas la etiqueta script, la selección de idioma del visitante se guarda para que se cargue la página siguiente.

Ejemplo de proyecto

Puedes encontrar un proyecto de ejemplo en GitHub y verlo publicado.