Kako uporabiti globoko povezavo za odpiranje okna za klepet (brez urejanja kode teme)

Okno za klepet lahko odprete z globoko povezavo, ne da bi spreminjali kodo svoje teme. V urejevalniku teme Shopify kateremukoli gumbu, ikoni ali besedilnemu elementu preprosto dodajte hashtag #shoply-ai-chatbot. Ko stranke kliknejo te elemente, se bo okno za klepet 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:

Za odpiranje okna za klepet uporabite gumb:

Za odpiranje okna za klepet uporabite povezano besedilo:

Odprite klepet z vnaprej izpolnjenim vprašanjem

Želite odpreti okno za klepet in samodejno poslati vprašanje? To lahko storite z uporabo fragmenta zgoščene oznake (priporočeno) ali parametra poizvedbe URL-ja.

To je idealno za ustvarjanje neposrednih povezav do pogostih tem, kot so pravila dostave, pravila vračil ali vprašanja o izdelkih.

Priporočeno: fragment zgoščene oznake (brez ponovnega nalaganja strani)

Uporabite fragment zgoščene oznake #shoply_question=. Ker se zgoščena oznaka obdela v celoti v brskalniku, klik na to povezavo ne bo znova naložil strani, obstoječa zgodovina klepeta pa se bo ohranila.

Oblika:

plaintext


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

Primeri:

Pravila dostave: 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?
Stanje 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 katerokoli stranjo v svoji trgovini. Če želite na primer odpreti klepetalnega robota z vprašanjem na strani določenega izdelka:

plaintext


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

Zastarelo: parameter poizvedbe URL-ja

Parameter poizvedbe ?shoply_question= je še vedno podprt zaradi združljivosti za nazaj. Upoštevajte, da bo dodajanje parametra poizvedbe URL-ju, na katerem je stranka že, povzročilo ponovno nalaganje strani.

Oblika:

plaintext


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

Opomba: pri uporabi posebnih znakov ali presledkov ne pozabite kodirati vprašanja za URL. Večina brskalnikov bo to uredila samodejno, če pa povezave dodajate programsko, uporabite pravilno kodiranje URL-ja (npr. presledki postanejo %20).

Ko stranka klikne katerokoli od obeh vrst povezav, se bo okno za klepet samodejno odprlo in vprašanje bo poslano klepetalnemu robotu z umetno inteligenco, ki bo zagotovil takojšen odgovor.

Primeri uporabe:

V nogo dodajte povezavo »Vprašajte o dostavi«
Ustvarite kode QR, ki odprejo klepetalnega robota z določenimi vprašanji
V e-poštne kampanje ali potrditve naročil vključite uporabne povezave
Na strani izdelka dodajte kontekstualne povezave do pomoči (npr. »Vprašajte o velikostih«)

Kako uporabiti globoko povezavo za odpiranje okna za klepet (kodo v predlogi teme je treba urediti)

V prejšnjem razdelku smo obravnavali uporabo hashtaga (globoke povezave) za sprožitev okna za klepet, tako da ga dodate poljubnemu gumbu, ikoni ali besedilu neposredno iz urejevalnika teme, brez urejanja kode teme.

Če pa želite popolno prilagodljivost pri dodajanju globoke povezave kamorkoli v trgovino (na primer pri ustvarjanju nove ikone v glavi), boste morali urediti kodo predloge.

Spodaj je nekaj preprostih primerov kode HTML, 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. Ikona zvezdice umetne inteligence

Spodnja koda doda zvezdico umetne inteligence:

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. Način s klicem funkcije

Poleg hashtagov lahko klic funkcije openShoplyAIChatBot() dodate tudi v atribut onclick poljubnega gumba/ikone, tako da se strankam ob kliku gumba/ikone prikaže okno za klepet.

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 vstavite kodo poleg ikone za iskanje v datoteko sections/header.liquid, da v glavo svoje trgovine dodate globoko povezavo za klepet.

Če vam urejanje kode v predlogi teme ni povsem domače, brez skrbi!

Prosto rezervirajte sestanek z nami in z veseljem vam bomo pomagali nastaviti popolno ikono na idealnem mestu, ki se ujema z značajem vaše trgovine.

Kako skriti plavajočo ikono?

Ko nastavite globoko povezavo za odpiranje okna za klepet, boste morda želeli skriti plavajočo ikono. Lastniki trgovin pogosto omenjajo tudi, da je lahko preveliko število plavajočih ikon na njihovih spletnih mestih 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 v nastavitvah Select a Chat Icon zdaj izberete možnost:

»Skrij plavajočo ikono in za odpiranje klepeta uporabi globoko povezavo«.

Tako lahko skrijete plavajočo ikono, hkrati pa omogočite odpiranje okna za klepet prek globoke povezave.