Webflow - Intégration / Configuration

Guide vidéo : Vous voulez une explication rapide et facile sur la façon de configurer votre site Webflow avec Weglot? Consultez notre tutoriel vidéo pour voir comment intégrer Weglot sur votre site web Webflow!

1. Créez un compte Weglot

Ce compte vous permet de visualiser et de gérer toutes vos traductions. Créez simplement un compte Weglot ici.

2. Créez votre projet (~ 1 minute)

Une fois votre compte créé, vous devez créer votre projet. Vous devez lui donner un nom, et sélectionner la technologie de votre site, qui est "Webflow" :

3. Entrer les langues souhaitées (~ 1 minute)

Dans cette étape, vous avez besoin des langues que vous souhaitez.

La langue originale est la langue de votre site web original et la ou les langues traduites sont les langues dans lesquelles vous souhaitez traduire votre site web.

Entrer les détails du site web

**N'AJOUTEZ PAS VOTRE NOM DE DOMAINE TEMPORAIRE se terminant par .webflow.io.

NOTE: Si vous n'avez pas encore acheté votre propre nom de domaine et que vous n'avez qu'un domaine .webflow.io, cliquez sur "Connecter Weglot à votre site web sans lui" si vous êtes encore dans la phase de test de votre site. Vous pourrez ajouter votre nom de domaine plus tard.

Cliquez sur le bouton "Next" pour passer à l'étape suivante.

4. Configurez les sous-domaines dans les enregistrements DNS (~ 5 minutes)

C'est l'étape où vous configurez votre DNS pour créer et connecter les sous-domaines.

Dans la configuration de votre compte Weglot, vous verrez les entrées DNS suivantes à ajouter (Note : cet exemple concerne la configuration de l'anglais) :

Pour les besoins de cet exemple, nous utilisons Google Domains comme notre fournisseur de nom de domaine. La plupart des autres fournisseurs d'hébergement ressembleront à celui-ci. N'hésitez pas à nous contacter à support@weglot.com si vous avez besoin d'aide pour cette étape.

Maintenant, allez sur le compte de votre fournisseur de nom de domaine et sur la section ou la page où vous pouvez gérer le DNS (par exemple, dans Google Domains, il est situé sous un onglet sur la barre de menu de gauche appelé DNS).

À ce stade, vous devriez être en mesure de créer de nouvelles entrées dans la section DNS sur votre écran (dans notre exemple, cela se trouve dans dans la section "Custom resource records"). Sélectionnez CNAME comme type d'entrée.

Inscrivez " en"(pour ceux qui ajoutent l'anglais) dans la section " Nom " et la valeur fournie par Weglot dans la section " Données ".

Si vous avez des problèmes pour trouver ou comment mettre à jour vos enregistrements DNS, nous pouvons vous aider. Il vous suffit de nous écrire à support@weglot.com.

Une fois que vous avez ajouté et sauvegardé les entrées, retournez sur la page Weglot. Vous pouvez cliquer sur "Check DNS" et une icône verte cochée devrait apparaître: cela signifie que tout a été configuré avec succès (Cela peut parfois prendre quelques minutes ou même 10, donc ne soyez pas alarmé si l'icône verte cochée n'est pas encore apparue à côté de votre enregistrement DNS). Cliquez sur "Next".

5. Installez la librairie Weglot (~ 3 minutes)

Il s'agit de l'étape finale, au cours de laquelle vous ajouterez le bouton de changement de langue à votre site Webflow et personnaliserez certains des paramètres de l'application.

C'est simple et rapide, il vous suffit de suivre les étapes suivantes (également illustrées dans le GIF ci-dessous).

Allez sur votre dashboard Webflow, puis, trouvez votre site Web et cliquez sur les 3 points puis cliquez sur "Settings"
Dans la page "Settings", sélectionnez "Custom Code" (le dernier onglet à droite)
Go to “Head Code”, and you should see a field that’s titled “Add code at the end of the <head> tag:”
Copiez-collez le snippet JavaScript qui vous a été fourni sur votre compte Weglot. Il ressemblera à celui qui suit, mais assurez-vous d'ajouter votre clé API réelle au lieu de "YOUR_API_KEY" :

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
    Weglot.initialize({
        api_key: 'YOUR_API_KEY',
    });
</script>

Cliquez sur le bouton vert, "Save Changes".
Publiez vos modifications, en cliquant sur le bouton bleu situé tout en haut à droite

Vous avez terminé!

C'est fait! Allez sur votre site web, et vous verrez le bouton de changement de langue apparaître tout en bas à droite. Attendez quelques minutes pour s'assurer que vos sous-domaines sont correctement configurés, puis essayez de changer la langue et vous verrez vos pages traduites.

Bonus : nous avons créé quelques boutons de langue Webflow que vous pouvez cloner et ajouter à votre site web ! Découvrez-les sur notre kit d'interface Webflow par Finsweet et sur Weglot Components par Digidop.