Un site Framer se connecte à Universally avec une seule balise de script ajoutée dans le code personnalisé du site. 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 forfait Framer payant. Le code personnalisé en nécessite un.
- 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 Framer.
- 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 Framer n'ont pas de mode de diffusion à choisir, donc l'écran suivant est Ajouter le snippet. Les sous-domaines de langue ne sont pas encore disponibles pour les sites Framer : votre site est traduit par le snippet, 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 Framer, ouvrez Paramètres du site › Code › Ajouter.
- Définissez Placement sur Début de
<head>, Pages sur Toutes, et Exécuter sur Une fois. - Collez la ligne et enregistrez.
Pages : Toutes est ce qui fait 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
- Cliquez sur Publier dans Framer. La vérification 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 de langue affiche toujours Format d'URL, mais la valeur est inutilisée sur Framer 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.
- Naviguez entre quelques pages publiées. Chacune est traduite, et il y a un seul sélecteur sur chaque page.
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.