Un site Webflow se connecte à Universally avec une seule balise de script dans son code d'en-tête global. La balise affiche 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 et qu'il n'y a pas de DNS à modifier. Le mode de diffusion JavaScript explique comment la traduction fonctionne et ce qu'elle omet.
Avant de commencer
- Un plan Webflow avec du code personnalisé. Le code personnalisé nécessite un plan de site actif ou un espace de travail Core, Growth, Agency ou Freelancer.
- 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 site publié sur votre propre domaine. La vérification de la connexion ne voit que le site publié.
Créer le projet
- Démarrez un nouveau projet. Sous Sélectionnez votre technologie, choisissez Webflow.
- Remplissez Domaine, le nom de domaine complet sur lequel votre site est publié, tel que
example.com. Si le domaine ne résout pas encore, vous verrez un avertissement, et vous pourrez continuer. - Remplissez Nom du projet, vérifiez la Langue source (Anglais (US) par défaut), et cliquez sur Suivant.
Les projets Webflow n'ont pas de mode de diffusion à choisir, donc l'écran suivant est Ajouter l'extrait. Les sous-domaines de langue ne sont pas encore disponibles pour les sites Webflow : votre site est traduit par l'extrait, 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>
- Cliquez sur Copier la ligne. Cela copie uniquement la balise de script, et le bouton devient Copié.
- Dans Webflow, ouvrez Paramètres du site › Code personnalisé › Code d'en-tête.
- Collez la ligne et enregistrez.
Utilisez le champ global du site, pas le code personnalisé d'une seule page, afin que le script se charge sur chaque page. Les boutons Marquer comme terminé sur l'écran sont stockés dans votre navigateur et ne bloquent rien.
Publier et vérifier la connexion
- Dans Webflow, cliquez sur Enregistrer les modifications, puis sur Publier sur le domaine que vous avez saisi dans Universally. La vérification de la connexion ne voit que le site 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.
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 des langues affiche toujours Format d'URL, mais la valeur n'est pas utilisée sur Webflow car vos URL ne changent jamais. Chaque ligne de langue sur Toutes les langues possède 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 inférieur droit, avec des drapeaux et des noms de langue.
- 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 : la modification n'a pas été enregistrée, ou le site n'a pas été publié depuis. Publiez à nouveau et vérifiez. Une copie mise en cache sur votre hôte ou CDN peut également masquer la ligne pendant un certain temps, et la vérification ne regarde que votre page d'accueil.
- 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.
- Le sélecteur s'affiche mais une partie du texte reste dans la langue source : la page est protégée par un identifiant ou un mot de passe, ou du JavaScript ajoute le texte après le chargement de la page. Voir Mode de diffusion JavaScript.
D'autres cas sont décrits dans Les traductions n'apparaissent pas et Le sélecteur n'est pas visible.