Slik bruker du en deep link til å åpne chattevinduet (uten å redigere temakoden)

Du kan åpne chattevinduet ved hjelp av en deep link uten å endre temakoden. I Shopify-temaredigereren legger du ganske enkelt til hashtaggen #shoply-ai-chatbot på en knapp, et ikon eller et tekstelement. Når kunder klikker på disse elementene, åpnes chattevinduet automatisk.

Direkte eksempel: demo.shoplyai.ai

Fremgangsmåte:

Rediger ønsket knapp, tekst eller ikon i temaredigereren.
Angi lenken eller URL-en til #shoply-ai-chatbot.

Eksempler:

Bruk en knapp til å åpne chattevinduet:

Bruk en lenket tekst til å åpne chattevinduet:

Åpne chatten med et forhåndsutfylt spørsmål

Vil du åpne chattevinduet og sende et spørsmål automatisk? Det kan du gjøre enten med et hash-fragment (anbefalt) eller en URL-spørringsparameter.

Dette er perfekt for å opprette direkte lenker til vanlige temaer som leveringsvilkår, returvilkår eller produktspørsmål.

Anbefalt: Hash-fragment (ingen omlasting av siden)

Bruk hash-fragmentet #shoply_question=. Siden hash-fragmentet behandles fullstendig i nettleseren, vil et klikk på denne lenken ikke laste siden på nytt, og eksisterende chathistorikk blir bevart.

Format:

plaintext


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

Eksempler:

Leveringsvilkår: https://your-store.com#shoply_question=What is your shipping policy?
Returer: https://your-store.com#shoply_question=How do I return an item?
Ordrestatus: https://your-store.com#shoply_question=Where is my order?
Produktoppdagelse: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Du kan kombinere dette med hvilken som helst side i butikken din. For eksempel kan du åpne chatboten med et spørsmål på siden til et bestemt produkt:

plaintext


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

Eldre løsning: URL-spørringsparameter

Spørringsparameteren ?shoply_question= støttes fortsatt av hensyn til bakoverkompatibilitet. Vær oppmerksom på at hvis du legger en spørringsparameter til en URL kunden allerede er på, vil det føre til at siden lastes på nytt.

Format:

plaintext


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

Merk: Husk å URL-kode spørsmålet når du bruker spesialtegn eller mellomrom. De fleste nettlesere håndterer dette automatisk, men hvis du legger til lenker programmatisk, må du bruke riktig URL-koding (for eksempel blir mellomrom til %20).

Når en kunde klikker på en av lenketypene, åpnes chattevinduet automatisk, og spørsmålet sendes til AI-chatboten, som gir et umiddelbart svar.

Bruksområder:

Legg til en «Spør om levering»-lenke i bunnteksten
Opprett QR-koder som åpner chatboten med bestemte spørsmål
Ta med nyttige lenker i e-postkampanjer eller ordrebekreftelser
Legg til kontekstuelle hjelpelinker på produktsider (for eksempel «Spør om størrelse»)

Slik bruker du en deep link til å åpne chattevinduet (krever redigering av koden i temamalen)

I forrige del forklarte vi hvordan du bruker hashtaggen (deep linken) til å utløse chattevinduet ved å legge den til på en knapp, et ikon eller et tekstelement direkte fra temaredigereren, uten å redigere temakoden.

Hvis du derimot ønsker full fleksibilitet til å legge til deep linken hvor som helst i butikken (for eksempel ved å opprette et nytt ikon i toppteksten), må du redigere malens kode.

Nedenfor finner du enkle HTML-kodeeksempler du kan bruke til å opprette nye ikoner i temamalen:

Kodeeksempler

1. Chatteikon

Koden nedenfor legger til et chatteikon:

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-stjerneikon

Koden nedenfor legger til en AI-stjerne:

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. Metode for funksjonskall

I tillegg til å bruke hashtags kan du også legge funksjonskallet openShoplyAIChatBot() i onclick-attributtet til en knapp eller et ikon, slik at kundene ser chattevinduet når de klikker på knappen eller ikonet.

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>

Trenger du hjelp?

Du kan bruke hvilket som helst av eksemplene ovenfor og sette inn koden ved siden av søkeikonet i filen sections/header.liquid for å legge til chat-deep linken i toppteksten i butikken din.

Hvis du ikke føler deg helt komfortabel med å redigere koden i temamalen, trenger du ikke bekymre deg!

Du kan gjerne bestille et møte med oss , så hjelper vi deg med å sette opp det perfekte ikonet på det ideelle stedet, slik at det passer butikkens unike stil.

Hvordan skjuler du det flytende ikonet?

Når du har konfigurert deep linken til å åpne chattevinduet, kan det hende du vil skjule det flytende ikonet. Butikkeiere nevner også ofte at for mange flytende ikoner på nettstedene deres kan virke overveldende. Vi forstår bekymringene dine! Derfor har vi introdusert en funksjon for å skjule chatikonet.

I delen «Tilpass AI-chat» i appens administrasjonskonsoll kan du, under innstillingene Velg et chatikon, nå velge:

«Skjul flytende ikon og bruk deep link til å åpne chatten».

Dette lar deg skjule det flytende ikonet samtidig som chattevinduet fortsatt kan åpnes via en deep link.