Instalar no Lovable

Um projeto Lovable se conecta ao Universally com uma tag de script no <head> compartilhado que cada página renderiza. Você pode pedir ao Lovable para adicioná-la com um prompt, ou colá-la você mesmo no modo Código. A tag renderiza o seletor de idioma e traduz cada página no navegador do visitante, então seus URLs permanecem os mesmos em todos os idiomas, sem necessidade de alterar DNS. O modo de serviço JavaScript explica como a tradução funciona e o que ela omite.

Antes de começar

• Um projeto renderizado no servidor. Suas páginas publicadas devem incluir seu texto no HTML enviado pelo servidor. Conteúdo renderizado apenas no navegador, como em um aplicativo Vite renderizado no cliente, ainda não é suportado.
• 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 projeto publicado em seu próprio domínio. A verificação de conexão só vê o que está publicado.

Criar o projeto

1. Inicie um novo projeto. Em Selecione Sua Tecnologia, escolha Lovable.
2. Preencha Domínio, o domínio totalmente qualificado em que seu projeto está publicado, como exemplo.com. Se o domínio ainda não for resolvido, você verá um aviso e ainda poderá continuar.
3. Preencha Nome do Projeto, verifique Idioma de Origem (Inglês (EUA) por padrão) e clique em Avançar.

Projetos Lovable 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 Lovable: 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>

Peça ao Lovable para adicioná-lo. Clique em Copiar prompt, abra seu projeto no Lovable e cole o prompt no chat. Ele usa um crédito Lovable. O prompt termina com sua linha:

Add this script tag to the shared document <head> of this server-rendered project so it loads on every page. Use the root layout or document for this project's framework, preserve server rendering, and keep everything else as it is:
<script src="https://scripts.universally.com/p/YOUR_PUBLIC_KEY/s.js" async></script>

Ou cole você mesmo no modo Código. Em um plano pago do Lovable, clique em Copiar linha, mude para Código e coloque a linha no <head> do seu aplicativo no layout raiz compartilhado ou documento usado para renderizar cada página. Nenhum crédito é gasto.

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

1. Publique seu projeto no Lovable. A pré-visualização não é o site publicado, e a verificação só vê o que está publicado.
2. 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. Verificar conexão confirma que o script está instalado. Ele não verifica se seu conteúdo pode ser traduzido.

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

1. Em Adicionar idiomas, responda "Quais idiomas você deseja traduzir?" com pelo menos um idioma de destino.
2. Clique em Concluir. Ele permanece desativado até que o projeto tenha um idioma.

A caixa de diálogo de idioma ainda mostra Formato da URL, mas o valor não é usado no Lovable porque suas URLs nunca mudam. Cada linha de idioma em Todos os idiomas tem um interruptor Ativo. Veja Adicionar e remover idiomas.

Verificar se funcionou

1. 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.
2. Encontre o seletor de idioma no canto superior direito, com bandeiras e nomes de idiomas.
3. 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 publicada, ou a linha foi para algum lugar que não o <head> compartilhado. Publique e verifique novamente. A verificação olha apenas para sua página inicial.
• Encontramos, mas a página permanece no idioma de origem: o texto é renderizado apenas no navegador, então não está no HTML que o servidor envia. Isso ainda não é suportado.
• 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.

Mais casos estão em Traduções não estão aparecendo e O seletor não está visível.