Kako odpreti okno klepeta s povezavo

Okno klepeta lahko odprete z uporabo globoke povezave, ne da bi spreminjali kodo svoje teme. V Shopify Theme Editorju preprosto dodajte lojtro #shoply-ai-chatbot kateremu koli gumbu, ikoni ali besedilnemu elementu. Ko stranke kliknejo te elemente, se bo okno klepeta samodejno odprlo.

Primer v živo: demo.shoplyai.ai

Koraki:

V urejevalniku teme uredite želeni gumb, besedilo ali ikono.
Povezavo ali URL nastavite na #shoply-ai-chatbot.

Primeri:

Uporabite gumb za odpiranje okna klepeta:

Uporabite povezano besedilo za odpiranje okna klepeta:

Odprite klepet z vprašanji, specifičnimi za izdelek

Na stran izdelka dodajte gumb »Vprašanje o tem izdelku?«, da kupcem pomagate zastaviti vprašanja o tem izdelku. Njegovo povezavo nastavite na #shoply_product_questions. Klik nanj odpre klepet z imenom izdelka, kratkim poudarkom izdelka in samodejno ustvarjenimi vprašanji, povezanimi s tem izdelkom.

V Shopify Theme Editorju odprite predlogo izdelka in dodajte ali uredite gumb ali povezano besedilo, ki podpira URL.
Oznako nastavite na »Vprašanje o tem izdelku?«, povezavo pa na #shoply_product_questions.
Shranite, obiščite stran izdelka in kliknite povezavo, da preverite vprašanja o izdelku.

Če vaša tema ne ponuja primerne nastavitve gumba ali povezave, dodajte to povezavo v HTML predloge izdelka:

html


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

To povezavo uporabite na strani izdelka, da bo imel Shoply kontekst izdelka. Delite lahko tudi celoten URL izdelka, ki se konča z #shoply_product_questions.

Preizkusite klepet z vprašanji o izdelku za Bent 85 Skis . Predlogi vključujejo vprašanja o teži smuči, jedru, rocker profilu in grafiki topsheeta. Kupci lahko izberejo predlog ali vnesejo svoje vprašanje.

Za primere, kje uporabiti te povezave, si oglejte vprašanja o izdelkih z umetno inteligenco v našem vodiču za zamenjavo FAQ strani.

Ta vprašanja o izdelkih se ustvarijo samodejno. Začetna vprašanja, ki jih nastavite v Customize AI Chat, veljajo namesto tega za standardno odpiranje klepeta.

Odprite klepet z vnaprej izpolnjenim vprašanjem

Želite odpreti okno klepeta in samodejno poslati vprašanje? To lahko storite bodisi z fragmentom hash (priporočeno) bodisi z URL poizvedbenim parametrom.

To je popolno za ustvarjanje neposrednih povezav do pogostih tem, kot so politika pošiljanja, politika vračil ali vprašanja o izdelkih.

Priporočeno: fragment hash (brez ponovnega nalaganja strani)

Uporabite fragment hash #shoply_question=. Ker se hash v celoti obdela v brskalniku, klik na to povezavo ne bo ponovno naložil strani, obstoječa zgodovina klepeta pa se ohrani.

Oblika:

plaintext


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

Primeri:

Politika pošiljanja: https://your-store.com#shoply_question=What is your shipping policy?
Vračila: https://your-store.com#shoply_question=How do I return an item?
Status naročila: https://your-store.com#shoply_question=Where is my order?
Iskanje izdelkov: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

To lahko združite s katero koli stranjo v svoji trgovini. Na primer, če želite odpreti klepetalni bot z vprašanjem na določeni strani izdelka:

plaintext


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

Starejši način: URL poizvedbeni parameter

Poizvedbeni parameter ?shoply_question= je še vedno podprt zaradi združljivosti za nazaj. Upoštevajte, da bo dodajanje poizvedbenega parametra v URL, na katerem je stranka že prisotna, povzročilo ponovno nalaganje strani.

Oblika:

plaintext


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

Opomba: Ne pozabite URL-kodirati svojega vprašanja, kadar uporabljate posebne znake ali presledke. Večina brskalnikov bo to samodejno obdelala, če pa povezave dodajate programsko, uporabite ustrezno URL-kodiranje (npr. presledki postanejo %20).

Ko stranka klikne katero koli od obeh vrst povezav, se bo okno klepeta samodejno odprlo in vprašanje bo poslano AI klepetalnemu botu, ki bo takoj podal odgovor.

Primeri uporabe:

V nogo strani dodajte povezavo »Vprašajte o pošiljanju«
Ustvarite QR kode, ki odprejo klepetalni bot z določenimi vprašanji
Vključite uporabne povezave v e-poštne kampanje ali potrditve naročil
Dodajte kontekstualne povezave za pomoč na straneh izdelkov (npr. »Vprašajte o velikosti«)

Kako uporabiti globoko povezavo za odpiranje okna klepeta (potrebno je urediti kodo v predlogi teme)

V prejšnjem razdelku smo obravnavali, kako uporabiti lojtro (globoko povezavo) za sprožitev okna klepeta tako, da jo dodate kateremu koli gumbu, ikoni ali besedilu neposredno iz Theme Editorja, brez urejanja kode teme.

Če pa želite popolno prilagodljivost in želite globoko povezavo dodati kamor koli v svoji trgovini (na primer ustvariti novo ikono v glavi strani), boste morali urediti kodo predloge.

Spodaj so preprosti primeri HTML kode, ki jih lahko uporabite za ustvarjanje novih ikon v predlogi teme:

Primeri kode

1. Ikona klepeta

Spodnja koda doda ikono klepeta:

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 zvezda ikona

Spodnja koda doda AI zvezdo:

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. Metoda klica funkcije

Poleg uporabe lojter lahko v atribut onclick katerega koli gumba/ikone dodate tudi klic funkcije openShoplyAIChatBot(), tako da bodo stranke ob kliku na gumb/ikono videle okno klepeta.

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>

Potrebujete pomoč?

Uporabite lahko katerega koli od zgornjih primerov in kodo vstavite poleg ikone za iskanje v datoteki sections/header.liquid, da dodate globoko povezavo do klepeta v glavo svoje trgovine.

Če pa vam urejanje kode v predlogi teme ni povsem udobno, brez skrbi!

Brez zadržkov rezervirajte sestanek z nami , z veseljem vam bomo pomagali nastaviti popolno ikono na idealnem mestu, da se bo ujemala z edinstvenim videzom vaše trgovine.

Kako skriti plavajočo ikono?

Ko nastavite globoko povezavo za odpiranje okna klepeta, boste morda želeli skriti plavajočo ikono. Lastniki trgovin pogosto omenjajo tudi, da je lahko preveč plavajočih ikon na njihovih spletnih straneh preobremenjujoče. Razumemo vaše pomisleke! Zato smo uvedli funkcijo za skrivanje ikone klepeta.

V razdelku »Customize AI Chat« v skrbniški konzoli aplikacije lahko pod nastavitvami Select a Chat Icon zdaj izberete možnost:

»Hide floating icon and use deep link to open chat«

To vam omogoča, da skrijete plavajočo ikono, medtem ko se okno klepeta še vedno lahko odpre prek globoke povezave.