Kuinka avata chat-ikkuna linkillä

Voit avata chat-ikkunan käyttämällä syvälinkkiä ilman, että muokkaat teemasi koodia. Lisää Shopify Theme Editorissa yksinkertaisesti hashtag #shoply-ai-chatbot mihin tahansa painikkeeseen, ikoniin tai tekstielementtiin. Kun asiakkaat klikkaavat näitä elementtejä, chat-ikkuna avautuu automaattisesti.

Toimiva esimerkki: demo.shoplyai.ai

Vaiheet:

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

Esimerkkejä:

Avaa chat-ikkuna painikkeella:

Avaa chat-ikkuna linkitetyllä tekstillä:

Avaa chat tuotekohtaisilla kysymyksillä

Lisää tuotetietosivulle “Kysymys tästä tuotteesta?” -painike, jotta ostajat voivat kysyä juuri kyseisestä tuotteesta. Aseta sen linkiksi #shoply_product_questions. Sitä klikkaamalla chat avautuu tuotteen nimen, lyhyen tuote-esittelyn ja automaattisesti luotujen kyseiseen tuotteeseen liittyvien kysymysten kanssa.

Avaa Shopify Theme Editorissa tuotemallisi ja lisää tai muokkaa painiketta tai linkitettyä tekstiä, joka tukee URL-osoitetta.
Aseta otsikoksi “Kysymys tästä tuotteesta?” ja linkiksi #shoply_product_questions.
Tallenna, siirry tuotetietosivulle ja klikkaa linkkiä tarkistaaksesi tuotekysymykset.

Jos teemasi ei tarjoa sopivaa painike- tai linkkiasetusta, lisää tämä linkki tuotemallin HTML-koodiin:

html


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

Käytä tätä linkkiä tuotetietosivulla, jotta Shoply saa tuotteen kontekstin. Voit myös jakaa täydellisen tuote-URL-osoitteen, jonka lopussa on #shoply_product_questions.

Kokeile Bent 85 Skis -tuotekysymyschattia . Ehdotuksiin sisältyy kysymyksiä suksien painosta, ytimestä, rocker-profiilista ja topsheet-grafiikasta. Ostajat voivat valita ehdotuksen tai kirjoittaa oman kysymyksensä.

Esimerkkejä siitä, missä näitä linkkejä voi käyttää, löydät kohdasta AI-powered product questions in our FAQ replacement guide.

Nämä tuotekysymykset luodaan automaattisesti. Customize AI Chat -osiossa määrittämäsi aloituskysymykset koskevat sen sijaan tavallista chatin avaamista.

Avaa chat valmiiksi täytetyllä kysymyksellä

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

Tämä sopii täydellisesti suorien linkkien luomiseen yleisiin aiheisiin, kuten toimituskäytäntöihin, palautuskäytäntöihin tai tuotekyselyihin.

Suositeltu: Hash-fragmentti (ei sivun uudelleenlatausta)

Käytä #shoply_question=-hash-fragmenttia. Koska hash käsitellään kokonaan selaimessa, tämän linkin klikkaaminen ei lataa sivua uudelleen, ja olemassa oleva chathistoria säilyy.

Muoto:

plaintext


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

Esimerkkejä:

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?
Tuotteiden löytäminen: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Voit yhdistää tämän mihin tahansa kauppasi sivuun. Esimerkiksi jos haluat avata chatbotin kysymyksellä tietyllä tuotetietosivulla:

plaintext


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

Vanha tapa: URL-kyselyparametri

?shoply_question=-kyselyparametri on edelleen tuettu taaksepäin yhteensopivuuden vuoksi. Huomaa, että kyselyparametrin lisääminen URL-osoitteeseen, jolla asiakas jo on, 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 hoitavat tämän automaattisesti, mutta jos lisäät linkkejä ohjelmallisesti, käytä oikeaa URL-koodausta (esim. välilyönnit muuttuvat muotoon %20).

Kun asiakas klikkaa kumpaakin linkkityyppiä, chat-ikkuna avautuu automaattisesti ja kysymys lähetetään AI-chatbotille, joka antaa välittömän vastauksen.

Käyttötapaukset:

Lisää alatunnisteeseen “Kysy toimituksesta” -linkki
Luo QR-koodeja, jotka avaavat chatbotin tietyillä kysymyksillä
Sisällytä hyödyllisiä linkkejä sähköpostikampanjoihisi tai tilausvahvistuksiin
Lisää kontekstuaalisia ohjelinkkejä tuotetietosivuille (esim. “Kysy mitoituksesta”)

Kuinka käyttää syvälinkkiä chat-ikkunan avaamiseen (teeman mallipohjan koodia täytyy muokata)

Edellisessä osiossa käsittelimme, kuinka hashtagia (syvälinkkiä) käytetään chat-ikkunan käynnistämiseen lisäämällä se mihin tahansa painikkeeseen, ikoniin tai tekstiin suoraan Theme Editorista ilman teemasi koodin muokkaamista.

Jos kuitenkin haluat täyden joustavuuden lisätä syvälinkin mihin tahansa kaupassasi (esim. luoda uuden ikonin ylätunnisteeseen), sinun täytyy muokata mallipohjan koodia.

Alla on yksinkertaisia HTML-koodiesimerkkejä, joita voit käyttää uusien ikonien luomiseen teemasi mallipohjassa:

Koodiesimerkkejä

1. Chat-ikoni

Alla oleva koodi lisää chat-ikonin:

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ähti-ikoni

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 käyttämisen lisäksi voit myös lisätä funktiokutsun openShoplyAIChatBot() minkä tahansa painikkeen/ikonin onclick-attribuuttiin, jolloin asiakkaat näkevät chat-ikkunan klikattuaan painiketta/ikonia.

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 yllä olevista esimerkeistä ja lisätä koodin hakukuvakkeen viereen sections/header.liquid-tiedostossa lisätäksesi chatin syvälinkin kauppasi ylätunnisteeseen.

Jos et kuitenkaan tunne oloasi täysin mukavaksi muokatessasi teeman mallipohjan koodia, ei hätää!

Varaa rohkeasti tapaaminen kanssamme , niin autamme mielellämme sinua ottamaan käyttöön täydellisen ikonin parhaaseen paikkaan kauppasi ainutlaatuiseen ilmeeseen sopivalla tavalla.

Kuinka piilottaa kelluva ikoni?

Kun olet määrittänyt syvälinkin avaamaan chat-ikkunan, saatat haluta piilottaa kelluvan ikonin. Lisäksi kauppiaat mainitsevat usein, että liian monet kelluvat ikonit verkkosivustolla voivat tuntua kuormittavilta. Ymmärrämme huolesi! Siksi olemme tuoneet käyttöön ominaisuuden chat-ikonin piilottamiseen.

Sovelluksen hallintapaneelin “Customize AI Chat” -osiossa, Select a Chat Icon -asetusten alla, voit nyt valita vaihtoehdon:

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

Tämän avulla voit piilottaa kelluvan ikonin ja silti sallia chat-ikkunan avaamisen syvälinkin kautta.