Comment utiliser un deep link pour ouvrir la fenêtre de chat (sans modifier le code du thème)

Vous pouvez ouvrir la fenêtre de chat à l’aide d’un deep link sans modifier le code de votre thème. Dans l’éditeur de thème Shopify, ajoutez simplement le hashtag #shoply-ai-chatbot à un bouton, une icône ou un élément de texte. Lorsque les clients cliquent sur ces éléments, la fenêtre de chat s’ouvre automatiquement.

Exemple en direct : demo.shoplyai.ai

Étapes :

Modifiez le bouton, le texte ou l’icône souhaité dans votre éditeur de thème.
Définissez le lien ou l’URL sur #shoply-ai-chatbot.

Exemples :

Utiliser un bouton pour ouvrir la fenêtre de chat :

Utiliser un texte lié pour ouvrir la fenêtre de chat :

Ouvrir le chat avec une question préremplie

Vous souhaitez ouvrir la fenêtre de chat et envoyer automatiquement une question ? Vous pouvez le faire avec un fragment de hash (recommandé) ou un paramètre de requête URL.

C’est idéal pour créer des liens directs vers des sujets courants comme la politique d’expédition, la politique de retour ou les questions sur les produits.

Recommandé : fragment de hash (sans rechargement de page)

Utilisez le fragment de hash #shoply_question=. Comme le hash est traité entièrement dans le navigateur, cliquer sur ce lien ne rechargera pas la page, et l’historique de chat existant sera conservé.

Format :

plaintext


https://your-store.com#shoply_question=your question here

Exemples :

Politique d’expédition : https://your-store.com#shoply_question=What is your shipping policy?
Retours : https://your-store.com#shoply_question=How do I return an item?
Statut de la commande : https://your-store.com#shoply_question=Where is my order?
Découverte de produits : https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Vous pouvez combiner cette méthode avec n’importe quelle page de votre boutique. Par exemple, pour ouvrir le chatbot avec une question sur une page produit spécifique :

plaintext


https://your-store.com/products/blue-jacket#shoply_question=What sizes are available?

Ancienne méthode : paramètre de requête URL

Le paramètre de requête ?shoply_question= est toujours pris en charge pour assurer la compatibilité avec les anciennes versions. Notez que l’ajout d’un paramètre de requête à une URL sur laquelle se trouve déjà le client entraînera un rechargement de la page.

Format :

plaintext


https://your-store.com?shoply_question=your question here

Remarque : pensez à encoder votre question dans l’URL lorsque vous utilisez des caractères spéciaux ou des espaces. La plupart des navigateurs le feront automatiquement, mais si vous ajoutez des liens par programmation, utilisez un encodage URL approprié (par exemple, les espaces deviennent %20).

Lorsqu’un client clique sur l’un ou l’autre type de lien, la fenêtre de chat s’ouvre automatiquement et la question est envoyée au chatbot IA, qui fournit une réponse instantanée.

Cas d’utilisation :

Ajouter un lien « Poser une question sur l’expédition » dans votre pied de page
Créer des QR codes qui ouvrent le chatbot avec des questions précises
Inclure des liens utiles dans vos campagnes d’e-mail ou vos confirmations de commande
Ajouter des liens d’aide contextuelle sur les pages produit (par exemple, « Poser une question sur les tailles »)

Comment utiliser un deep link pour ouvrir la fenêtre de chat (modification du code du modèle de thème nécessaire)

Dans la section précédente, nous avons expliqué comment utiliser le hashtag (deep link) pour ouvrir la fenêtre de chat en l’ajoutant directement à un bouton, une icône ou un texte depuis l’éditeur de thème, sans modifier le code de votre thème.

Cependant, si vous souhaitez pouvoir ajouter le deep link n’importe où dans votre boutique (par exemple, en créant une nouvelle icône dans l’en-tête), vous devrez modifier le code du modèle.

Voici quelques exemples simples de code HTML que vous pouvez utiliser pour créer de nouvelles icônes dans le modèle de votre thème :

Exemples de code

1. Icône de chat

Le code ci-dessous ajoute une icône de chat :

plaintext


<a href="#shoply-ai-chatbot"
   style="display:inline-flex;align-items:center;margin-right:13px">
    <svg viewBox="64 64 896 896" style="height:28px;width:28px;fill:orange">
        <path
            d="M868.2 377.4c-18.9-45.1-46.3-85.6-81.2-120.6a377.26 377.26 0 00-120.5-81.2A375.65 375.65 0 00519 145.8c-41.9 0-82.9 6.7-121.9 20C306 123.3 200.8 120 170.6 120c-2.2 0-7.4 0-9.4.2-11.9.4-22.8 6.5-29.2 16.4-6.5 9.9-7.7 22.4-3.4 33.5l64.3 161.6a378.59 378.59 0 00-52.8 193.2c0 51.4 10 101 29.8 147.6 18.9 45 46.2 85.6 81.2 120.5 34.7 34.8 75.4 62.1 120.5 81.2C418.3 894 467.9 904 519 904c51.3 0 100.9-10.1 147.7-29.8 44.9-18.9 85.5-46.3 120.4-81.2 34.7-34.8 62.1-75.4 81.2-120.6a376.5 376.5 0 0029.8-147.6c-.2-51.2-10.1-100.8-29.9-147.4zm-66.4 266.5a307.08 307.08 0 01-65.9 98c-28.4 28.5-61.3 50.7-97.7 65.9h-.1c-38 16-78.3 24.2-119.9 24.2a306.51 306.51 0 01-217.5-90.2c-28.4-28.5-50.6-61.4-65.8-97.8v-.1c-16-37.8-24.1-78.2-24.1-119.9 0-55.4 14.8-109.7 42.8-157l13.2-22.1-9.5-23.9L206 192c14.9.6 35.9 2.1 59.7 5.6 43.8 6.5 82.5 17.5 114.9 32.6l19 8.9 19.9-6.8c31.5-10.8 64.8-16.2 98.9-16.2a306.51 306.51 0 01217.5 90.2c28.4 28.5 50.6 61.4 65.8 97.8l.1.1.1.1c16 37.6 24.1 78 24.2 119.8-.1 41.7-8.3 82-24.3 119.8zM681.1 364.2c-20.4 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.6 37.1 37.1 37.1s37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1zm-175.2 0c-20.5 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.7 37.1 37.1 37.1 20.5 0 37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1z" />
    </svg>
</a>

2. Icône étoile IA

Le code ci-dessous ajoute une étoile IA :

plaintext


<a href="#shoply-ai-chatbot" style="display:inline-flex;align-items:center">
    <img style="height:28px;width:28px" src="https://[CFN_PRODUCTION_ASSET]/AIStar.svg" alt="Shoply Chatbot"  />
</a>

3. Méthode d’appel de fonction

En plus des hashtags, vous pouvez également placer l’appel de fonction openShoplyAIChatBot() dans l’attribut onclick de n’importe quel bouton ou icône. La fenêtre de chat s’affichera alors lorsque les clients cliqueront dessus.

plaintext


<button onclick="openShoplyAIChatBot()" style="border-radius:20px;margin:10px;cursor:pointer;background:black">
    <span style="font-size:13px;color:white;margin:5px">Click to Chat</span>
</button>

Besoin d’aide ?

Vous pouvez utiliser n’importe lequel des exemples ci-dessus et injecter le code à côté de l’icône de recherche dans le fichier sections/header.liquid afin d’ajouter le deep link du chat à l’en-tête de votre boutique.

Cependant, si vous ne vous sentez pas totalement à l’aise pour modifier le code de votre modèle de thème, ne vous inquiétez pas !

N’hésitez pas à prendre rendez-vous avec nous : nous vous aiderons volontiers à configurer l’icône idéale à l’emplacement parfait, en harmonie avec l’identité de votre boutique.

Comment masquer l’icône flottante ?

Après avoir configuré le deep link pour ouvrir la fenêtre de chat, vous souhaiterez peut-être masquer l’icône flottante. Avoir trop d’icônes flottantes sur leur site est également souvent perçu comme envahissant par les propriétaires de boutique. Nous comprenons vos préoccupations ! C’est pourquoi nous avons ajouté une fonctionnalité permettant de masquer l’icône de chat.

Dans la section « Customize AI Chat » de la console d’administration de l’application, sous les paramètres Select a Chat Icon, vous pouvez maintenant sélectionner l’option :

« Hide floating icon and use deep link to open chat ».

Cela vous permet de masquer l’icône flottante tout en permettant l’ouverture de la fenêtre de chat via un deep link.