Um site Framer se conecta ao Universally com uma única tag de script adicionada ao código personalizado do site. A tag renderiza o seletor de idioma e traduz cada página no navegador do visitante, para que seus URLs permaneçam os mesmos em todos os idiomas e não haja DNS para alterar. O modo de serviço JavaScript explica como a tradução funciona e o que ela omite.
Antes de começar
- Um plano pago do Framer. O código personalizado precisa de um.
- A função Proprietário ou Administrador em seu espaço de trabalho Universally, para criar o projeto e ver seu snippet. Editores veem "Peça a um administrador do projeto o snippet de instalação deste projeto." em vez da linha.
- Um site publicado em seu próprio domínio. A verificação de conexão só vê o site publicado.
Criar o projeto
- Inicie um novo projeto. Em Selecione Sua Tecnologia, escolha Framer.
- Preencha Domínio, o domínio totalmente qualificado em que seu site está publicado, como
exemplo.com. Se o domínio ainda não for resolvido, você verá um aviso e ainda poderá continuar. - Preencha Nome do Projeto, verifique Idioma de Origem (Inglês (EUA) por padrão) e clique em Avançar.
Projetos Framer não têm modo de serviço para escolher, então a próxima tela é Adicionar o snippet. Subdomínios de idioma ainda não estão disponíveis para sites Framer: seu site é traduzido pelo snippet, em seus próprios endereços.
Adicionar o snippet
A etapa Adicionar o snippet desenha sua linha dentro de uma página de exemplo. O painel preenche a chave do seu projeto:
<script src="https://scripts.universally.com/p/YOUR_PUBLIC_KEY/s.js" async></script>
- Clique em Copiar linha. Ele copia apenas a tag de script, e o botão muda para Copiado.
- No Framer, abra Configurações do Site › Código › Adicionar.
- Defina Posicionamento para Início do
<head>, Páginas para Todas e Executar para Uma vez. - Cole a linha e salve.
Páginas: Todas é o que faz o script carregar em todas as páginas. Os botões Marcar como concluído na tela são armazenados no seu navegador e não bloqueiam nada.
Publicar e verificar a conexão
- Clique em Publicar no Framer. A verificação só vê o site publicado.
- De volta ao Universally, clique em Verificar conexão.
A verificação carrega sua página inicial e procura pela linha. Encontrado significa que a linha está em seu domínio, pertence a este projeto e não há mais nada a instalar.
Nada muda para seus visitantes ainda. A linha apenas carrega o arquivo Universally, e seu site começa a servir traduções assim que você adicionar idiomas na próxima etapa.
Continuar e Farei isso mais tarde levam para Adicionar idiomas, e nada fica pendente na verificação. A linha permanece na página Configuração do projeto, em A linha que seu site precisa.
Adicionar idiomas
- Em Adicionar idiomas, responda "Quais idiomas você deseja traduzir?" com pelo menos um idioma de destino.
- Clique em Concluir. Ele permanece desativado até que o projeto tenha um idioma.
A caixa de diálogo de idioma ainda mostra Formato do URL, mas o valor não é usado no Framer porque seus URLs nunca mudam. Cada linha de idioma em Todos os Idiomas tem um interruptor Ao vivo. Veja Adicionar e remover idiomas.
Verificar se funcionou
- Abra seu site publicado em uma janela particular. Um visitante de primeira viagem é correspondido automaticamente ao idioma do navegador dele, então um navegador configurado para um dos seus idiomas de destino vê a página traduzida.
- Encontre o seletor de idioma no canto superior direito, com bandeiras e nomes de idiomas.
- Escolha um idioma. A página é recarregada nele, no mesmo endereço.
- Navegue entre algumas páginas publicadas. Cada uma é traduzida e há um único seletor em cada página.
Para ver o quanto de uma página foi traduzido, adicione ?uni_debug=1 à sua URL e abra o console do navegador.
Se não funcionar
- Carregamos seu domínio, mas a linha não estava na página: a alteração não foi salva ou o site não foi publicado desde então. Publique novamente e verifique. Uma cópia em cache em seu host ou CDN também pode ocultar a linha por um tempo, e a verificação só olha para sua página inicial.
- Essa linha pertence a um projeto diferente: a linha de outro projeto está no site. Substitua-a pela linha na página Configuração deste projeto e, em seguida, verifique novamente.
- Nenhum seletor aparece: o projeto ainda não tem um idioma de destino ativo. Adicione um ou ative o interruptor Ativo dele.
- O seletor é exibido, mas algum texto permanece no idioma de origem: a página está protegida por login ou senha, ou o JavaScript adiciona o texto após o carregamento da página. Veja Modo de serviço JavaScript.
Mais casos estão em Traduções não estão aparecendo e O seletor não está visível.