Hvordan åpne chatvinduet med en lenke

Du kan åpne chatvinduet ved å bruke en dypelenke uten å endre kodene i temaet ditt. I Shopify Theme Editor legger du ganske enkelt til hashtaggen #shoply-ai-chatbot på en hvilken som helst knapp, et ikon eller et tekstelement. Når kunder klikker på disse elementene, åpnes chatvinduet automatisk.

Live-eksempel: demo.shoplyai.ai

Fremgangsmåte:

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

Eksempler:

Bruk en knapp for å åpne chatvinduet:

Bruk en lenket tekst for å åpne chatvinduet:

Åpne chat med produktspesifikke spørsmål

Legg til en knapp med teksten “Question About This Product?” på en produktside for å hjelpe kunder med å stille spørsmål om akkurat den varen. Sett lenken til #shoply_product_questions. Når man klikker på den, åpnes chatten med produktnavnet, en kort produkthøydepunktbeskrivelse og automatisk genererte spørsmål som er relevante for det produktet.

I Shopify Theme Editor åpner du produktmalen din og legger til eller redigerer en knapp eller lenket tekst som støtter en URL.
Sett etiketten til “Question About This Product?” og lenken til #shoply_product_questions.
Lagre, gå til en produktside og klikk på lenken for å kontrollere produktspørsmålene.

Hvis temaet ditt ikke tilbyr en passende innstilling for knapp eller lenke, legger du denne lenken til i HTML-koden for produktmalen:

html


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

Bruk denne lenken på en produktside slik at Shoply har produktkonteksten. Du kan også dele en full produkt-URL som slutter med #shoply_product_questions.

Prøv produktspørsmål-chatten for Bent 85 Skis . Forslagene inkluderer spørsmål om skienes vekt, kjerne, rocker-profil og topsheet-kunst. Kunder kan velge et forslag eller skrive sitt eget spørsmål.

For eksempler på hvor du kan bruke disse lenkene, se AI-drevne produktspørsmål i vår guide til å erstatte FAQ-siden.

Disse produktspørsmålene genereres automatisk. Startspørsmålene du konfigurerer i Customize AI Chat gjelder i stedet for den vanlige åpningen av chatten.

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

Vil du åpne chatvinduet og automatisk sende et spørsmål? Du kan gjøre dette ved å bruke enten et hash-fragment (anbefalt) eller en URL-spørringsparameter.

Dette er perfekt for å lage direkte lenker til vanlige emner som fraktpolicy, returpolicy eller produktforespørsler.

Anbefalt: Hash-fragment (ingen sideinnlasting på nytt)

Bruk hash-fragmentet #shoply_question=. Fordi hashen behandles fullstendig i nettleseren, vil et klikk på denne lenken ikke laste siden på nytt, og eventuell eksisterende chathistorikk bevares.

Format:

plaintext


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

Eksempler:

Fraktpolicy: 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, for å åpne chatboten med et spørsmål på en bestemt produktside:

plaintext


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

Eldre metode: URL-spørringsparameter

Spørringsparameteren ?shoply_question= støttes fortsatt for bakoverkompatibilitet. Merk at hvis du legger til en spørringsparameter i en URL kunden allerede er på, vil det føre til en sideinnlasting på nytt.

Format:

plaintext


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

Merk: Husk å URL-kode spørsmålet ditt 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 (f.eks. at mellomrom blir %20).

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

Bruksområder:

Legg til en lenke med teksten “Ask about shipping” i bunnteksten
Lag QR-koder som åpner chatboten med bestemte spørsmål
Inkluder nyttige lenker i e-postkampanjene eller ordrebekreftelsene dine
Legg til kontekstuelle hjelpelinker på produktsider (f.eks. “Ask about sizing”)

Slik bruker du dypelenke for å åpne chatvinduet (må redigere koden i temamalen)

I forrige seksjon gikk vi gjennom hvordan du bruker hashtaggen (dypelenken) til å utløse chatvinduet ved å legge den til på en hvilken som helst knapp, et ikon eller en tekst direkte fra Theme Editor, uten å redigere kodene i temaet ditt.

Hvis du derimot vil ha full fleksibilitet til å legge til dypelenken hvor som helst i butikken din (f.eks. ved å opprette et nytt ikon i headeren), må du redigere malkoden.

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

Kodeeksempler

1. Chat-ikon

Koden nedenfor legger til et chat-ikon:

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 med funksjonskall

I tillegg til å bruke hashtags kan du også legge funksjonskallet openShoplyAIChatBot() i onclick-attributtet til en hvilken som helst knapp/ikon, slik at kunder ser chatvinduet når de klikker på knappen/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-dypelenken i headeren til butikken din.

Hvis du ikke er helt komfortabel med å redigere koden i temamalen din, trenger du ikke bekymre deg!

Du er velkommen til å booke et møte med oss , så hjelper vi deg gjerne med å sette opp det perfekte ikonet på det ideelle stedet som passer butikkens unike stil.

Hvordan skjule det flytende ikonet?

Når du har konfigurert dypelenken for å åpne chatvinduet, kan det hende du ønsker å skjule det flytende ikonet. Dessuten nevner butikkinnehavere ofte at det kan føles overveldende å ha for mange flytende ikoner på nettsidene sine. Vi forstår bekymringene dine! Derfor har vi introdusert en funksjon for å skjule chat-ikonet.

I delen “Customize AI Chat” i appens administrasjonskonsoll, under innstillingene Select a Chat Icon, kan du nå velge:

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

Dette lar deg skjule det flytende ikonet samtidig som du fortsatt kan åpne chatvinduet via en dypelenke.