Configurer un sélecteur de langue sur le site Bubble.io peut faciliter le changement de langue pour les utilisateurs. Cette fonctionnalité est particulièrement précieuse pour les applications ayant une audience mondiale, permettant aux utilisateurs d'interagir avec la plateforme dans leur langue préférée. Bubble.io, une plateforme de développement no-code populaire, offre des capacités de localisation intégrées qui permettent aux développeurs de créer des applications multilingues sans connaissances approfondies en codage.
Pour implémenter un sélecteur 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 la langue. Dans cet article, nous aborderons la configuration d'un sélecteur de langue sur Bubble.io avec l'un des sites de services de traduction automatique.
Pourquoi un sélecteur de langue est-il important sur le site Bubble.io ?
Ajouter un sélecteur de langue sur un site web n'est pas sans raison. Voici pourquoi vous devez en mettre un en place sur un site Bubble .
- Facilite l'accès pour les utilisateurs d'autres pays : Un sélecteur de langue permet aux utilisateurs internationaux de consulter le site web dans leur langue maternelle. Par exemple, un utilisateur hispanophone visitant une boutique en ligne peut passer à l'espagnol, ce qui facilite la compréhension des détails des produits et la finalisation des 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 site Bubble.io peut mieux se classer dans les recherches en langues étrangères. Par exemple, une version française de votre site a plus de chances d'apparaître dans les recherches Google en français. Cette meilleure visibilité peut augmenter considérablement le trafic international.
- Augmentez la conversion des ventes : Proposer du contenu en plusieurs langues peut stimuler les ventes. Une plateforme de cours en ligne permettant aux utilisateurs de changer de langue peut attirer un public plus large et augmenter les inscriptions. Cette approche est efficace car les consommateurs sont plus susceptibles d'acheter sur des sites web qui fournissent des informations dans leur langue maternelle, ce qui impacte directement 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
Maintenant que nous comprenons l'importance de changer de langue sur les sites web multilingues Bubble.io, discutons de la manière de le mettre en œuvre. Les services de traduction de sites web proposent généralement cette fonctionnalité, qui peut être adaptée aux besoins de l'utilisateur.
Cependant, tous les services de traduction ne proposent pas des sélecteurs de langue personnalisables et conviviaux. Par conséquent, il est très important de choisir un service de traduction automatique compatible avec divers frameworks et offrant des fonctionnalités flexibles de changement de langue.
Un service de traduction automatique qui répond à ces critères est Linguise. Linguise la traduction automatique 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.
Linguise offre une intégration transparente avec Bubble, permettant aux développeurs d'intégrer facilement le changement de langue dans leurs applications multilingues. En tirant parti des fonctionnalités avancées et de l'interface conviviale d' Linguise, vous pouvez simplifier la configuration et la maintenance des sélecteurs de langue sur votre site web Bubble .
Voici les étapes pour installer Linguise sur un site Bubble.io et configurer le sélecteur de langue.
Étape 1 : Créer un compte Linguise
Commencez par créer un compte Linguise gratuit et ajouter le domaine de votre site. Vous pouvez profiter de l'essai gratuit de 30 jours avant de choisir un plan d'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 l'ajout automatique des enregistrements DNS, cliquez sur « Connectez votre DNS automatiquement. » Cette fonctionnalité, appelée Entri, simplifie le processus d'installation en gérant les enregistrements DNS à votre place. 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.
Ensuite, cliquez sur « Autoriser avec [votre fournisseur de domaine] » (par exemple, Cloudflare). Cette action vous redirige vers la page de connexion de votre fournisseur de domaine, où vous pouvez vous connecter et continuer.
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 l'autorisation, Entri vous informera que tous les paramètres DNS ont été configurés avec succès. La fonction de traduction devrait être utilisable une fois que toutes les entrées DNS se sont propagées sur votre domaine, ce qui prend généralement 20 à 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 la configuration DNS de votre Bubble.io.
Ensuite, accédez à votre gestionnaire de domaine et rendez-vous dans la zone 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 au DNS de votre domaine, cliquez sur le bouton « Vérifier la configuration DNS » pour vérifier la propagation DNS.
La validation DNS prend généralement entre 30 minutes et 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 Bubble.io ; il ne reste plus qu'à créer le lien vers le sélecteur de langue avec les drapeaux des pays.
Étape 5 : Activer le sélecteur de langue
Le sélecteur de langue est une fenêtre contextuelle avec drapeaux qui permet aux utilisateurs de choisir 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 du domaine, dans l'en-tête des pages de votre site Bubble.io. Le sélecteur de langue à drapeaux apparaîtra alors automatiquement sur votre site web public.
Ensuite, rendez-vous sur le panneau de votre site Bubble . Cliquez sur « Paramètres » dans le menu de la barre latérale gauche et sélectionnez « SEO / métabalises ».
Faites défiler jusqu'à « Script/meta tags in header » sous « Advanced Settings. » Collez le script Linguise que vous avez copié précédemment, puis cliquez sur « Save » et publiez votre site.
Étape 5 : Configurer l’écran principal
Pour commencer à configurer le sélecteur de langue, rendez-vous dans la section « Paramètres » > « Affichage des drapeaux de langue » du tableau de bord Linguise . Sur cette page, vous pouvez ajuster plusieurs paramètres
- Style d'icône de drapeau : Choisissez parmi trois options : affichage côte à côte, menu déroulant ou popup.
- 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 le design du drapeau
Après avoir configuré l'affichage principal, personnalisez davantage le design des drapeaux qui seront affichés.
- Afficher le nom de la langue : 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 comportant 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 la langue : Choisissez la couleur de texte par défaut pour afficher le nom de la langue.
- Couleur de la langue du popup : Définissez la couleur du texte du titre de la langue dans la zone de popup ou de menu déroulant.
- Taille du drapeau : Ajustez la taille des icônes de drapeau.
- Couleur du texte au survol du nom de la langue : Définissez la couleur du texte qui apparaît lorsque l'utilisateur survole le nom de la langue.
- Couleur de survol du titre de la fenêtre contextuelle : Définissez la couleur du texte qui apparaît lorsque l'utilisateur survole le titre de la langue dans la fenêtre contextuelle ou la zone de liste déroulante.
Étape 8 : Définition de l'ombre portée du cadre du drapeau
Enfin, vous pouvez ajuster les paramètres d'ombre de la boîte du drapeau. La première option vous permet d'appliquer un effet d'ombre à chaque icône de drapeau affichée sur votre site web. L'option suivante contrôle l'effet d'ombre lorsque les utilisateurs survolent les drapeaux de langue avec leur souris.
Une fois que vous avez effectué tous les ajustements souhaités, cliquez sur le bouton Enregistrer pour appliquer les modifications de personnalisation. Ensuite, visitez votre site Bubble pour vérifier que la configuration a bien été appliquée. Voici comment le sélecteur de langue apparaîtra.
Après la configuration, vous pouvez voir comment le sélecteur 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 sélecteur de langue sur Bubble.io
Après avoir configuré avec succès le sélecteur de langue sur un site web multilingue Bubble , il est important de prendre en compte des conseils pour optimiser le sélecteur de langue, tant pour votre site que pour vos visiteurs.
Utilisez un logo de drapeau linguistique facilement identifiable
Lorsque vous mettez en place un sélecteur de langue sur votre site Bubble.io, il est essentiel d'utiliser des drapeaux ou des icônes de langue facilement reconnaissables. 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 comme représentant les options de langue. Vous pouvez également utiliser des drapeaux de pays, mais sachez que cela peut parfois poser problème, 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 à côté de la langue actuellement sélectionnée (par exemple, « EN ») dans la barre de navigation supérieure. Cette approche simple mais efficace permet aux utilisateurs de localiser rapidement les options de langue, quel que soit leur paramètre de langue actuel.
Intégrez les noms des langues à côté des drapeaux
Bien que les drapeaux puissent être utiles, ils ne devraient pas être utilisés seuls. Indiquer le nom de la langue dans son écriture native à côté du drapeau ou de l'icône apporte de la clarté et évite toute confusion potentielle. Cela est particulièrement important pour les langues parlées dans plusieurs pays ou régions.
Exemple : Le sélecteur de langue sur le site web d'Airbnb affiche le nom de la langue et le drapeau du pays. Par exemple, il affiche « English (US) » avec le drapeau américain, et « Français » avec le drapeau français. Cette combinaison permet aux utilisateurs d'identifier précisément leur option de langue préférée.
Positionnez le bouton de sélection de langue avec soin
Le placement de votre sélecteur de langue est essentiel pour l'accessibilité des utilisateurs. Les emplacements courants incluent le coin supérieur droit de l'en-tête, dans le pied de page, ou dans le menu de navigation principal. L'essentiel est de le rendre facilement repérable sans encombrer la zone de contenu principale.
Exemple : Sur le site web tiffany.com, le sélecteur de langue se trouve dans le coin inférieur droit de la page, toujours visible et accessible. Ce placement cohérent garantit que les utilisateurs peuvent trouver et utiliser rapidement les options de langue, quel que soit l'endroit où ils se trouvent sur le site.
Concevez le sélecteur de langue pour qu'il soit responsive
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 le design – par exemple, en utilisant un menu déroulant au lieu d'une liste d'options horizontale.
Exemple : Le sélecteur de langue du site 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 compromettre la mise en page mobile.
Assurez la cohérence du sélecteur de langue sur toutes les pages
Conservez le même design, les mêmes fonctionnalités et la même position pour votre sélecteur de langue sur toutes les pages de votre site Bubble.io. Cette cohérence aide les utilisateurs à naviguer plus efficacement sur votre site, car ils savent exactement où trouver les options de langue, quelle que soit la page sur laquelle ils se trouvent.
Exemple : Le site web conserve son sélecteur de langue de manière cohérente dans le pied de page sur toutes les pages, de la page accueilà l'accueil aux pages produit et au processus de paiement. Cette cohérence garantit que les utilisateurs peuvent facilement changer de langue à tout moment pendant leur navigation ou leur expérience d'achat.
Configurez 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. Lire le 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 considérablement améliorer l'expérience utilisateur. Inscrivez-vous pour un compte Linguise , intégrez-le à votre site Bubble.io, et personnalisez le sélecteur de langue pour améliorer l'expérience utilisateur.
