Un projet Lovable se connecte à Universally avec une seule balise de script dans le <head> partagé que chaque page rend. Vous pouvez demander à Lovable de l'ajouter avec une invite, ou la coller vous-même en mode Code. La balise rend le sélecteur de langue et traduit chaque page dans le navigateur du visiteur, de sorte que vos URL restent les mêmes dans chaque langue sans avoir à changer de DNS. Le mode de service JavaScript explique comment la traduction fonctionne et ce qu'elle omet.
Avant de commencer
- Un projet rendu côté serveur. Vos pages publiées doivent inclure leur texte dans le HTML envoyé par le serveur. Le contenu rendu uniquement dans le navigateur, comme dans une application Vite rendue côté client, n'est pas encore pris en charge.
- Le rôle Propriétaire ou Administrateur dans votre espace de travail Universally, pour créer le projet et voir son extrait. Les éditeurs voient "Demander à un administrateur de projet l'extrait d'installation de ce projet." au lieu de la ligne.
- Un projet publié sur votre propre domaine. La vérification de la connexion ne voit que ce qui est publié.
Créer le projet
- Démarrez un nouveau projet. Sous Sélectionnez votre technologie, choisissez Lovable.
- Remplissez Domaine, le nom de domaine complet sur lequel votre projet est publié, par exemple
example.com. Si le domaine ne résout pas encore, vous verrez un avertissement, et vous pourrez toujours continuer. - Remplissez Nom du projet, vérifiez la Langue source (Anglais (US) par défaut), et cliquez sur Suivant.
Les projets Lovable n'ont pas de mode de service à choisir, donc l'écran suivant est Ajouter le fragment. Les sous-domaines de langue ne sont pas encore disponibles pour les sites Lovable : votre site est traduit par le fragment, sur ses propres adresses.
Ajouter l'extrait
L'étape Ajouter l'extrait dessine votre ligne à l'intérieur d'une page d'exemple. Le tableau de bord remplit la clé de votre projet :
<script src="https://scripts.universally.com/p/YOUR_PUBLIC_KEY/s.js" async></script>
Demandez à Lovable de l'ajouter. Cliquez sur Copier l'invite, ouvrez votre projet dans Lovable et collez l'invite dans le chat. Cela utilise un crédit Lovable. L'invite se termine par votre ligne :
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 collez-le vous-même en mode Code. Sur un plan Lovable payant, cliquez sur Copier la ligne, passez en mode Code et placez la ligne dans le <head> de votre application dans la mise en page racine partagée ou le document utilisé pour rendre chaque page. Aucun crédit n'est dépensé.
Les boutons Marquer comme terminé sur l'écran sont stockés dans votre navigateur et ne bloquent rien.
Publier et vérifier la connexion
- Publiez votre projet dans Lovable. L'aperçu n'est pas le site publié, et la vérification ne voit que ce qui est publié.
- De retour dans Universally, cliquez sur Vérifier la connexion.
La vérification charge votre page d'accueil et recherche la ligne. Trouvé signifie que la ligne est sur votre domaine, qu'elle appartient à ce projet et qu'il n'y a rien d'autre à installer. Vérifier la connexion confirme que le script est installé. Il ne vérifie pas si votre contenu peut être traduit.
Rien ne change encore pour vos visiteurs. La ligne charge uniquement le fichier Universally, et votre site commence à servir les traductions une fois que vous ajoutez des langues à l'étape suivante.
Continuer et Je le ferai plus tard mènent tous deux à Ajouter des langues, et rien n'attend la vérification. La ligne reste sur la page Configuration du projet, sous La ligne dont votre site a besoin.
Ajouter des langues
- Sur Ajouter des langues, répondez à « Dans quelles langues souhaitez-vous traduire ? » par au moins une langue cible.
- Cliquez sur Terminer. Il reste désactivé jusqu'à ce que le projet ait une langue.
La boîte de dialogue de langue affiche toujours Format d'URL, mais la valeur n'est pas utilisée sur Lovable car vos URL ne changent jamais. Chaque ligne de langue sur Toutes les langues a un interrupteur En direct. Voir Ajouter et supprimer des langues.
Vérifier que cela a fonctionné
- Ouvrez votre site publié dans une fenêtre privée. Un visiteur pour la première fois est automatiquement associé à la langue de son navigateur, donc un navigateur configuré dans l'une de vos langues cibles verra la page traduite.
- Trouvez le sélecteur de langue dans le coin supérieur droit, avec les drapeaux et les noms des langues.
- Choisissez une langue. La page se recharge dans cette langue, à la même adresse.
Pour voir quelle partie d'une page a été traduite, ajoutez ?uni_debug=1 à son URL et ouvrez la console du navigateur.
Si cela ne fonctionne pas
- Nous avons chargé votre domaine mais la ligne n'était pas dans la page : le changement n'a pas été publié, ou la ligne est allée ailleurs que dans le
<head>partagé. Publiez et revérifiez. La vérification ne regarde que votre page d'accueil. - Trouvé, mais la page reste dans la langue source : le texte n'est rendu que dans le navigateur, il n'est donc pas dans le HTML que le serveur envoie. Ce n'est pas encore pris en charge.
- Cette ligne appartient à un autre projet : la ligne d'un autre projet se trouve sur le site. Remplacez-la par la ligne de la page Configuration de ce projet, puis vérifiez à nouveau.
- Aucun sélecteur n'apparaît : le projet n'a pas encore de langue cible en ligne. Ajoutez-en une ou activez son interrupteur En ligne.
D'autres cas sont décrits dans Les traductions n'apparaissent pas et Le sélecteur n'est pas visible.