Een deep link gebruiken om het chatvenster te openen (zonder themacode te bewerken)

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

Livevoorbeeld: demo.shoplyai.ai

Stappen:

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

Voorbeelden:

Gebruik een knop om het chatvenster te openen:

Gebruik gelinkte tekst om het chatvenster te openen:

Chat openen met een vooraf ingevulde vraag

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

Dit is ideaal voor directe links naar veelvoorkomende onderwerpen, zoals verzendbeleid, retourbeleid of vragen over producten.

Aanbevolen: hashfragment (geen paginavernieuwing)

Gebruik het hashfragment #shoply_question=. Omdat de hash volledig in de browser wordt verwerkt, wordt de pagina niet opnieuw geladen wanneer iemand op deze link klikt en blijft een bestaande chatgeschiedenis behouden.

Indeling:

plaintext


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

Voorbeelden:

Verzendbeleid: https://your-store.com#shoply_question=What is your shipping policy?
Retouren: https://your-store.com#shoply_question=How do I return an item?
Bestelstatus: https://your-store.com#shoply_question=Where is my order?
Producten ontdekken: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Je kunt dit combineren met elke pagina in je winkel. Zo open je bijvoorbeeld de chatbot met een vraag op een specifieke productpagina:

plaintext


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

Verouderd: 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 paginavernieuwing veroorzaakt.

Indeling:

plaintext


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

Let op: vergeet niet je vraag URL-gecodeerd te gebruiken bij speciale tekens of spaties. De meeste browsers doen dit automatisch, maar als je programmatisch links toevoegt, gebruik dan de juiste URL-codering (spaties worden bijvoorbeeld %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 antwoord geeft.

Toepassingen:

Voeg een link ‘Vraag naar verzending’ toe aan je voettekst
Maak QR-codes die de chatbot met specifieke vragen openen
Neem handige links op in je e-mailcampagnes of orderbevestigingen
Voeg contextuele hulplinks toe aan productpagina’s (bijvoorbeeld ‘Vraag naar maten’)

Een deep link gebruiken om het chatvenster te openen (de code in de themasjabloon moet worden bewerkt)

In het vorige gedeelte bespraken we hoe je de hashtag (deep link) rechtstreeks vanuit de Theme Editor aan een knop, pictogram of tekstelement toevoegt om het chatvenster te openen, 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 (bijvoorbeeld door een nieuw pictogram in de header te maken), moet je de sjablooncode bewerken.

Hieronder staan eenvoudige HTML-codevoorbeelden waarmee je nieuwe pictogrammen in je themasjabloon kunt maken:

Codevoorbeelden

1. Chatpictogram

Met de onderstaande code voeg je een chatpictogram 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-sterpictogram

Met de onderstaande code voeg je 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. Methode met functieaanroep

Naast hashtags kun je ook de functieaanroep openShoplyAIChatBot() in het onclick-attribuut van een willekeurige knop of pictogram plaatsen, zodat klanten het chatvenster zien wanneer ze op de knop of het pictogram 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 zoekpictogram in het bestand sections/header.liquid invoegen om de chat-deep link aan de header van je winkel toe te voegen.

Als je je echter niet helemaal comfortabel voelt bij het bewerken van de code in je themasjabloon, maak je dan geen zorgen!

Je kunt gerust een gesprek met ons boeken ; we helpen je graag om het perfecte pictogram op de ideale plek in te stellen, passend bij de unieke uitstraling van je winkel.

Hoe verberg je het zwevende pictogram?

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

In het gedeelte ‘Customize AI Chat’ van de beheerconsole van de app kun je onder de instellingen Select a Chat Icon nu de volgende optie selecteren:

“Hide floating icon and use deep link to open chat”.

Zo kun je het zwevende pictogram verbergen en toch het chatvenster via een deep link openen.