Setting a language switcher on the Bubble.io website can make it easier for users to switch languages. This feature is particularly valuable for applications with a global audience, allowing users to interact with the platform in their preferred language. Bubble.io, a popular no-code development platform, offers built-in localization capabilities that enable developers to create multilingual applications without extensive coding knowledge.
Pour mettre en œuvre un commutateur de langue dans Bubble.io, les développeurs commencent généralement par définir les langues qu'ils souhaitent prendre en charge dans les paramètres de l'application. Ils créent ensuite un élément de liste déroulante ou de bouton avec lequel les utilisateurs peuvent interagir pour changer de langue. Dans cet article, nous allons discuter de la configuration d'un commutateur de langue sur Bubble.io avec l'un des sites Web de service de traduction automatique.
Pourquoi un sélecteur de langue est-il important sur le site web Bubble.io ?
Ajouter un sélecteur de langue sur un site web n'est pas sans raison. Voici pourquoi vous devez en configurer un sur un site web Bubble .
- Facilite l'accès au site pour les utilisateurs étrangers : un sélecteur de langue permet aux utilisateurs internationaux de consulter le site web dans leur langue maternelle. Par exemple, un utilisateur espagnol visitant une boutique en ligne peut passer à l'espagnol, ce qui lui permettra de mieux comprendre les détails des produits et de finaliser ses achats. Les études de CSA Research montrent que 76 % des acheteurs en ligne préfèrent acheter des produits lorsque les informations sont disponibles dans leur langue, ce qui souligne l'importance de cette fonctionnalité pour le confort et l'accessibilité des utilisateurs.
- Optimiser le site web dans les résultats de recherche d'autres pays : Avec un sélecteur de langue, votre Bubble.io peut mieux se positionner dans les recherches en langue étrangère. Par exemple, une version française de votre site est plus susceptible d'apparaître dans les recherches Google en français. Cette visibilité améliorée peut considérablement augmenter le trafic international.
- Augmentez vos conversions : proposer du contenu en plusieurs langues peut dynamiser vos ventes. Une plateforme de cours en ligne permettant aux utilisateurs de changer de langue peut attirer un public plus large et accroître le nombre d’inscriptions. Cette approche est efficace car les consommateurs sont plus enclins à acheter sur des sites web qui fournissent des informations dans leur langue maternelle, ce qui a un impact direct sur vos taux de conversion.
- Amélioration de l'engagement et de la fidélisation des utilisateurs : Un sélecteur de langue permet de prolonger la visite des utilisateurs sur votre site. Par exemple, les utilisateurs qui interagissent dans leur langue préférée sur une application de réseau social ont tendance à rester plus longtemps engagés. Cet engagement accru est significatif, car les utilisateurs passent généralement deux fois plus de temps sur les sites dans leur langue maternelle que sur ceux dans une langue étrangère, ce qui favorise une meilleure fidélisation.
Comment configurer un sélecteur de langue sur Bubble.io
Now that we understand the importance of switching languages on multilingual Bubble.io websites, let’s discuss how to implement it. Website translation services usually offer this feature, which can be tailored to the user’s needs.
Cependant, tous les services de traduction ne proposent pas de sélecteurs de langue personnalisables et conviviaux. Il est donc essentiel de choisir un service de traduction automatique compatible avec différents frameworks et offrant des fonctionnalités de changement de langue flexibles.
Un service de traduction automatique qui répond à ces critères est Linguise. La traduction automatique de Linguise offre une fonctionnalité de changement de langue hautement personnalisable et facile à utiliser qui s'intègre aux CMS et aux constructeurs de sites Web populaires comme Bubble.io
Linguisefournit une intégration transparente avec Bubble , permettant aux développeurs d'incorporer facilement la commutation de langue dans leurs applications multilingues. En tirant parti des fonctionnalités avancées et de l'interface conviviale de Linguise, vous pouvez simplifier la configuration et la maintenance des sélecteurs de langue sur votre site.
Voici les étapes pour installer Linguise sur un site Web Bubble.io et configurer le commutateur de langue.
Étape 1 : Enregistrer un compte Linguise
Commencez par créer un compte Linguise et ajoutez le nom de domaine de votre site web. Vous pouvez profiter de l'essai gratuit de 30 jours avant de choisir un abonnement.
Ensuite, vous devrez enregistrer votre domaine pour autoriser la traduction. Copiez votre nom de domaine, y compris « https:// », et sélectionnez « Autre » comme plateforme.
Ensuite, sélectionnez vos langues source et cible.
Étape 2 : Ajout automatique du DNS via Entri
Après avoir enregistré votre site web sur le tableau de bord Linguise , vous aurez deux options d'installation.
Pour ajouter automatiquement les enregistrements DNS, cliquez sur « Connecter votre DNS automatiquement ». Cette fonctionnalité, appelée Entri, simplifie l'installation en gérant les enregistrements DNS pour vous. Vous pouvez également copier manuellement les enregistrements DNS chez votre fournisseur de domaine.
Cliquer sur ce bouton invite Entri à analyser l'URL de votre site web enregistré et à examiner vos enregistrements DNS publics, en identifiant le fournisseur et les enregistrements DNS nécessaires.
Cliquez ensuite sur « Autoriser avec [votre fournisseur de domaine] » (par exemple, Cloudflare). Vous serez alors redirigé vers la page de connexion de votre fournisseur de domaine, où vous pourrez vous connecter et poursuivre.
Une fois connecté, Entri ajoutera automatiquement les enregistrements DNS appropriés à votre domaine : un DNS par langue et un DNS TXT pour la clé de validation.
Après autorisation, Entri vous informera que tous les paramètres DNS ont été configurés avec succès. La fonction de traduction sera disponible une fois que toutes les entrées DNS auront été propagées sur votre domaine, ce qui prend généralement entre 20 et 30 minutes.
Pour une installation manuelle, vous pouvez suivre les étapes ci-dessous.
Étape 3 : Copier les enregistrements DNS
Pour une installation manuelle, vous serez redirigé vers un écran affichant les enregistrements DNS nécessaires à la configuration de vos pages multilingues, tels que fr.domain.com ou es.domain.com.
Copiez ces éléments dans votre configuration DNS Bubble.io.
Ensuite, accédez à votre gestionnaire de domaine et rendez-vous dans la section de configuration DNS. Suivez les instructions pour copier :
- Un enregistrement TXT pour la vérification du domaine
- Un ou plusieurs enregistrements CNAME pour les langues
Voici des exemples pour chaque type d'enregistrement (TXT et CNAME).
Une fois que vous avez ajouté tous vos enregistrements, votre configuration devrait ressembler à ceci.
Étape 4 : Vérifier le DNS
Après avoir ajouté tous vos enregistrements à votre DNS de domaine, cliquez sur le bouton « Vérifier la configuration DNS » pour vérifier la propagation DNS.
La validation DNS prend généralement environ 30 minutes à 1 heure. Une fois terminée, vous devriez voir des indicateurs verts à côté de la liste DNS dans le tableau de bord Linguise . Vous êtes presque prêt à traduire votre site web Bubble.io ; il ne vous reste plus qu'à lier le sélecteur de langue avec des drapeaux de pays.
Étape 5 : Activer et sélecteur de langue
Le sélecteur de langue est une popup de drapeau qui permet aux utilisateurs de sélectionner leur langue préférée. Pour l'implémenter, copiez le code fourni à la fin du processus d'enregistrement de domaine ou dans les paramètres de domaine dans l'en-tête de vos pages de site Bubble.io. Le sélecteur de langue de drapeau apparaîtra alors automatiquement sur votre site web public.
Ensuite, accédez à votre panneau de site Web Bubble. Cliquez sur ‘Paramètres’ dans le menu latéral gauche et sélectionnez “SEO / métadonnées.”
Faites défiler vers le bas jusqu'à « Balises script/méta dans l'en-tête » sous « Paramètres avancés ». Collez le Linguise que vous avez copié précédemment, puis cliquez sur « Enregistrer » et publiez votre site.
Étape 5 : Configurer l’écran principal
Pour configurer le sélecteur de langue, accédez à la « Paramètres » > « Affichage des indicateurs de langue » du Linguise . Sur cette page, vous pouvez ajuster plusieurs paramètres.
- Style de l'icône du drapeau : Choisissez parmi trois options : affichage côte à côte, menu déroulant ou fenêtre contextuelle.
- Position : Choisissez l’emplacement du sélecteur de langue sur votre site. Plusieurs options sont disponibles ; assurez-vous qu’il soit facilement accessible aux visiteurs.
Vous pouvez afficher à la fois les drapeaux et les noms des langues, les drapeaux et leurs abréviations, ou uniquement les noms des langues. L'utilisation conjointe des drapeaux et des noms des langues est recommandée pour faciliter la reconnaissance par l'utilisateur.
Étape 6 : Définir la conception du drapeau
Après avoir configuré l'affichage principal, personnalisez davantage le design des drapeaux qui seront affichés.
- Nom de la langue affichée : Vous pouvez choisir d’afficher le nom de la langue en fonction du nom du pays ou du nom de la langue elle-même. Par exemple, vous pouvez afficher « French » ou « Français ».
- Type de drapeau anglais : Cette option est utile pour les langues présentant plusieurs variantes, comme l’anglais américain ou britannique (et s’applique également à l’espagnol, au taïwanais, à l’allemand et au portugais).
- Style du drapeau : Choisissez la forme de l’icône du drapeau, ronde ou rectangulaire.
Étape 7 : Personnaliser la couleur et la taille
Après avoir configuré le design du drapeau, vous pouvez personnaliser davantage sa couleur et sa taille. Voici les paramètres que vous pouvez ajuster :
- Rayon de bordure du drapeau : Personnalisez le rayon en pixels pour le style de drapeau rectangulaire.
- Couleur du nom de langue : Choisissez la couleur de texte par défaut pour afficher le nom de la langue.
- Couleur de langue du popup : Définissez la couleur du texte du titre de langue dans la zone de popup ou de liste déroulante.
- Taille du drapeau : Ajustez la taille des icônes de drapeau.
- Couleur du nom de la langue au survol : définissez la couleur du texte qui apparaît lorsque l’utilisateur survole le nom de la langue.
- Couleur de survol de la langue du popup : Définissez la couleur du texte qui apparaît lorsque l'utilisateur survole le titre de la langue dans la zone de popup ou de liste déroulante.
Étape 8 : Définition de l’ombre portée du drapeau
Enfin, vous pouvez ajuster les paramètres d'ombre des drapeaux. La première option permet d'appliquer un effet d'ombre à chaque icône de drapeau affichée sur votre site web. La seconde option contrôle l'effet d'ombre lorsque les utilisateurs survolent les drapeaux de langue avec leur souris.
Once you’ve made all the desired adjustments, click the Save button to apply the customization changes. Then, visit your Bubble website to verify the configuration has been successfully applied. This is how the language switcher will appear.
Après la configuration, vous pouvez voir comment le commutateur de langue fonctionne sur votre site web multilingue Bubble .
Ensuite, vous pouvez traduire le site web dans d'autres langues comme l'espagnol.
Meilleures pratiques pour optimiser le commutateur de langue sur Bubble.io
Après avoir configuré avec succès le commutateur de langue sur un site web multilingue Bubble , il est important de prendre en compte les conseils pour optimiser le commutateur de langue pour votre site et vos visiteurs.
Utilisez un logo de drapeau linguistique facilement identifiable
Lors de la mise en œuvre d'un commutateur de langue sur votre site web Bubble.io, l'utilisation de drapeaux ou d'icônes de langue facilement reconnaissables est cruciale. Ces repères visuels aident les utilisateurs à identifier et à sélectionner rapidement leur langue préférée. Par exemple, une icône de globe est universellement comprise pour représenter les options de langue. Vous pouvez également utiliser des drapeaux de pays, mais soyez conscient que cela peut parfois être problématique car les langues ne sont pas toujours liées à un seul pays.
Exemple : Le site web d’Amazon utilise une petite icône de globe terrestre à côté de la langue actuellement sélectionnée (par exemple, « EN ») dans la barre de navigation supérieure. Cette approche simple et efficace permet aux utilisateurs de trouver rapidement les options de langue, quelle que soit la langue sélectionnée.
Incorporer les noms des langues à côté des drapeaux
Bien que les drapeaux puissent être utiles, ils ne doivent pas être utilisés seuls. Indiquer le nom de la langue dans son alphabet d'origine à côté du drapeau ou de l'icône apporte de la clarté et évite toute confusion. Ceci est particulièrement important pour les langues parlées dans plusieurs pays ou régions.
Exemple : Le sélecteur de langue du site Airbnb affiche le nom de la langue et le drapeau du pays. Par exemple, « English (US) » est accompagné du drapeau américain, et « Français » du drapeau français. Cette combinaison permet aux utilisateurs d’identifier précisément la langue qu’ils préfèrent.
Positionnez judicieusement le bouton de changement de langue
L'emplacement du sélecteur de langue est crucial pour l'accessibilité. Il se trouve généralement en haut à droite de l'en-tête, dans le pied de page ou dans le menu de navigation principal. L'important est qu'il soit facilement repérable sans encombrer la zone de contenu principale.
Exemple : Sur le site web tiffany.com, le sélecteur de langue se trouve en bas à droite de la page, toujours visible et accessible. Cet emplacement constant permet aux utilisateurs de trouver et d’utiliser rapidement les options de langue, quelle que soit leur position sur le site.
Concevez le sélecteur de langue pour qu'il soit réactif
Assurez-vous que votre sélecteur de langue fonctionne correctement sur tous les appareils, des ordinateurs de bureau aux smartphones. Sur les petits écrans, vous devrez peut-être adapter la présentation ; par exemple, en utilisant un menu déroulant plutôt qu’une liste horizontale d’options.
Exemple : Le sélecteur de langue du site web de l’UNESCO s’adapte parfaitement à tous les appareils. Sur ordinateur, il apparaît sous forme de liste horizontale dans l’en-tête. Sur mobile, il se transforme en un menu déroulant compact, garantissant une utilisation optimale sans perturber la mise en page.
Assurez-vous que le commutateur de langue est cohérent sur toutes les pages
Maintain the same design, functionality, and position of your language switcher across all pages of your Bubble.io website. This consistency helps users navigate your site more efficiently, as they know exactly where to find the language options regardless of their current page.
Exemple : Le site web maintient son commutateur de langue de manière cohérente dans le pied de page sur toutes les pages, de la page accueil aux pages de produits et au processus de paiement. Cette cohérence garantit que les utilisateurs peuvent facilement changer de langue à tout moment pendant leur expérience de navigation ou de shopping.
Configurer un sélecteur de langue sur le site web multilingue Bubble à l'aide de Linguise!
Maintenant, vous comprenez déjà comment sélectionner la langue pour le site web multilingue Bubble.io. La lecture du sélecteur de langue peut offrir divers avantages et conduire à une optimisation basée sur les points mentionnés précédemment.
Optimiser efficacement le sélecteur de langue peut améliorer considérablement l'expérience utilisateur. Inscrivez-vous pour un Linguise compte, intégrez-le à votre Bubble.io site web, et personnalisez le sélecteur de langue pour améliorer l'expérience utilisateur.
