Comment ouvrir la fenêtre de chat avec un lien

Vous pouvez ouvrir la fenêtre de chat en utilisant un lien profond sans modifier le code de votre thème. Dans l’éditeur de thème Shopify, ajoutez simplement le hashtag #shoply-ai-chatbot à n’importe quel bouton, icône ou é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 :

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

Utilisez un texte avec lien pour ouvrir la fenêtre de chat :

Ouvrir le chat avec des questions spécifiques au produit

Ajoutez un bouton « Question sur ce produit ? » à une page produit pour aider les visiteurs à poser des questions sur cet article. Définissez son lien sur #shoply_product_questions. En cliquant dessus, le chat s’ouvre avec le nom du produit, un court point fort du produit et des questions générées automatiquement pertinentes pour ce produit.

Dans l’éditeur de thème Shopify, ouvrez votre modèle de produit et ajoutez ou modifiez un bouton ou un texte avec lien prenant en charge une URL.
Définissez le libellé sur « Question sur ce produit ? » et le lien sur #shoply_product_questions.
Enregistrez, visitez une page produit et cliquez sur le lien pour vérifier les questions produit.

Si votre thème ne propose pas de bouton ou de paramètre de lien approprié, ajoutez ce lien dans le HTML du modèle de produit :

html


<a href="#shoply_product_questions">Question About This Product?</a>

Utilisez ce lien sur une page produit afin que Shoply dispose du contexte produit. Vous pouvez également partager une URL produit complète se terminant par #shoply_product_questions.

Essayez le chat de questions produit pour les Bent 85 Skis . Les suggestions incluent des questions sur le poids des skis, le noyau, le profil de rocker et le design du topsheet. Les visiteurs peuvent sélectionner une suggestion ou saisir leur propre question.

Pour des exemples d’endroits où utiliser ces liens, consultez les questions produit alimentées par l’IA dans notre guide de remplacement de FAQ.

Ces questions produit sont générées automatiquement. Les questions de départ que vous configurez dans Customize AI Chat s’appliquent plutôt à l’ouverture standard du 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 en utilisant soit un fragment de hachage (recommandé), soit un paramètre de requête d’URL.

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

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

Utilisez le fragment de hachage #shoply_question=. Comme le hachage est traité entièrement dans le navigateur, cliquer sur ce lien ne rechargera pas la page, et tout 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 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 cela 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?

Ancien format : paramètre de requête d’URL

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

Format :

plaintext


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

Remarque : N’oubliez pas d’encoder votre question dans l’URL lorsque vous utilisez des caractères spéciaux ou des espaces. La plupart des navigateurs le gèrent automatiquement, mais si vous ajoutez des liens par programmation, utilisez un encodage d’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, fournissant une réponse instantanée.

Cas d’usage :

Ajouter un lien « Poser une question sur la livraison » dans votre pied de page
Créer des codes QR qui ouvrent le chatbot avec des questions spécifiques
Inclure des liens utiles dans vos campagnes e-mail ou confirmations de commande
Ajouter des liens d’aide contextuelle sur les pages produit (par ex. « Poser une question sur la taille »)

Comment utiliser un lien profond pour ouvrir la fenêtre de chat (nécessite de modifier le code dans le modèle de thème)

Dans la section précédente, nous avons expliqué comment utiliser le hashtag (lien profond) pour déclencher la fenêtre de chat en l’ajoutant à n’importe quel bouton, icône ou texte directement depuis l’éditeur de thème, sans modifier le code de votre thème.

Cependant, si vous souhaitez avoir une flexibilité totale pour ajouter le lien profond n’importe où sur votre boutique (par ex. créer une nouvelle icône dans l’en-tête), vous devrez modifier le code du modèle.

Vous trouverez ci-dessous des exemples simples de code HTML que vous pouvez utiliser pour créer de nouvelles icônes dans votre modèle de 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 par appel de fonction

En plus d’utiliser des hashtags, vous pouvez également placer l’appel de fonction openShoplyAIChatBot() dans l’attribut onclick de n’importe quel bouton/icône, afin que les clients voient la fenêtre de chat lorsqu’ils cliquent sur le bouton/l’icône.

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 lien profond du chat à l’en-tête de votre boutique.

Cependant, si vous n’êtes pas totalement à l’aise avec la modification du code dans votre modèle de thème, ne vous inquiétez pas !

N’hésitez pas à réserver un rendez-vous avec nous , et nous serons ravis de vous aider à configurer l’icône parfaite à l’emplacement idéal pour correspondre à l’ambiance unique de votre boutique.

Comment masquer l’icône flottante ?

Une fois que vous avez configuré le lien profond pour ouvrir la fenêtre de chat, vous souhaiterez peut-être masquer l’icône flottante. De plus, les propriétaires de boutique mentionnent souvent qu’avoir trop d’icônes flottantes sur leurs sites web peut être envahissant. Nous comprenons vos préoccupations ! C’est pourquoi nous avons introduit 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 désormais 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 à la fenêtre de chat de s’ouvrir via un lien profond.