Sådan åbner du chatvinduet med et link

Du kan åbne chatvinduet ved at bruge et deep link uden at ændre dit temas kode. I Shopify Theme Editor skal du blot tilføje hashtagget #shoply-ai-chatbot til en vilkårlig knap, et ikon eller et tekstelement. Når kunder klikker på disse elementer, åbnes chatvinduet automatisk.

Live-eksempel: demo.shoplyai.ai

Trin:

Rediger den ønskede knap, tekst eller det ønskede ikon i din theme editor.
Indstil linket eller URL’en til #shoply-ai-chatbot.

Eksempler:

Brug en knap til at åbne chatvinduet:

Brug en linket tekst til at åbne chatvinduet:

Åbn chat med produktspecifikke spørgsmål

Tilføj en “Question About This Product?”-knap på en produktside for at hjælpe kunder med at stille spørgsmål om den vare. Sæt dens link til #shoply_product_questions. Når der klikkes på den, åbnes chatten med produktnavnet, en kort produkthighlight og automatisk genererede spørgsmål, der er relevante for det pågældende produkt.

Åbn din produktskabelon i Shopify Theme Editor, og tilføj eller rediger en knap eller linket tekst, der understøtter en URL.
Sæt etiketten til “Question About This Product?” og linket til #shoply_product_questions.
Gem, besøg en produktside, og klik på linket for at kontrollere produktspørgsmålene.

Hvis dit tema ikke tilbyder en passende knap- eller linkindstilling, kan du tilføje dette link i produktskabelonens HTML:

html


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

Brug dette link på en produktside, så Shoply har produktkonteksten. Du kan også dele en fuld produkt-URL, der slutter med #shoply_product_questions.

Prøv chatten med produktspørgsmål for Bent 85 Skis . Forslagene omfatter spørgsmål om skivægt, kerne, rocker-profil og topsheet-kunst. Kunder kan vælge et forslag eller skrive deres eget spørgsmål.

For eksempler på, hvor du kan bruge disse links, se AI-drevne produktspørgsmål i vores guide til at erstatte din FAQ-side.

Disse produktspørgsmål genereres automatisk. De startspørgsmål, du konfigurerer i Customize AI Chat, gælder i stedet for den almindelige chatåbning.

Åbn chat med et forudfyldt spørgsmål

Vil du åbne chatvinduet og automatisk sende et spørgsmål? Det kan du gøre ved hjælp af enten et hash-fragment (anbefalet) eller en URL query-parameter.

Dette er perfekt til at oprette direkte links til almindelige emner som fragtpolitik, returpolitik eller produktforespørgsler.

Anbefalet: Hash-fragment (ingen sidegenindlæsning)

Brug hash-fragmentet #shoply_question=. Fordi hashen behandles fuldstændigt i browseren, vil et klik på dette link ikke genindlæse siden, og eksisterende chathistorik bevares.

Format:

plaintext


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

Eksempler:

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

Du kan kombinere dette med enhver side i din butik. For eksempel, for at åbne chatbotten med et spørgsmål på en bestemt produktside:

plaintext


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

Ældre metode: URL query-parameter

Query-parameteren ?shoply_question= understøttes stadig af hensyn til bagudkompatibilitet. Bemærk, at hvis du tilføjer en query-parameter til en URL, som kunden allerede er på, vil det medføre en sidegenindlæsning.

Format:

plaintext


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

Bemærk: Husk at URL-kode dit spørgsmål, når du bruger specialtegn eller mellemrum. De fleste browsere håndterer dette automatisk, men hvis du tilføjer links programmatisk, skal du bruge korrekt URL-kodning (f.eks. bliver mellemrum til %20).

Når en kunde klikker på en af linktyperne, åbnes chatvinduet automatisk, og spørgsmålet sendes til AI-chatbotten, som giver et øjeblikkeligt svar.

Anvendelsestilfælde:

Tilføj et “Ask about shipping”-link i din footer
Opret QR-koder, der åbner chatbotten med specifikke spørgsmål
Inkludér nyttige links i dine e-mailkampagner eller ordrebekræftelser
Tilføj kontekstuelle hjælpelinks på produktsider (f.eks. “Ask about sizing”)

Sådan bruger du deep link til at åbne chatvinduet (kræver redigering af koden i temaskabelonen)

I det foregående afsnit gennemgik vi, hvordan du bruger hashtagget (deep link) til at udløse chatvinduet ved at tilføje det til en vilkårlig knap, et ikon eller tekst direkte fra Theme Editor, uden at redigere dit temas kode.

Hvis du derimod ønsker fuld fleksibilitet til at tilføje deep linket hvor som helst i din butik (f.eks. ved at oprette et nyt ikon i headeren), skal du redigere skabelonkoden.

Nedenfor er enkle HTML-kodeeksempler, du kan bruge til at oprette nye ikoner i din Theme template:

Kodeeksempler

1. Chat-ikon

Koden nedenfor tilføjer 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 tilføjer 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 funktionskald

Ud over at bruge hashtags kan du også sætte funktionskaldet openShoplyAIChatBot() i onclick-attributten på en vilkårlig knap/ikon, så 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>

Har du brug for hjælp?

Du kan bruge et hvilket som helst af eksemplerne ovenfor og indsætte koden ved siden af søgeikonet i filen sections/header.liquid for at tilføje chat-deep linket til din butiks header.

Men hvis du ikke er helt tryg ved at redigere koden i din Theme template, så bare rolig!

Du er velkommen til at booke et møde med os , så hjælper vi dig gerne med at sætte det perfekte ikon op på det ideelle sted, så det passer til din butiks unikke stil.

Hvordan skjuler du det flydende ikon?

Når du har konfigureret deep linket til at åbne chatvinduet, vil du måske gerne skjule det flydende ikon. Derudover nævner butiksejere ofte, at det kan være overvældende at have for mange flydende ikoner på deres websites. Vi forstår dine bekymringer! Derfor har vi introduceret en funktion til at skjule chatikonet.

I sektionen “Customize AI Chat” i appens admin-konsol, under indstillingerne Select a Chat Icon, kan du nu vælge:

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

Denne mulighed gør det muligt at skjule det flydende ikon, mens chatvinduet stadig kan åbnes via et deep link.