Um site Webflow se conecta ao Universally com uma tag de script em seu código de cabeçalho de todo o 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. Modo de serviço JavaScript explica como a tradução funciona e o que ela omite.
Antes de começar
- Um plano Webflow com código personalizado. O código personalizado requer um plano de site ativo ou um Workspace Core, Growth, Agency ou Freelancer.
- 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 Webflow.
- 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 Webflow 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 Webflow: 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 Webflow, abra Configurações do site › Código personalizado › Código do cabeçalho.
- Cole a linha e salve.
Use o campo de todo o site, não o código personalizado de uma única página, para que o script seja carregado em todas as páginas. Os botões Marcar como concluído na tela são armazenados em seu navegador e não bloqueiam nada.
Publicar e verificar a conexão
- No Webflow, clique em Salvar alterações e, em seguida, Publicar no domínio que você inseriu no Universally. A verificação de conexã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.
O diálogo de idioma ainda mostra Formato de URL, mas o valor não é usado no Webflow 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 inferior direito, com bandeiras e nomes de idiomas.
- Escolha um idioma. A página é recarregada nele, no mesmo endereço.
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.