Hoe je het chatvenster opent met een link

Je kunt het chatvenster openen met een deep link zonder de code van je thema aan te passen. Voeg in de Shopify Theme Editor simpelweg de hashtag #shoply-ai-chatbot toe aan een knop, icoon of tekstelement. Wanneer klanten op deze elementen klikken, wordt het chatvenster automatisch geopend.

Live voorbeeld: demo.shoplyai.ai

Stappen:

Bewerk de gewenste knop, tekst of het gewenste icoon in je thema-editor.
Stel de link of URL in op #shoply-ai-chatbot.

Voorbeelden:

Gebruik een knop om het chatvenster te openen:

Gebruik gekoppelde tekst om het chatvenster te openen:

Open chat met productspecifieke vragen

Voeg een knop “Vraag over dit product?” toe aan een productpagina om shoppers te helpen vragen over dat artikel te stellen. Stel de link in op #shoply_product_questions. Als erop wordt geklikt, opent de chat met de productnaam, een korte producthighlight en automatisch gegenereerde vragen die relevant zijn voor dat product.

Open in de Shopify Theme Editor je productsjabloon en voeg een knop of gekoppelde tekst toe of bewerk deze, mits deze een URL ondersteunt.
Stel het label in op “Vraag over dit product?” en de link op #shoply_product_questions.
Sla op, ga naar een productpagina en klik op de link om de productvragen te controleren.

Als je thema geen geschikte knop- of linkinstelling biedt, voeg dan deze link toe in de HTML van het productsjabloon:

html


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

Gebruik deze link op een productpagina zodat Shoply de productcontext heeft. Je kunt ook een volledige product-URL delen die eindigt op #shoply_product_questions.

Probeer de chat met productvragen voor Bent 85 Skis . De suggesties bevatten vragen over ski-gewicht, de kern, het rocker-profiel en topsheet-art. Shoppers kunnen een suggestie selecteren of hun eigen vraag typen.

Voor voorbeelden van waar je deze links kunt gebruiken, zie AI-aangedreven productvragen in onze gids voor het vervangen van je FAQ-pagina.

Deze productvragen worden automatisch gegenereerd. De startvragen die je configureert in Customize AI Chat zijn in plaats daarvan van toepassing op het standaard openen van de chat.

Open chat met een vooraf ingevulde vraag

Wil je het chatvenster openen én automatisch een vraag verzenden? Dat kan met een hashfragment (aanbevolen) of een URL-queryparameter.

Dit is perfect voor het maken van directe links naar veelvoorkomende onderwerpen zoals verzendbeleid, retourbeleid of productvragen.

Aanbevolen: hashfragment (geen herlading van de pagina)

Gebruik het hashfragment #shoply_question=. Omdat de hash volledig in de browser wordt verwerkt, zal het klikken op deze link de pagina niet opnieuw laden, en blijft eventuele bestaande chatgeschiedenis behouden.

Indeling:

plaintext


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

Voorbeelden:

Verzendbeleid: https://your-store.com#shoply_question=Wat is jullie verzendbeleid?
Retouren: https://your-store.com#shoply_question=Hoe retourneer ik een artikel?
Bestelstatus: https://your-store.com#shoply_question=Waar is mijn bestelling?
Productontdekking: https://your-store.com#shoply_question=Welke class 2 e-bikes zijn beschikbaar onder $2000?

Je kunt dit combineren met elke pagina in je winkel. Bijvoorbeeld om de chatbot met een vraag op een specifieke productpagina te openen:

plaintext


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

Legacy: URL-queryparameter

De queryparameter ?shoply_question= wordt nog steeds ondersteund voor achterwaartse compatibiliteit. Houd er rekening mee dat het toevoegen van een queryparameter aan een URL waarop de klant zich al bevindt een herlading van de pagina veroorzaakt.

Indeling:

plaintext


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

Opmerking: Vergeet niet je vraag URL te encoden wanneer je speciale tekens of spaties gebruikt. De meeste browsers doen dit automatisch, maar als je links programmatisch toevoegt, gebruik dan correcte URL-encoding (bijv. spaties worden %20).

Wanneer een klant op een van beide typen links klikt, wordt het chatvenster automatisch geopend en wordt de vraag naar de AI-chatbot gestuurd, die direct een antwoord geeft.

Toepassingen:

Voeg een link “Vraag naar verzending” toe in je footer
Maak QR-codes die de chatbot openen met specifieke vragen
Neem nuttige links op in je e-mailcampagnes of orderbevestigingen
Voeg contextuele hulplinks toe op productpagina’s (bijv. “Vraag naar maatvoering”)

Hoe je een deep link gebruikt om het chatvenster te openen (je moet de code in het themasjabloon bewerken)

In het vorige gedeelte bespraken we hoe je de hashtag (deep link) kunt gebruiken om het chatvenster te activeren door deze rechtstreeks vanuit de Theme Editor toe te voegen aan een knop, icoon of tekst, zonder de code van je thema te bewerken.

Als je echter volledige flexibiliteit wilt om de deep link overal in je winkel toe te voegen (bijv. door een nieuw icoon in de header te maken), dan moet je de sjablooncode bewerken.

Hieronder staan eenvoudige HTML-codevoorbeelden die je kunt gebruiken om nieuwe iconen in je Theme-sjabloon te maken:

Codevoorbeelden

1. Chaticoon

De onderstaande code voegt een chaticoon toe:

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. AI-stericoon

De onderstaande code voegt een AI-ster toe:

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. Functie-aanroepmethode

Naast het gebruik van hashtags kun je ook de functie-aanroep openShoplyAIChatBot() in het attribuut onclick van elke knop/elk icoon plaatsen, zodat klanten het chatvenster zien wanneer ze op de knop/het icoon klikken.

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>

Hulp nodig?

Je kunt elk van de bovenstaande voorbeelden gebruiken en de code naast het zoekicoon injecteren in het bestand sections/header.liquid om de chat-deep-link toe te voegen aan de header van je winkel.

Als je je echter niet helemaal prettig voelt bij het bewerken van de code in je Theme-sjabloon, geen zorgen!

Voel je vrij om een afspraak met ons te boeken , en we helpen je graag met het instellen van het perfecte icoon op de ideale plek die past bij de unieke uitstraling van je winkel.

Hoe verberg je het zwevende icoon?

Zodra je de deep link hebt geconfigureerd om het chatvenster te openen, wil je misschien het zwevende icoon verbergen. Daarnaast geven winkeleigenaren vaak aan dat te veel zwevende iconen op hun websites overweldigend kunnen zijn. We begrijpen je zorgen! Daarom hebben we een functie geïntroduceerd om het chaticoon te verbergen.

In het gedeelte “Customize AI Chat” van de adminconsole van de app kun je onder de instellingen Select a Chat Icon nu de optie selecteren:

“Zwevend icoon verbergen en deep link gebruiken om chat te openen”.

Hiermee kun je het zwevende icoon verbergen en toch het chatvenster via een deep link laten openen.