d' un sélecteur de langue sur le Bubble facilite le changement de langue pour les utilisateurs. Cette fonctionnalité est particulièrement précieuse pour les applications destinées à un public international, permettant aux utilisateurs d'interagir avec la plateforme dans leur langue préférée. Bubble , une plateforme de développement no-code populaire, offre des fonctionnalités de localisation intégrées qui permettent aux développeurs de créer des applications multilingues sans connaissances approfondies en programmation.
Pour intégrer un sélecteur de langue à Bubble, les développeurs commencent généralement par définir les langues à prendre en charge dans les paramètres de l'application. Ils créent ensuite un menu déroulant ou un bouton permettant aux utilisateurs de changer de langue. Cet article explique comment configurer un sélecteur de langue sur Bubbleà l'aide d'un service de traduction automatique.
Pourquoi un sélecteur de langue est-il important sur le site web Bubble?
L'ajout d'un sélecteur de langue sur un site web n'est pas anodin. Voici pourquoi vous devriez en configurer un sur un site Bubble .
- Facilite la tâche des 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 espagnol visitant une boutique en ligne peut passer à l'espagnol, ce qui facilite la compréhension des détails du produit et la réalisation 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, soulignant l'importance de cette fonctionnalité pour le confort et l'accessibilité de l'utilisateur.
- Optimisation du référencement à l'international : grâce à un sélecteur de langue, votre Bubble peut améliorer son positionnement 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 résultats de recherche Google en français. Cette visibilité accrue peut augmenter significativement le trafic international.
- Augmentez la conversion des ventes : proposer du contenu dans plusieurs langues peut augmenter 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 fournissant des informations dans leur langue maternelle, ce qui a un impact direct sur vos taux de conversion.
- Améliore l'engagement et la rétention des utilisateurs : un sélecteur de langue peut garder les utilisateurs sur votre site plus longtemps. Par exemple, les utilisateurs qui interagissent dans leur langue préférée sur une application de réseau social ont tendance à rester engagés plus longtemps. 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 seconde langue, ce qui conduit à une meilleure fidélisation des utilisateurs.
Comment configurer un sélecteur de langue sur Bubble
Maintenant que nous comprenons l'importance de la possibilité de changer de langue sur les sites web multilingues Bubble, voyons comment la 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 de sélecteurs de langue personnalisables et conviviaux. Par conséquent, il est très important de choisir un service de traduction automatique compatible avec différents frameworks et offrant des fonctionnalités flexibles de changement de langue.
Linguise est un service de traduction automatique qui répond à ces critères . Il offre une fonctionnalité de changement de langue hautement personnalisable et facile à utiliser, qui Linguise aux systèmes de gestion de contenu et aux outils de création de sites web populaires comme Bubble .
Linguise s'intègre parfaitement à Bubble, permettant aux développeurs d'intégrer facilement le changement de langue à leurs applications multilingues. Grâce aux fonctionnalités avancées et à l'interface intuitive Linguise, vous pouvez simplifier la configuration et la gestion des sélecteurs de langue sur votre site web Bubble .
Voici les étapes à suivre pour installer Linguise sur un site web Bubble et configurer le sélecteur de langue.
Étape 1 : Enregistrez un compte Linguise
Commencez par compte Linguise gratuit et ajoutez le domaine de votre site Web. Vous pouvez utiliser 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 : ajouter automatiquement un DNS à l'aide d'Entri
Après avoir enregistré votre site web sur le tableau de bord Linguise , vous aurez deux options d'installation.
Pour l’ajout automatique d’enregistrements DNS, cliquez sur « Connectez votre DNS automatiquement ». Cette fonctionnalité, appelée Entri, simplifie le processus d'installation en gérant les enregistrements DNS pour vous. Vous pouvez également copier manuellement les enregistrements DNS vers votre fournisseur de domaine.
En cliquant sur le bouton, Entri analyse l'URL de votre site web enregistré et examine vos enregistrements DNS publics, en identifiant le fournisseur et les enregistrements DNS nécessaires.
Ensuite, cliquez sur « Autoriser auprès de [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 (un DNS par langue et un DNS TXT pour la clé de validation) à votre domaine.
Après autorisation, Entri vous informera que tous les paramètres DNS ont été configurés avec succès. La fonctionnalité de traduction devrait être utilisable une fois que toutes les entrées DNS se propagent 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 : Copiez 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, telles que fr.domain.com ou es.domain.com.
Copiez ces éléments dans votre configuration DNS Bubble.
Ensuite, accédez à votre gestionnaire de domaine et accédez à 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érifiez 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, des indicateurs verts s'afficheront à côté de la liste DNS dans le tableau de bord Linguise . Vous êtes presque prêt à traduire votre site web Bubble; il ne vous reste plus qu'à ajouter le lien vers le sélecteur de langue avec les drapeaux des pays.
Étape 5 : Activer et changer de langue
Le sélecteur de langue est une fenêtre contextuelle (avec un drapeau) permettant aux utilisateurs de choisir leur langue préférée. Pour l'intégrer, copiez le code fourni à la fin du processus d'enregistrement de votre domaine ou dans les paramètres de votre domaine, puis collez-le dans l'en-tête des pages de votre site Bubble. Le sélecteur de langue apparaîtra alors automatiquement sur votre site web public.
Ensuite, accédez au panneau de configuration de votre Bubble . Cliquez sur « Paramètres » dans le menu latéral gauche et sélectionnez « SEO / balises méta ».
Faites défiler jusqu'à « Script/balises 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'affichage principal
Pour commencer à configurer le sélecteur de langue, accédez à la « Paramètres » > « Affichage des indicateurs de langue » dans le 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 fenêtre contextuelle.
- Position : sélectionnez l'endroit où le sélecteur de langue apparaîtra sur votre site. Diverses options de poste sont disponibles ; assurez-vous qu'il est facilement accessible aux visiteurs.
Vous pouvez combiner l'affichage des drapeaux et des noms de langues, des drapeaux et des abréviations de langues, ou simplement des noms de langues. Il est recommandé d'utiliser à la fois des indicateurs et des noms de langue pour faciliter la reconnaissance de 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 lui-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, telles que l'anglais américain ou britannique (et s'applique également à l'espagnol, au taïwanais, à l'allemand et au portugais).
- Style de drapeau : choisissez la forme de l'icône du drapeau, ronde ou rectangulaire.
Étape 7 : Personnalisez la couleur et la taille
Après avoir configuré le design du drapeau, vous pouvez personnaliser davantage la couleur et la taille des drapeaux. Voici les paramètres que vous pouvez ajuster :
- Rayon de la bordure du drapeau : personnalisez le rayon en pixels pour le style de drapeau rectangulaire.
- Couleur du nom de la langue : choisissez la couleur du texte par défaut pour afficher le nom de la langue.
- Couleur de la langue contextuelle : définissez la couleur du texte du titre de la langue dans la zone contextuelle ou déroulante.
- Taille du drapeau : Ajustez la taille des icônes du drapeau.
- Couleur de 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 de la langue contextuelle : définissez la couleur du texte qui apparaît lorsque l'utilisateur survole le titre de la langue dans la zone contextuelle ou déroulante.
Étape 8 : Définition de l'ombre de la zone de drapeau
Enfin, vous pouvez ajuster les paramètres d’ombre de la zone de 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 passent leur souris sur les drapeaux de langue.
Une fois tous les réglages souhaités effectués, cliquez sur le bouton Enregistrer pour appliquer les modifications de personnalisation. Ensuite, rendez-vous sur votre site web Bubble pour vérifier que la configuration a bien été prise en compte. Le sélecteur de langue s'affichera alors comme suit.
Une fois la configuration terminée, vous pourrez voir comment fonctionne le sélecteur de langue 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
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 ce sélecteur pour votre site et vos visiteurs.
Utiliser un logo de drapeau linguistique facilement identifiable
Lors de l'intégration d'un sélecteur de langue sur votre site Bubble, il est essentiel d'utiliser des drapeaux ou des icônes de langue facilement reconnaissables. Ces repères visuels permettent aux utilisateurs d'identifier et de sélectionner rapidement leur langue préférée. Par exemple, une icône de globe terrestre est universellement comprise comme représentant les options linguistiques. Vous pouvez également utiliser des drapeaux de pays, mais sachez que cela peut parfois poser problème, car les langues ne sont pas toujours associées à un seul pays.
Exemple : le site Web d'Amazon utilise une petite icône en forme 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.
Incorporer les noms de langues aux côtés des drapeaux
Même si les indicateurs peuvent être utiles, ils ne doivent pas être utilisés seuls. L’inclusion du 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. Ceci 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 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 garantit que les utilisateurs peuvent identifier avec précision leur option linguistique préférée.
Positionnez judicieusement le bouton de changement de langue
L'emplacement 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. La clé est de le rendre facilement détectable sans encombrer la zone de contenu principale.
Exemple : Sur le site 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 linguistiques, quel que soit l'endroit où ils se trouvent sur le site.
Concevoir 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 des écrans plus petits, vous devrez peut-être adapter la conception, par exemple en utilisant un menu déroulant au lieu d'une liste horizontale d'options.
Exemple : le sélecteur de langue du site Web de l'UNESCO s'adapte parfaitement à tous les appareils. Sur le bureau, 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 la convivialité sans compromettre la mise en page mobile.
Assurez-vous que le sélecteur de langue est cohérent sur toutes les pages
Veillez à conserver le même design, les mêmes fonctionnalités et le même emplacement pour votre sélecteur de langue sur toutes les pages de votre site web Bubble. Cette cohérence permet aux utilisateurs de naviguer plus efficacement sur votre site, car ils savent exactement où trouver les options de langue, quelle que soit la page consultée.
Exemple : le site Web conserve son sélecteur de langue de manière cohérente dans le pied de page de toutes les pages, de la accueil aux pages de produits et au processus de paiement. Cette cohérence garantit que les utilisateurs peuvent facilement changer de langue à tout moment au cours de leur expérience de navigation ou d'achat.
Configurez un sélecteur de langue sur le site web multilingue Bubble en utilisant Linguise!
Vous savez désormais comment sélectionner la langue de votre site web multilingue Bubble. Consulter le sélecteur de langue vous apportera de nombreux avantages et vous permettra d'optimiser votre site en vous basant sur les points évoqués précédemment.
Optimiser le sélecteur de langue peut améliorer considérablement l'expérience utilisateur. Créez un Linguise , intégrez-le à votre Bubble et personnalisez le sélecteur de langue pour une expérience utilisateur optimale.
