Sådan bruger du et deep link til at åbne chatvinduet (uden at redigere temakode)

Du kan åbne chatvinduet ved hjælp af et deep link uden at ændre koden i dit tema. I Shopify Theme Editor skal du blot fø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.

Liveeksempel: demo.shoplyai.ai

Trin:

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

Eksempler:

Brug en knap til at åbne chatvinduet:

Brug en tekst med link til at åbne chatvinduet:

Åbn chatten med et udfyldt spørgsmål

Vil du åbne chatvinduet og automatisk sende et spørgsmål? Det kan du gøre enten med et hash-fragment (anbefalet) eller en URL-forespørgselsparameter.

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

Anbefalet: Hash-fragment (ingen genindlæsning af siden)

Brug hash-fragmentet #shoply_question=. Da hashen behandles helt i browseren, genindlæses siden ikke, når der klikkes på dette link, og eksisterende chathistorik bevares.

Format:

plaintext


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

Eksempler:

Leveringspolitik: https://your-store.com#shoply_question=What is your shipping policy?
Returnering: 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. Du kan f.eks. å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 løsning: URL-forespørgselsparameter

Forespørgselsparameteren ?shoply_question= understøttes stadig af hensyn til bagudkompatibilitet. Bemærk, at hvis du føjer en forespørgselsparameter til en URL, kunden allerede er på, medfører det en genindlæsning af siden.

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.

Anvendelsesområder:

Tilføj et link med teksten “Spørg om levering” i din sidefod
Opret QR-koder, der åbner chatbotten med specifikke spørgsmål
Medtag nyttige links i dine e-mailkampagner eller ordrebekræftelser
Tilføj kontekstuelle hjælpelinks på produktsider (f.eks. “Spørg om størrelse”)

Sådan bruger du et 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 linket) til at udløse chatvinduet ved at føje det til en vilkårlig knap, et ikon eller en tekst direkte fra Theme Editor uden at redigere koden i dit tema.

Hvis du gerne vil have fuld fleksibilitet til at tilføje deep linket hvor som helst i din butik (f.eks. oprette et nyt ikon i sidehovedet), skal du redigere skabelonkoden.

Nedenfor finder du enkle HTML-kodeeksempler, som du kan bruge til at oprette nye ikoner i dit temas skabelon:

Kodeeksempler

1. Chatikon

Koden nedenfor tilføjer et chatikon:

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å placere funktionskaldet openShoplyAIChatBot() i onclick-attributten for en vilkårlig knap/et vilkårligt ikon, så kunderne 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 føje chat-deep-linket til din butiks sidehoved.

Hvis du ikke føler dig helt tryg ved at redigere koden i dit temas skabelon, skal du dog ikke være bekymret!

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

Sådan skjuler du det flydende ikon

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

I afsnittet “Tilpas AI-chat” i appens administrationskonsol kan du under indstillingerne Vælg et chatikon nu vælge:

Indstillingen “Skjul flydende ikon, og brug et deep link til at åbne chatten”.

Det giver dig mulighed for at skjule det flydende ikon, samtidig med at chatvinduet stadig kan åbnes via et deep link.