Så använder du en deep link för att öppna chattfönstret (utan att redigera temats kod)

Du kan öppna chattfönstret med en deep link utan att ändra temats kod. I Shopify Theme Editor lägger du helt enkelt till hashtaggen #shoply-ai-chatbot på valfri knapp, ikon eller textelement. När kunder klickar på dessa element öppnas chattfönstret automatiskt.

Liveexempel: demo.shoplyai.ai

Steg:

Redigera önskad knapp, text eller ikon i temaredigeraren.
Ange #shoply-ai-chatbot som länk eller URL.

Exempel:

Använd en knapp för att öppna chattfönstret:

Använd en länkad text för att öppna chattfönstret:

Öppna chatten med en förifylld fråga

Vill du öppna chattfönstret och skicka en fråga automatiskt? Du kan göra det med antingen ett hashfragment (rekommenderas) eller en URL-frågeparameter.

Detta är perfekt för att skapa direktlänkar till vanliga ämnen som leveranspolicy, returpolicy eller produktfrågor.

Rekommenderat: Hashfragment (ingen omladdning av sidan)

Använd hashfragmentet #shoply_question=. Eftersom hashfragmentet bearbetas helt i webbläsaren laddas sidan inte om när du klickar på länken, och eventuell befintlig chatthistorik bevaras.

Format:

plaintext


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

Exempel:

Leveranspolicy: https://your-store.com#shoply_question=What is your shipping policy?
Returer: https://your-store.com#shoply_question=How do I return an item?
Orderstatus: https://your-store.com#shoply_question=Where is my order?
Produktupptäckt: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Du kan kombinera detta med valfri sida i din butik. Om du till exempel vill öppna chatboten med en fråga på en specifik produktsida:

plaintext


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

Äldre: URL-frågeparameter

Frågeparametern ?shoply_question= stöds fortfarande för bakåtkompatibilitet. Observera att om du lägger till en frågeparameter i en URL som kunden redan befinner sig på leder det till en omladdning av sidan.

Format:

plaintext


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

Obs! Kom ihåg att URL-koda din fråga när du använder specialtecken eller blanksteg. De flesta webbläsare hanterar detta automatiskt, men om du lägger till länkar programmatiskt ska du använda korrekt URL-kodning (t.ex. blir blanksteg %20).

När en kund klickar på någon av länktyperna öppnas chattfönstret automatiskt och frågan skickas till AI-chatboten, som ger ett omedelbart svar.

Användningsområden:

Lägg till en ”Fråga om leverans”-länk i sidfoten
Skapa QR-koder som öppnar chatboten med specifika frågor
Inkludera användbara länkar i dina e-postkampanjer eller orderbekräftelser
Lägg till kontextuella hjälplänkar på produktsidor (t.ex. ”Fråga om storlekar”)

Så använder du en deep link för att öppna chattfönstret (temamallens kod måste redigeras)

I föregående avsnitt gick vi igenom hur du använder hashtaggen (deep link) för att aktivera chattfönstret genom att lägga till den på valfri knapp, ikon eller text direkt från Theme Editor, utan att redigera temats kod.

Men om du vill ha full flexibilitet att lägga till deep linken var som helst i butiken (t.ex. skapa en ny ikon i sidhuvudet) behöver du redigera mallkoden.

Nedan finns enkla HTML-kodexempel som du kan använda för att skapa nya ikoner i temamallen:

Kodexempel

1. Chattikon

Koden nedan lägger till en chattikon:

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-stjärnikon

Koden nedan lägger till en AI-stjärna:

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. Metod med funktionsanrop

Förutom hashtags kan du också lägga funktionsanropet openShoplyAIChatBot() i attributet onclick för valfri knapp/ikon, så att chattfönstret visas när kunden klickar på knappen/ikonen.

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>

Behöver du hjälp?

Du kan använda vilket som helst av exemplen ovan och lägga in koden bredvid sökikonen i filen sections/header.liquid för att lägga till chattens deep link i butikens sidhuvud.

Men om du inte känner dig helt bekväm med att redigera koden i temamallen behöver du inte oroa dig!

Du kan gärna boka ett möte med oss , så hjälper vi dig att konfigurera den perfekta ikonen på den idealiska platsen för att passa butikens unika stil.

Hur döljer jag den flytande ikonen?

När du har konfigurerat deep linken för att öppna chattfönstret kanske du vill dölja den flytande ikonen. Butiksägare nämner också ofta att för många flytande ikoner på deras webbplatser kan kännas överväldigande. Vi förstår din oro! Därför har vi infört en funktion för att dölja chattikonen.

I avsnittet ”Customize AI Chat” i appens administrationskonsol kan du under inställningarna Select a Chat Icon nu välja alternativet:

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

Detta låter dig dölja den flytande ikonen och samtidigt behålla möjligheten att öppna chattfönstret via en deep link.