Kaip naudoti tiesioginę nuorodą pokalbio langui atidaryti (nekeičiant temos kodo)

Pokalbio langą galite atidaryti naudodami tiesioginę nuorodą ir nekeisdami temos kodo. Shopify temos rengyklėje tiesiog prie bet kurio mygtuko, piktogramos ar teksto elemento pridėkite grotelėmis pradedamą dalį #shoply-ai-chatbot. Klientams spustelėjus šiuos elementus, pokalbio langas bus automatiškai atidarytas.

Veikiantis pavyzdys: demo.shoplyai.ai

Veiksmai:

Temos rengyklėje redaguokite norimą mygtuką, tekstą ar piktogramą.
Nustatykite nuorodą arba URL į #shoply-ai-chatbot.

Pavyzdžiai:

Naudokite mygtuką pokalbio langui atidaryti:

Naudokite susietą tekstą pokalbio langui atidaryti:

Pokalbio atidarymas su iš anksto užpildytu klausimu

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

Tai puikiai tinka kuriant tiesiogines nuorodas į dažnas temas, pavyzdžiui, pristatymo taisykles, grąžinimo taisykles ar klausimus apie produktus.

Rekomenduojama: fragmentas su grotelėmis (puslapis neįkeliamas iš naujo)

Naudokite fragmentą su grotelėmis #shoply_question=. Kadangi fragmentas apdorojamas tik naršyklėje, spustelėjus šią nuorodą puslapis nebus įkeltas iš naujo, o esama pokalbio istorija išliks.

Formatas:

plaintext


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

Pavyzdžiai:

Pristatymo taisyklės: https://your-store.com#shoply_question=What is your shipping policy?
Grąžinimas: 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?
Produkto paieška: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Tai galite sujungti su bet kuriuo savo parduotuvės puslapiu. Pavyzdžiui, norėdami atidaryti pokalbių robotą su klausimu konkretaus produkto puslapyje:

plaintext


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

Pasenęs būdas: URL užklausos parametras

?shoply_question= užklausos parametras vis dar palaikomas dėl atgalinio suderinamumo. Atkreipkite dėmesį, kad užklausos parametro pridėjimas prie URL, kuriame klientas jau yra, sukels puslapio įkėlimą iš naujo.

Formatas:

plaintext


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

Pastaba: nepamirškite URL koduoti 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 pakeičiami į %20).

Klientui spustelėjus bet kurio tipo nuorodą, pokalbio langas bus automatiškai atidarytas, o klausimas išsiųstas DI pokalbių robotui, kuris iškart pateiks atsakymą.

Naudojimo atvejai:

Į poraštę įtraukite nuorodą „Klausti apie pristatymą“
Sukurkite QR kodus, kurie atidaro pokalbių robotą su konkrečiais klausimais
Įtraukite naudingas nuorodas į el. pašto kampanijas ar užsakymų patvirtinimus
Produktų puslapiuose pridėkite kontekstinės pagalbos nuorodas (pvz., „Klausti apie dydį“)

Kaip naudoti tiesioginę nuorodą pokalbio langui atidaryti (reikia redaguoti temos šablono kodą)

Ankstesniame skyriuje aptarėme, kaip naudoti grotelėmis pradedamą dalį (tiesioginę nuorodą) pokalbio langui suaktyvinti — ją galima pridėti prie bet kurio mygtuko, piktogramos ar teksto tiesiai iš temos rengyklės, nekeičiant temos kodo.

Tačiau, jei norite visiškos laisvės bet kurioje parduotuvės vietoje pridėti tiesioginę nuorodą (pavyzdžiui, sukurti naują piktogramą antraštėje), turėsite redaguoti šablono kodą.

Toliau pateikiami paprasti HTML kodo pavyzdžiai, kuriuos galite naudoti naujoms piktogramoms temos šablone sukurti:

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. DI žvaigždutės piktograma

Toliau pateiktas kodas prideda DI žvaigždutę:

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 grotelių, bet kurio mygtuko ar piktogramos onclick atribute taip pat galite nurodyti funkcijos iškvietimą openShoplyAIChatBot(), kad klientai, spustelėję mygtuką ar piktogramą, pamatytų 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?

Bet kurį iš pirmiau pateiktų pavyzdžių galite įterpti šalia paieškos piktogramos faile sections/header.liquid ir taip pridėti tiesioginę pokalbio nuorodą į savo parduotuvės antraštę.

Tačiau jei nesijaučiate visiškai užtikrintai redaguodami temos šablono kodą, nesijaudinkite!

Drąsiai galite užsisakyti susitikimą su mumis — mielai padėsime nustatyti tobulą piktogramą idealioje vietoje, kad ji derėtų prie išskirtinio jūsų parduotuvės stiliaus.

Kaip paslėpti slankiąją piktogramą?

Sukonfigūravę tiesioginę nuorodą pokalbio langui atidaryti, galite norėti paslėpti slankiąją piktogramą. Be to, parduotuvių savininkai dažnai mini, kad per daug slankiųjų piktogramų jų svetainėse gali klaidinti. Suprantame jūsų susirūpinimą! Todėl įdiegėme funkciją, leidžiančią paslėpti pokalbio piktogramą.

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

„Slėpti slankiąją piktogramą ir naudoti tiesioginę nuorodą pokalbiui atidaryti“.

Tai leidžia paslėpti slankiąją piktogramą ir kartu išsaugoti galimybę atidaryti pokalbio langą naudojant tiesioginę nuorodą.