Så öppnar du chattfönstret med en länk

Du kan öppna chattfönstret genom att använda en deep link utan att ändra ditt temas 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 din temaredigerare.
Ställ in länken eller URL:en till #shoply-ai-chatbot.

Exempel:

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

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

Öppna chatt med produktspecifika frågor

Lägg till en knapp med texten “Question About This Product?” på en produktsida för att hjälpa besökare att ställa frågor om just den produkten. Ställ in dess länk till #shoply_product_questions. När man klickar öppnas chatten med produktnamnet, en kort produktbeskrivning och automatiskt genererade frågor som är relevanta för den produkten.

I Shopify Theme Editor öppnar du din produktmall och lägger till eller redigerar en knapp eller länkad text som stöder en URL.
Ställ in etiketten till “Question About This Product?” och länken till #shoply_product_questions.
Spara, gå till en produktsida och klicka på länken för att kontrollera produktfrågorna.

Om ditt tema inte erbjuder en lämplig knapp- eller länkinställning lägger du till denna länk i produktmallens HTML:

html


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

Använd denna länk på en produktsida så att Shoply får produktkontexten. Du kan också dela en fullständig produkt-URL som slutar med #shoply_product_questions.

Testa produktfrågechatten för Bent 85 Skis . Förslagen innehåller frågor om skidans vikt, kärna, rockerprofil och topsheet-konst. Besökare kan välja ett förslag eller skriva sin egen fråga.

För exempel på var du kan använda dessa länkar, se AI-drivna produktfrågor i vår guide för att ersätta din FAQ-sida.

Dessa produktfrågor genereras automatiskt. De startfrågor du konfigurerar i Customize AI Chat gäller i stället för den vanliga chattöppningen.

Öppna chatt med en förifylld fråga

Vill du öppna chattfönstret och automatiskt skicka en fråga? Du kan göra detta med antingen ett hash-fragment (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: Hash-fragment (ingen sidomladdning)

Använd hash-fragmentet #shoply_question=. Eftersom hashen hanteras helt i webbläsaren kommer ett klick på denna länk inte att ladda om sidan, 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 vilken sida som helst i din butik. Till exempel, för att ö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 metod: 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å kommer det att orsaka en sidomladdning.

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 mellanslag. 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 mellanslag %20).

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

Användningsfall:

Lägg till en länk med texten “Ask about shipping” i din sidfot
Skapa QR-koder som öppnar chatboten med specifika frågor
Inkludera hjälpsamma länkar i dina e-postkampanjer eller orderbekräftelser
Lägg till kontextuella hjälplänkar på produktsidor (t.ex. “Ask about sizing”)

Hur du använder deep link för att öppna chattfönstret (du behöver redigera koden i temamallen)

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

Om du däremot vill ha full flexibilitet att lägga till deep link var som helst i din butik (t.ex. skapa en ny ikon i headern) behöver du redigera mallkoden.

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

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 att använda hashtags kan du också lägga funktionsanropet openShoplyAIChatBot() i onclick-attributet på valfri knapp/ikon, så att kunder ser chattfönstret när de 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 något av exemplen ovan och infoga koden bredvid sökikonen i filen sections/header.liquid för att lägga till chat deep link i din butiks header.

Men om du inte känner dig helt bekväm med att redigera koden i din temamall, oroa dig inte!

Boka gärna ett möte med oss , så hjälper vi dig gärna att sätta upp den perfekta ikonen på den bästa platsen för att matcha din butiks unika känsla.

Hur döljer man den flytande ikonen?

När du har konfigurerat deep link för att öppna chattfönstret kanske du vill dölja den flytande ikonen. Dessutom nämner butiksägare ofta att för många flytande ikoner på deras webbplatser kan kännas överväldigande. Vi förstår dina funderingar! Därför har vi introducerat en funktion för att dölja chattikonen.

I sektionen “Customize AI Chat” i appens administratörskonsol, under inställningarna Select a Chat Icon, kan du nu välja alternativet:

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

Detta gör att du kan dölja den flytande ikonen samtidigt som chattfönstret fortfarande kan öppnas via en deep link.