Comment créer un lien cliquable pour ouvrir le widget de chat Shopify : Un guide étape par étape

La bulle de chat par défaut de Shopify Inbox est correcte, mais elle ne s'harmonise pas toujours avec l'apparence que vous avez mis tant d'efforts à créer pour votre boutique. Elle flotte simplement là, masquant parfois des informations clés ou jurant avec votre image de marque. Peut-être souhaitez-vous un design plus épuré, ou voulez-vous placer un lien « Discutez avec nous » directement sur votre page de contact, dans votre pied de page, ou sur une page produit où vous savez que les clients auront des questions.

Et si vous avez cherché sur Google comment résoudre ce problème, vous êtes probablement tombé sur un tas de vieux messages de forum avec des astuces qui ne fonctionnent plus. Les méthodes comme l'ajout de « /?chat » à la fin d'une URL sont désormais obsolètes et peu fiables.

C'est la raison d'être de ce guide. Nous allons vous guider à travers un processus simple, étape par étape, en utilisant un petit bout de JavaScript moderne. C'est le moyen le plus fiable de créer un lien cliquable pour ouvrir votre widget de chat Shopify depuis n'importe où sur votre site, vous redonnant ainsi le contrôle sur le design de votre boutique.

Ce dont vous aurez besoin avant de commencer

Avant de nous lancer, assurons-nous que vous avez tout ce qu'il faut. Ne vous inquiétez pas, la liste est courte :

• Une boutique Shopify avec l'application Shopify Inbox installée et fonctionnelle.

• Un accès administrateur à votre compte Shopify pour pouvoir accéder au code de votre thème.

• Environ 10 à 15 minutes de votre temps.

Pourquoi les anciennes méthodes ne fonctionnent plus

Shopify met constamment sa plateforme à jour, ce qui est une excellente chose, mais cela signifie aussi que des astuces et des solutions de contournement non officielles peuvent cesser de fonctionner du jour au lendemain. Ces anciens paramètres d'URL comme « ?show_chat » étaient des bidouilles astucieuses qui ont fonctionné pendant un certain temps, mais Shopify a depuis modifié la manière dont les applications comme Inbox sont chargées sur votre vitrine. Essayer de les utiliser aujourd'hui conduit généralement à des liens brisés et à des clients désorientés.

La raison technique est que le widget de chat se charge maintenant souvent dans ce qu'on appelle un shadow DOM ou une iframe. Vous pouvez l'imaginer comme une petite boîte sécurisée sur votre page web, maintenue séparée de tout le reste. Cette configuration rend difficile pour une simple URL d'atteindre l'intérieur de cette boîte et de dire au widget de s'ouvrir.

C'est pourquoi nous avons besoin d'une approche JavaScript moderne. La méthode que nous allons vous montrer est beaucoup plus stable. Au lieu d'essayer une astuce d'URL, elle trouve le véritable bouton de chat sur la page, où qu'il se cache, et simule un clic. Cela fonctionne exactement comme si une vraie personne ouvrait le chat, ce qui en fait une solution bien plus fiable à long terme.

Comment créer un lien de chat Shopify cliquable en 4 étapes

L'ensemble du processus se résume à deux choses : ajouter un lien à votre page, puis déposer un petit script dans votre thème pour le faire fonctionner. Aucune expérience de développement n'est requise, je vous guiderai à chaque clic.

Étape 1 : Sauvegardez votre thème

Très bien, avant de toucher au moindre code, faisons la chose la plus intelligente : sauvegardez votre thème. C'est votre filet de sécurité. Si quelque chose tourne mal, vous pourrez restaurer la sauvegarde en un seul clic et faire comme si de rien n'était.

• Depuis votre interface d'administration Shopify, allez dans Boutique en ligne > Thèmes.

• Repérez votre thème actuel (celui qui porte la mention « En ligne »). Cliquez sur l'icône des trois points (...) à côté du bouton Personnaliser.

• Choisissez Dupliquer dans le menu.

Shopify créera une copie exacte. Vous pouvez maintenant modifier l'original sans vous inquiéter, sachant que vous disposez d'une version de secours prête à être utilisée si nécessaire.

Panneau d'administration Shopify où vous pouvez trouver la section des thèmes pour sauvegarder votre thème.

Étape 2 : Ajoutez votre lien ou bouton personnalisé

Ensuite, décidez où vous voulez placer votre nouveau lien de chat. Vous pouvez le mettre à peu près n'importe où qui accepte le HTML, comme sur une page de contact, dans une description de produit ou dans le pied de page de votre site.

Une fois que vous avez choisi un emplacement, ajoutez cette simple ligne de HTML :

Discuter avec notre équipe  

N'hésitez pas à remplacer « Discuter avec notre équipe » par ce qui vous semble le plus pertinent. La partie vraiment importante est href="#open-chat". C'est l'ancre unique que notre script recherchera pour savoir quand ouvrir le chat. Il ne mène pas réellement à une autre page ; c'est juste un identifiant pour notre code.

Étape 3 : Ajoutez le code JavaScript à votre thème

Ok, c'est le cœur de la solution. Nous devons ajouter un petit script à votre thème qui attend que quelqu'un clique sur votre nouveau lien. Le meilleur endroit pour cela est votre fichier « theme.liquid », ce qui garantit que le code sera actif sur toutes les pages de votre site.

1. Dans votre administration Shopify, retournez dans Boutique en ligne > Thèmes.

2. Cliquez sur l'icône des trois points (...) sur votre thème en ligne et sélectionnez Modifier le code.

3. Dans le menu des fichiers à gauche, ouvrez le dossier « Layout » et cliquez sur « theme.liquid ».

4. Faites défiler jusqu'en bas du fichier. Juste avant de voir la balise de fermeture ``, collez cet extrait de code :

  

document.addEventListener('DOMContentLoaded', function() {  

  const customChatLinks = document.querySelectorAll('a[href="#open-chat"]');  

  if (customChatLinks.length > 0) {  

    const openShopifyChat = function(event) {  

      event.preventDefault();  

      const chatButton = document.querySelector('#ShopifyChat button[aria-controls="chat-ui"], #dummy-chat-button-iframe');  

      if (chatButton) {  

        chatButton.click();  

      } else {  

        // Fallback for when the button is inside an iframe  

        const iframe = document.querySelector('#dummy-chat-button-iframe');  

        if (iframe && iframe.contentWindow) {  

          const buttonInFrame = iframe.contentWindow.document.querySelector('button');  

          if (buttonInFrame) {  

            buttonInFrame.click();  

          } else {  

            console.warn('Shopify Chat button not found inside iframe.');  

          }  

        } else {  

          console.warn('Shopify Chat button not found.');  

        }  

      }  

    };  

    customChatLinks.forEach(link => {  

      link.addEventListener('click', openShopifyChat);  

    });  

  }  

});  

  

Alors, que fait réellement ce code ? Il attend simplement que la page se charge, puis il surveille tout lien avec href="#open-chat". Lorsque quelqu'un clique dessus, le script empêche la page de sauter et trouve à la place le bouton officiel de Shopify Chat et le « clique » pour vous. C'est aussi simple que ça.

Étape 4 : Testez votre nouveau lien

Cliquez sur le bouton « Enregistrer » en haut à droite de l'éditeur de code. Maintenant, rendez-vous sur la page où vous avez ajouté votre lien personnalisé et essayez-le. Le widget de chat Shopify Inbox devrait s'ouvrir, comme si vous aviez cliqué sur l'icône flottante.

Faites quelques tests. Fermez le widget et cliquez à nouveau sur votre lien pour vous assurer que tout fonctionne correctement.

Problèmes courants et dépannage

Bien que ce script soit assez solide, travailler avec du code personnalisé peut parfois réserver des surprises. Voici quelques points à garder à l'esprit.

• Et si le lien ne fonctionne pas ? Si votre lien ne fonctionne pas, le coupable le plus probable est que Shopify a mis à jour le code du widget de chat, changeant l'ID du bouton. Le sélecteur dans notre script ("#ShopifyChat button...") est conçu pour gérer les variations courantes, mais un changement majeur de la plateforme pourrait le casser. C'est le principal inconvénient de tout code personnalisé : il pourrait nécessiter un petit ajustement à l'avenir.

• L'accessibilité est essentielle : Utilisez toujours un texte clair et descriptif pour vos liens. « Discuter avec notre équipe de support » est beaucoup plus utile pour les utilisateurs de lecteurs d'écran que quelque chose de vague comme « Cliquez ici ».

• Performance : Ne vous inquiétez pas, ce script est incroyablement léger et n'aura aucun impact notable sur la vitesse de votre site. C'est juste un bon rappel que tout code personnalisé est une chose de plus que vous devez gérer vous-même.

Au-delà du lien : que se passe-t-il ensuite ?

Avoir réglé le problème du lien est une sensation agréable. Vous avez épuré le design de votre site et facilité la prise de contact pour vos clients. Mais... que se passe-t-il ensuite ? Une fois qu'ils cliquent sur ce lien, le vrai travail commence.

C'est la partie qu'un simple extrait de code ne peut pas résoudre. Qui est là pour répondre à ces chats ? Quel est le plan si un message arrive tard dans la nuit ? Comment vos agents font-ils face aux mêmes questions répétitives, comme « Où est ma commande ? », sans s'épuiser ? Un lien personnalisé est une excellente première étape, mais l'expérience peut rapidement décevoir s'il n'y a pas de réponse rapide et utile de l'autre côté.

C'est généralement là que le support manuel atteint ses limites, et que vous commencez à réfléchir à une meilleure solution.

Une plateforme d'IA comme eesel AI est conçue pour prendre le relais là où le support manuel s'arrête. Le Chatbot IA d'eesel ne se contente pas d'aider à démarrer une conversation ; il la résout souvent instantanément.

Un chatbot IA d'eesel fournissant un support automatisé et vérifiant le statut de livraison d'une commande grâce à son intégration Shopify.

Voici comment il relève les défis qu'un simple lien personnalisé ne peut pas résoudre :

• Soyez opérationnel en quelques minutes (sérieusement) : Au lieu de vous battre avec le code du thème, eesel AI se connecte à Shopify en quelques clics. La configuration est entièrement en libre-service, vous pouvez donc avoir un agent IA qui travaille pour vous en moins de temps qu'il n'en faut pour préparer un café.

• Fournissez-lui toutes vos connaissances : Vous pouvez entraîner votre IA sur tout, de vos articles de centre d'aide à vos anciens tickets de support, et même sur l'ensemble de votre catalogue de produits Shopify. Elle peut alors répondre à des questions détaillées sur les produits, gérer les retours et expliquer les politiques par elle-même.

• Laissez-la travailler pour vous : eesel AI peut être configuré avec des actions personnalisées pour rechercher des informations de commande en direct directement depuis Shopify. Quand un client demande « Où est ma commande ? », il obtient une réponse immédiate et en temps réel, à toute heure du jour, sans qu'un humain ait besoin de lever le petit doigt.

• Testez-la avant de la lancer : Vous vous demandez comment une IA se comportera réellement avec vos clients ? Le mode simulation d'eesel AI vous permet de tester votre configuration sur des milliers de vos conversations clients passées avant sa mise en ligne. Vous obtenez une prévision claire de son efficacité dès le premier jour.

Prenez le contrôle de votre chat client

Vous disposez maintenant d'un moyen solide et moderne pour créer un lien cliquable afin d'ouvrir votre widget de chat Shopify, vous donnant plus de contrôle sur l'apparence et l'ergonomie de votre boutique. C'est une modification fantastique pour un site plus épuré et plus convivial.

Mais à mesure que votre boutique se développe, vous réaliserez que réparer le bouton de chat n'est que le début. La vraie victoire consiste à améliorer l'ensemble de l'expérience de chat. Le code personnalisé nécessite une surveillance, et même l'équipe de support la plus dévouée ne peut pas être partout à la fois.

Pour les boutiques Shopify qui cherchent à offrir un support instantané, précis et fidèle à leur marque, capable de s'adapter à leur croissance, une solution alimentée par l'IA est la prochaine étape naturelle. C'est ainsi que vous transformez le service client d'une corvée quotidienne en un véritable atout pour la croissance.

Prêt à découvrir ce que procure une expérience de support entièrement automatisée ? Essayez eesel AI gratuitement et construisez votre premier chatbot IA pour Shopify en quelques minutes seulement.