Kaip atidaryti pokalbio langą naudojant nuorodą

Galite atidaryti pokalbio langą naudodami giliąją nuorodą nekeisdami savo temos kodo. Shopify Theme Editor tiesiog pridėkite grotažymę #shoply-ai-chatbot prie bet kurio mygtuko, piktogramos ar teksto elemento. Kai klientai spustelės šiuos elementus, pokalbio langas bus automatiškai atidarytas.

Tiesioginis pavyzdys: demo.shoplyai.ai

Žingsniai:

Savo temos redaktoriuje redaguokite norimą mygtuką, tekstą arba piktogramą.
Nustatykite nuorodą arba URL į #shoply-ai-chatbot.

Pavyzdžiai:

Naudokite mygtuką pokalbio langui atidaryti:

Naudokite susietą tekstą pokalbio langui atidaryti:

Atidarykite pokalbį su konkrečiam produktui skirtais klausimais

Pridėkite mygtuką „Turite klausimą apie šį produktą?“ produkto puslapyje, kad pirkėjai galėtų užduoti klausimus apie tą prekę. Nustatykite jo nuorodą į #shoply_product_questions. Ją paspaudus, atsidarys pokalbis su produkto pavadinimu, trumpu produkto aprašymu ir automatiškai sugeneruotais tam produktui aktualiais klausimais.

Shopify Theme Editor atidarykite savo produkto šabloną ir pridėkite arba redaguokite mygtuką ar susietą tekstą, kuris palaiko URL.
Nustatykite etiketę į „Turite klausimą apie šį produktą?“ ir nuorodą į #shoply_product_questions.
Išsaugokite, apsilankykite produkto puslapyje ir spustelėkite nuorodą, kad patikrintumėte produkto klausimus.

Jei jūsų tema nesiūlo tinkamo mygtuko ar nuorodos nustatymo, pridėkite šią nuorodą produkto šablono HTML faile:

html


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

Naudokite šią nuorodą produkto puslapyje, kad Shoply turėtų produkto kontekstą. Taip pat galite bendrinti pilną produkto URL, kuris baigiasi #shoply_product_questions.

Išbandykite produkto klausimų pokalbį apie Bent 85 Skis . Pasiūlymuose yra klausimų apie slidžių svorį, branduolį, rocker profilį ir topsheet dizainą. Pirkėjai gali pasirinkti pasiūlymą arba įvesti savo klausimą.

Norėdami pamatyti pavyzdžius, kur naudoti šias nuorodas, žr. AI pagrįsti produkto klausimai mūsų DUK pakeitimo gide.

Šie produkto klausimai generuojami automatiškai. Pradiniai klausimai, kuriuos sukonfigūruojate Customize AI Chat, taikomi vietoje to standartiniam pokalbio atidarymui.

Atidarykite pokalbį su iš anksto užpildytu klausimu

Norite atidaryti pokalbio langą ir automatiškai išsiųsti klausimą? Tai galite padaryti naudodami hash fragmentą (rekomenduojama) arba URL užklausos parametrą.

Tai puikiai tinka kuriant tiesiogines nuorodas į dažnas temas, pvz., siuntimo politiką, grąžinimo politiką ar užklausas apie produktus.

Rekomenduojama: Hash fragmentas (be puslapio perkrovimo)

Naudokite #shoply_question= hash fragmentą. Kadangi hash apdorojamas visiškai naršyklėje, spustelėjus šią nuorodą puslapis nebus perkrautas, o visa esama pokalbio istorija bus išsaugota.

Formatas:

plaintext


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

Pavyzdžiai:

Siuntimo politika: https://your-store.com#shoply_question=What is your shipping policy?
Grąžinimai: https://your-store.com#shoply_question=How do I return an item?
Užsakymo būsena: https://your-store.com#shoply_question=Where is my order?
Produktų paieška: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Tai galite derinti su bet kuriuo savo parduotuvės puslapiu. Pavyzdžiui, jei norite atidaryti pokalbių robotą su klausimu konkrečiame produkto puslapyje:

plaintext


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

Ankstesnis būdas: URL užklausos parametras

Parametras ?shoply_question= vis dar palaikomas dėl atgalinio suderinamumo. Atkreipkite dėmesį, kad pridėjus užklausos parametrą prie URL, kuriame klientas jau yra, puslapis bus perkrautas.

Formatas:

plaintext


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

Pastaba: Nepamirškite URL užkoduoti savo klausimo, kai naudojate specialiuosius simbolius ar tarpus. Dauguma naršyklių tai atliks automatiškai, tačiau jei nuorodas pridedate programiškai, naudokite tinkamą URL kodavimą (pvz., tarpai tampa %20).

Kai klientas spusteli bet kurio tipo nuorodą, pokalbio langas bus automatiškai atidarytas, o klausimas bus išsiųstas AI pokalbių robotui, kuris iškart pateiks atsakymą.

Naudojimo atvejai:

Pridėkite nuorodą „Klausti apie siuntimą“ savo poraštėje
Kurkite QR kodus, kurie atidaro pokalbių robotą su konkrečiais klausimais
Įtraukite naudingas nuorodas į savo el. pašto kampanijas arba užsakymo patvirtinimus
Pridėkite kontekstines pagalbos nuorodas produkto puslapiuose (pvz., „Klausti apie dydį“)

Kaip naudoti giliąją nuorodą pokalbio langui atidaryti (reikia redaguoti kodą temos šablone)

Ankstesniame skyriuje aptarėme, kaip naudoti grotažymę (giliąją nuorodą) pokalbio langui suaktyvinti, pridedant ją prie bet kurio mygtuko, piktogramos ar teksto tiesiai iš Theme Editor, neredaguojant temos kodo.

Tačiau jei norite visiško lankstumo ir galimybės pridėti giliąją nuorodą bet kurioje savo parduotuvės vietoje (pvz., sukurti naują piktogramą antraštėje), jums reikės redaguoti šablono kodą.

Toliau pateikiami paprasti HTML kodo pavyzdžiai, kuriuos galite naudoti kurdami naujas piktogramas savo temos šablone:

Kodo pavyzdžiai

1. Pokalbio piktograma

Toliau pateiktas kodas prideda pokalbio piktogramą:

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 žvaigždės piktograma

Toliau pateiktas kodas prideda AI žvaigždę:

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. Funkcijos iškvietimo metodas

Be grotažymių naudojimo, taip pat galite įdėti funkcijos iškvietimą openShoplyAIChatBot() į bet kurio mygtuko / piktogramos onclick atributą, kad klientai, spustelėję mygtuką / piktogramą, matytų pokalbio langą.

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>

Reikia pagalbos?

Galite naudoti bet kurį iš aukščiau pateiktų pavyzdžių ir įterpti kodą šalia paieškos piktogramos sections/header.liquid faile, kad pridėtumėte pokalbio giliąją nuorodą į savo parduotuvės antraštę.

Tačiau jei nesijaučiate visiškai patogiai redaguodami kodą savo temos šablone, nesijaudinkite!

Drąsiai užsisakykite susitikimą su mumis , ir mes mielai padėsime jums nustatyti tobulą piktogramą idealioje vietoje, kad ji atitiktų unikalų jūsų parduotuvės stilių.

Kaip paslėpti slankiąją piktogramą?

Sukonfigūravę giliąją nuorodą pokalbio langui atidaryti, galbūt norėsite paslėpti slankiąją piktogramą. Be to, parduotuvių savininkai dažnai mini, kad per daug slankiųjų piktogramų jų svetainėse gali blaškyti. Mes suprantame jūsų rūpestį! Todėl pristatėme funkciją, leidžiančią paslėpti pokalbio piktogramą.

Programėlės administravimo konsolės skiltyje „Customize AI Chat“, po Select a Chat Icon nustatymais, dabar galite pasirinkti:

„Hide floating icon and use deep link to open chat“ parinktį.

Tai leidžia paslėpti slankiąją piktogramą, kartu vis tiek leidžiant atidaryti pokalbio langą per giliąją nuorodą.