Le sélecteur de langue ne s’affiche plus sur votre site Webflow avec Localize : que faire ?
Diagnostiquer et corriger rapidement le problème
Points clés :
- Le sélecteur de langue Localize peut disparaître après une mise à jour Webflow ou un conflit de script.
- Le problème est souvent lié à une erreur d’intégration ou à un script manquant.
- Il existe des solutions simples pour rétablir son affichage sans perdre vos paramètres linguistiques.
Le sélecteur de langue est un élément essentiel pour un site hôtelier multilingue. Il permet à vos visiteurs de basculer facilement entre les langues et améliore leur expérience globale. Si celui-ci n’apparaît plus sur votre site Webflow, voici les étapes à suivre pour le rétablir.
Étape 1 : Vérifier le code d’intégration Localize
- Connectez-vous à votre projet Webflow.
Allez dans Project Settings → Custom Code → Before </body> tag.
Vérifiez que le script Localize est bien présent :
<script src="https://global.localizecdn.com/localize.js"></script>
<script>
Localize.initialize({
key: 'YOUR_PROJECT_KEY',
rememberLanguage: true,
detectLanguage: true
});
</script>
- Si le script a disparu ou a été modifié, copiez-le à nouveau depuis votre tableau de bord Localize :
- Connectez-vous à Localize.
- Accédez à Settings → Install Instructions.
- Copiez le code complet et collez-le dans Webflow avant la balise </body>.
- Connectez-vous à Localize.
- Enregistrez et republiez votre site Webflow.
💡 Astuce : un oubli lors d’une republication ou d’une mise à jour du code custom est souvent la cause du problème.
Étape 2 : Vérifier le positionnement du sélecteur
- Connectez-vous à votre tableau de bord Localize.
Allez dans Settings → Language Selector. - Vérifiez le mode d’affichage :
- Floating Widget (flottant en bas à droite ou à gauche).
- Embedded Selector (intégré manuellement dans le design Webflow).
- Floating Widget (flottant en bas à droite ou à gauche).
- Si le widget est activé mais invisible, il peut être masqué par un autre élément du site (header, menu, z-index trop élevé).
💡 Astuce : utilisez l’inspecteur de votre navigateur (clic droit → “Inspecter l’élément”) pour vérifier si le sélecteur est présent dans le code mais caché par le style.
Étape 3 : Vérifier le CSS et la mise en page
- Dans le Designer Webflow, recherchez les éléments qui pourraient masquer le sélecteur (par ex. un bloc div pleine largeur avec un z-index supérieur).
- Si vous utilisez un footer sticky ou une barre de cookies, déplacez temporairement ces éléments pour tester.
Vous pouvez aussi ajouter un petit code CSS pour forcer son affichage :
.localize-language-selector {
z-index: 9999 !important;
display: block !important;
}
💡 Astuce : le problème est souvent visuel, pas fonctionnel. Le sélecteur existe dans le code, mais il est caché.
Étape 4 : Vérifier les paramètres de langue dans Localize
- Allez dans Settings → Languages.
- Assurez-vous qu’au moins deux langues sont activées.
- Si vous avez supprimé une langue récemment, le sélecteur peut se désactiver automatiquement.
- Activez à nouveau les langues nécessaires et sauvegardez.
💡 Astuce : sans langue secondaire active, le sélecteur disparaît automatiquement.
Étape 5 : Tester sur un navigateur vierge
- Ouvrez votre site dans un navigateur privé (incognito).
- Effacez le cache et rechargez la page.
- Testez sur mobile et sur ordinateur.
💡 Astuce : certains navigateurs peuvent bloquer les scripts tiers, surtout en navigation privée avec bloqueurs d’annonces.
Étape 6 : Réinitialiser le widget Localize (en dernier recours)
- Connectez-vous à Localize.
- Allez dans Settings → Language Selector → Reset Widget.
- Choisissez un nouveau style de widget, sauvegardez et republiez votre site Webflow.
💡 Cela recrée le sélecteur sans perdre vos langues ni vos traductions.
Bonnes pratiques pour les hôtels
- Vérifiez le sélecteur après chaque mise à jour Webflow.
- Conservez une copie du code Localize original dans vos documents internes.
- Si vous avez personnalisé le design du sélecteur, testez-le dans toutes les résolutions d’écran avant de republier.