Un proyecto de Lovable se conecta a Universally con una etiqueta de script en el <head> compartido que cada página renderiza. Puedes pedirle a Lovable que la agregue con una indicación, o pegarla tú mismo en el modo de código. La etiqueta muestra el selector de idioma y traduce cada página en el navegador del visitante, por lo que tus URL permanecen iguales en cada idioma sin necesidad de cambiar DNS. El modo de servicio de JavaScript explica cómo funciona la traducción y qué omite.
Antes de empezar
- Un proyecto renderizado en el servidor. Tus páginas publicadas deben incluir su texto en el HTML enviado por el servidor. El contenido renderizado solo en el navegador, como en una aplicación Vite renderizada en el cliente, aún no es compatible.
- El rol de Propietario o Administrador en tu espacio de trabajo de Universally, para crear el proyecto y ver su fragmento. Los editores ven "Pídele a un administrador del proyecto el fragmento de instalación de este proyecto" en lugar de la línea.
- Un proyecto publicado en tu propio dominio. La verificación de conexión solo ve lo que está publicado.
Crear el proyecto
- Inicia un nuevo proyecto. En Selecciona tu tecnología, elige Lovable.
- Completa Dominio, el dominio completo en el que está publicado tu proyecto, como
ejemplo.com. Si el dominio aún no se resuelve, verás una advertencia y podrás continuar. - Completa Nombre del proyecto, verifica Idioma de origen (Inglés (EE. UU.) por defecto) y haz clic en Siguiente.
Los proyectos de Lovable no tienen modo de servicio para elegir, por lo que la siguiente pantalla es Agregar el fragmento. Los subdominios de idioma aún no están disponibles para los sitios de Lovable: tu sitio se traduce mediante el fragmento, en sus propias direcciones.
Añadir el fragmento
El paso Agregar el fragmento muestra tu línea dentro de una página de ejemplo. El panel completa la clave de tu proyecto:
<script src="https://scripts.universally.com/p/YOUR_PUBLIC_KEY/s.js" async></script>
Pídele a Lovable que lo agregue. Haz clic en Copiar indicación, abre tu proyecto en Lovable y pega la indicación en el chat. Utiliza un crédito de Lovable. La indicación termina con tu línea:
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>
O pégalo tú mismo en el modo de código. En un plan de Lovable de pago, haz clic en Copiar línea, cambia a Código y coloca la línea en el <head> de tu aplicación en el diseño raíz compartido o en el documento utilizado para renderizar cada página. No se gasta ningún crédito.
Los botones Marcar como completo en la pantalla se almacenan en tu navegador y no restringen nada.
Publica y verifica la conexión
- Publica tu proyecto en Lovable. La vista previa no es el sitio publicado, y la verificación solo ve lo que está publicado.
- De vuelta en Universally, haz clic en Verificar conexión.
La verificación carga tu página de inicio y busca la línea. Encontrado significa que la línea está en tu dominio, pertenece a este proyecto y no hay nada más que instalar. Verificar conexión confirma que el script está instalado. No verifica si tu contenido se puede traducir.
Nada cambia para tus visitantes todavía. La línea solo carga el archivo de Universally y tu sitio comienza a servir traducciones una vez que agregas idiomas en el siguiente paso.
Continuar y Lo haré más tarde avanzan a Agregar idiomas, y nada queda pendiente en la verificación. La línea permanece en la página Configuración del proyecto, bajo La línea que tu sitio necesita.
Añadir idiomas
- En Agregar idiomas, responde "¿A qué idiomas quieres traducir?" con al menos un idioma de destino.
- Haz clic en Finalizar. Permanece deshabilitado hasta que el proyecto tenga un idioma.
El diálogo de idioma todavía muestra Formato de URL, pero el valor no se utiliza en Lovable porque tus URL nunca cambian. Cada fila de idioma en Todos los idiomas tiene un interruptor En vivo. Consulta Agregar y quitar idiomas.
Verificar que funcionó
- Abre tu sitio publicado en una ventana privada. Un visitante por primera vez se empareja automáticamente con el idioma de su navegador, por lo que un navegador configurado en uno de tus idiomas de destino ve la página traducida.
- Encuentra el selector de idioma en la esquina superior derecha, con banderas y nombres de idiomas.
- Elige un idioma. La página se recarga en ese idioma, en la misma dirección.
Para ver cuánto de una página se tradujo, añade ?uni_debug=1 a su URL y abre la consola del navegador.
Si no funciona
- Cargamos tu dominio pero la línea no estaba en la página: el cambio no se publicó, o la línea fue a algún lugar que no fuera el
<head>compartido. Publica y vuelve a verificar. La verificación solo mira tu página de inicio. - Lo encontré, pero la página permanece en el idioma de origen: el texto solo se renderiza en el navegador, por lo que no está en el HTML que envía el servidor. Eso aún no es compatible.
- Esa línea pertenece a un proyecto diferente: la línea de otro proyecto está en el sitio. Reemplázala con la línea de la página Configuración de este proyecto, y luego vuelve a comprobar.
- No aparece ningún selector: el proyecto aún no tiene ningún idioma de destino activo. Añade uno, o activa su interruptor Activo.
Hay más casos en Las traducciones no aparecen y El selector no es visible.