Chat-ikkunan avaaminen syvälinkillä (teeman koodia muokkaamatta)

Voit avata chat-ikkunan syvälinkillä muokkaamatta teemasi koodia. Lisää Shopify Theme Editorissa yksinkertaisesti hashtag #shoply-ai-chatbot mihin tahansa painikkeeseen, kuvakkeeseen tai tekstielementtiin. Kun asiakkaat napsauttavat näitä elementtejä, chat-ikkuna avautuu automaattisesti.

Esimerkki käytännössä: demo.shoplyai.ai

Vaiheet:

Muokkaa haluamaasi painiketta, tekstiä tai kuvaketta teemaeditorissa.
Aseta linkiksi tai URL-osoitteeksi #shoply-ai-chatbot.

Esimerkit:

Avaa chat-ikkuna painikkeella:

Avaa chat-ikkuna linkitetyllä tekstillä:

Chat-ikkunan avaaminen valmiiksi täytetyn kysymyksen kanssa

Haluatko avata chat-ikkunan ja lähettää samalla automaattisesti kysymyksen? Voit tehdä tämän joko hash-fragmentilla (suositus) tai URL-kyselyparametrilla.

Tämä sopii erinomaisesti suorien linkkien luomiseen yleisistä aiheista, kuten toimituskäytännöistä, palautuskäytännöistä tai tuotteita koskevista tiedusteluista.

Suositus: hash-fragmentti (sivu ei lataudu uudelleen)

Käytä #shoply_question=-hash-fragmenttia. Koska selain käsittelee hash-fragmentin kokonaan, tämän linkin napsauttaminen ei lataa sivua uudelleen, ja olemassa oleva chat-historia säilyy.

Muoto:

plaintext


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

Esimerkit:

Toimituskäytäntö: https://your-store.com#shoply_question=What is your shipping policy?
Palautukset: https://your-store.com#shoply_question=How do I return an item?
Tilauksen tila: https://your-store.com#shoply_question=Where is my order?
Tuotteen etsiminen: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Voit yhdistää tämän mihin tahansa kauppasi sivuun. Voit esimerkiksi avata chatbotin kysymyksen kanssa tietyn tuotteen sivulla:

plaintext


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

Vanha tapa: URL-kyselyparametri

?shoply_question=-kyselyparametria tuetaan edelleen taaksepäin yhteensopivuuden vuoksi. Huomaa, että kyselyparametrin lisääminen URL-osoitteeseen, jolla asiakas on jo, aiheuttaa sivun uudelleenlatauksen.

Muoto:

plaintext


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

Huomautus: Muista URL-koodata kysymyksesi, kun käytät erikoismerkkejä tai välilyöntejä. Useimmat selaimet käsittelevät tämän automaattisesti, mutta jos lisäät linkkejä ohjelmallisesti, käytä asianmukaista URL-koodausta (esimerkiksi välilyönneistä tulee %20).

Kun asiakas napsauttaa jompaakumpaa linkkityyppiä, chat-ikkuna avautuu automaattisesti ja kysymys lähetetään tekoälychatbotille, joka antaa siihen välittömän vastauksen.

Käyttötapaukset:

Lisää alatunnisteeseen “Kysy toimituksesta” -linkki
Luo QR-koodeja, jotka avaavat chatbotin tiettyjen kysymysten kanssa
Lisää hyödyllisiä linkkejä sähköpostikampanjoihin tai tilausvahvistuksiin
Lisää tuotteen sivuille asiayhteyteen sopivia ohjeisiin johtavia linkkejä (esimerkiksi “Kysy koosta”)

Chat-ikkunan avaaminen syvälinkillä (teeman mallin koodia on muokattava)

Edellisessä osiossa käsittelimme, miten hashtagia (syvälinkkiä) käytetään chat-ikkunan avaamiseen lisäämällä se mihin tahansa painikkeeseen, kuvakkeeseen tai tekstiin suoraan Theme Editorissa ilman teeman koodin muokkaamista.

Jos kuitenkin haluat täyden joustavuuden lisätä syvälinkin mihin tahansa kohtaan kaupassasi (esimerkiksi luoda uuden kuvakkeen otsakkeeseen), sinun on muokattava mallin koodia.

Alla on yksinkertaisia HTML-koodiesimerkkejä, joiden avulla voit luoda uusia kuvakkeita teeman malliin:

Koodiesimerkit

1. Chat-kuvake

Alla oleva koodi lisää chat-kuvakkeen:

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-tähtikuvake

Alla oleva koodi lisää AI-tähden:

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. Funktiokutsumenetelmä

Hashtagien lisäksi voit myös sijoittaa funktiokutsun openShoplyAIChatBot() minkä tahansa painikkeen tai kuvakkeen onclick-määritteeseen, jolloin asiakkaat näkevät chat-ikkunan napsauttaessaan painiketta tai kuvaketta.

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>

Tarvitsetko apua?

Voit käyttää mitä tahansa edellä olevista esimerkeistä ja lisätä koodin hakukuvakkeen viereen sections/header.liquid-tiedostossa, jolloin saat chatin syvälinkin kauppasi otsakkeeseen.

Jos et kuitenkaan tunne oloasi täysin varmaksi teeman mallin koodin muokkaamisessa, älä huoli!

Voit halutessasi varata tapaamisen kanssamme , niin autamme mielellämme määrittämään täydellisen kuvakkeen ihanteelliseen paikkaan, joka sopii kauppasi ainutlaatuiseen ilmeeseen.

Kelluvan kuvakkeen piilottaminen

Kun olet määrittänyt syvälinkin avaamaan chat-ikkunan, saatat haluta piilottaa kelluvan kuvakkeen. Kauppojen omistajat mainitsevat usein myös, että liian monet kelluvat kuvakkeet heidän verkkosivustoillaan voivat tuntua häiritseviltä. Ymmärrämme huolesi! Siksi olemme lisänneet ominaisuuden, jolla chat-kuvake voidaan piilottaa.

Sovelluksen hallintakonsolin “Customize AI Chat” -osiossa, Select a Chat Icon -asetuksissa, voit nyt valita seuraavan:

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

Näin voit piilottaa kelluvan kuvakkeen ja säilyttää silti mahdollisuuden avata chat-ikkunan syvälinkillä.