Autre intégration - Comment changer la position du sélecteur de langue ?

Dans cet article, vous découvrirez comment modifier l'emplacement du sélecteur de langue Weglot si vous utilisez une intégration autre que WordPress ou Shopify.

1. Utilisez le Switcher Editor

L'Switcher Editor e vous permet de déplacer le sélecteur de langue directement sur un aperçu de votre site web en le faisant glisser et en le déposant à l'endroit souhaité.

Pour l'utiliser, suivez notre guide dédié : Comment utiliser l'Switcher Editor?

⚠️ L'Switcher Editor e ne peut être utilisé que sur des sites web en ligne et accessibles au public. Il ne peut pas être utilisé sur des sites web protégés par un mot de passe ou des sites web locaux. L'URL de votre site web doit également être saisie dans vos paramètres Weglot Dashboard > Paramètres > Général.

2. Utiliser des accroches linguistiques

Vous pouvez créer vos propres éléments linguistiques dans le menu natif de votre site web et les relier à Weglot à l'aide de « hooks » de liens linguistiques.

Par exemple, vous pouvez créer un élément de menu « Langues » avec « Anglais » et « Français » comme sous-éléments, et utiliser les liens suivants :

• Anglais : #Weglot-en
• Français : #Weglot-fr

Le W majuscule dans Weglot  est obligatoire.

La valeur après #Weglot-  correspond au code de la langue. Par exemple, en  est en anglais et fr  est français.

Vous trouverez le code correspondant à chaque langue disponible dans notre liste des langues disponibles.

Pour plus d’informations sur les hooks de liens de langue, consultez notre documentation pour les développeurs : « Hooks de liens de langue ».

3. Utilisez l'option « weglot_here »

Vous pouvez placer le sélecteur de langue Weglot à un emplacement précis en ajoutant l’élément HTML suivant à votre code source, à l’endroit où vous souhaitez qu’il s’affiche :

<div id="weglot_here"></div>

Weglot affichera automatiquement le sélecteur de langue à l'intérieur de cet élément.

4. Utilisez l'option « switcher »

Vous pouvez également intégrer un sélecteur de langue dans un élément spécifique de votre site web à l'aide de la balise switchers  option dans votre Weglot.initialize()  configuration.

Votre intégration Weglot devrait contenir un script similaire à celui-ci :

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>

<script>
  Weglot.initialize({
    api_key: "your_api_key",
  });
</script>

 switchers: [
    {
    button_style: {
        full_name: true,
        with_name: true,
        is_dropdown: true,
        with_flags: true,
        flag_type: "circle"
    },
    location: {
        target: ".header-nav", // You'll probably have to change it (see the step below in order to find the correct CSS selector)
        sibling: null
        }
    }
]
});

Remplacer "your_api_key"  avec votre clé API Weglot.

Le paramètre important pour l'emplacement du sélecteur de langue est le suivant :

cible : « .header-nav »

La balise hreflang target  La valeur doit correspondre au sélecteur CSS de l'élément dans lequel vous souhaitez insérer le sélecteur de langue.

⚠️ Pour trouver le sélecteur CSS (la « cible ») :

• Cliquez avec le bouton droit de la souris sur l'élément sur lequel vous voulez placer le sélecteur de langue.
• Cliquez sur "Inspecter".
• Utilisez la flèche en haut à gauche de la console.
• Cliquez avec le bouton droit de la souris sur l'élément dans la console.
• Copier > copier le sélecteur
• Collez le code du champ target entre les guillemets.

Ainsi, par exemple, si vous voulez l'ajouter à votre menu :

<nav class="menu">

target : "nav.menu",

Vous pouvez trouver plus d'informations sur cette méthode dans notre Documentation développeurs

5. Informations complémentaires concernant Squarespace et Webflow

Squarespace

Si vous utilisez l'intégration native de Weglot dans Squarespace, le sélecteur de langue est géré directement depuis Squarespace.

Vous pouvez le personnaliser depuis les paramètres de langue de Squarespace. Pour plus d'informations, consultez la documentation Squarespace : « Créer un site multilingue avec Weglot ».

Veuillez noter que l'intégration native de Weglot à Squarespace est actuellement disponible pour la version 7.1 de Squarespace.

Webflow

Si vous utilisez Webflow, vous pouvez également utiliser le kit d'interface utilisateur Weglot de Finsweet pour créer un sélecteur de langue personnalisé.