JavaScript

Traduza qualquer site com JavaScript simples: adicione uma tag de script e marque o texto que você deseja traduzir. Isso funciona com HTML simples, páginas renderizadas pelo servidor, WordPress e outros CMSs e aplicativos criados com qualquer estrutura.

Configuração com uma tag de script

Adicione o script Magic Translate à sua 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>

Se você ainda não tem uma chave de API, inscreva-se no Magic Translate para obter uma. Como a chave faz parte da sua página, limite-a aos seus próprios domínios nos domínios permitidos.

Em seguida, coloque o texto que você deseja traduzir em um elemento <t>:

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

É isso mesmo. Seu site agora pode ser traduzido para mais de 70 idiomas.

Deixe de fora data-language para traduzir para o idioma do navegador do visitante.

Configuração com npm

Se você empacotar seu JavaScript, instale o cliente do npm em vez disso:

# 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 começa a traduzir a página imediatamente.

Configuração

A tag de script aceita esses atributos:

Atributo	Descrição
`data-api-key`	Obrigatório. Sua chave de API Magic Translate.
`data-language`	O idioma para o qual seu conteúdo foi traduzido, por exemplo, `de`. O padrão é o idioma do navegador.
`data-source-language`	O idioma em que sua página está escrita. Ele é detectado automaticamente, portanto, defina-o somente se a detecção der resultados errados.
`data-formality`	`formal` ou `informal`. Não é compatível com todos os idiomas.
`data-debug`	Registra as solicitações no console.

createMagicTranslate aceita as opções correspondentes: apiKey, language, sourceLanguage, formality e debug. Ele também aceita root para limitar a tradução a um elemento específico. Por padrão, ele traduz todo o documento.

Alterando idiomas

Ligue para setLanguage para traduzir a página para outro idioma. Com a tag de script, a instância está disponível 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>

Quando você usa a tag de script, a seleção de idioma do visitante é salva para o próximo carregamento da página.

Exemplo de projeto

Você pode encontrar um exemplo de projeto no GitHub e vê-lo ao vivo.