A chatablak megnyitása hivatkozással

A chatablakot deep link használatával is megnyithatod anélkül, hogy módosítanád a témád kódját. A Shopify Theme Editorban egyszerűen add hozzá a #shoply-ai-chatbot hashtaget bármely gombhoz, ikonhoz vagy szöveges elemhez. Amikor a vásárlók ezekre az elemekre kattintanak, a chatablak automatikusan megnyílik.

Élő példa: demo.shoplyai.ai

Lépések:

Szerkeszd a kívánt gombot, szöveget vagy ikont a témaszerkesztőben.
Állítsd be a hivatkozást vagy URL-t erre: #shoply-ai-chatbot.

Példák:

Gomb használata a chatablak megnyitásához:

Hivatkozott szöveg használata a chatablak megnyitásához:

Chat megnyitása termékspecifikus kérdésekkel

Adj hozzá egy “Question About This Product?” gombot egy termékoldalhoz, hogy segíts a vásárlóknak az adott termékről kérdezni. Állítsd a hivatkozását erre: #shoply_product_questions. Rákattintva megnyílik a chat a termék nevével, egy rövid termékkiemeléssel és automatikusan generált, az adott termékhez kapcsolódó kérdésekkel.

A Shopify Theme Editorban nyisd meg a terméksablonodat, és adj hozzá vagy szerkessz egy URL-t támogató gombot vagy hivatkozott szöveget.
Állítsd be a címkét erre: “Question About This Product?”, a hivatkozást pedig erre: #shoply_product_questions.
Mentsd el, nyiss meg egy termékoldalt, és kattints a hivatkozásra a termékkérdések ellenőrzéséhez.

Ha a témád nem kínál megfelelő gomb- vagy hivatkozásbeállítást, add hozzá ezt a linket a terméksablon HTML-jéhez:

html


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

Ezt a hivatkozást termékoldalon használd, hogy a Shoply rendelkezzen a termék kontextusával. Megoszthatsz egy teljes termék-URL-t is, amely #shoply_product_questions végződésű.

Próbáld ki a termékkérdés chatet a Bent 85 Skis termékhez . A javaslatok között szerepelnek kérdések a síléc súlyáról, magjáról, rocker profiljáról és topsheet grafikájáról. A vásárlók kiválaszthatnak egy javaslatot, vagy beírhatják a saját kérdésüket.

Példákért arra, hol érdemes ezeket a linkeket használni, nézd meg az AI-powered product questions in our FAQ replacement guide részt.

Ezek a termékkérdések automatikusan generálódnak. Az starting questions you configure in Customize AI Chat beállításban megadott kezdőkérdések ehelyett a normál chatmegnyitásra vonatkoznak.

Chat megnyitása előre kitöltött kérdéssel

Szeretnéd megnyitni a chatablakot, és automatikusan elküldeni egy kérdést? Ezt megteheted hash fragmenttel (ajánlott) vagy URL query parameterrel.

Ez tökéletes közvetlen hivatkozások létrehozására gyakori témákhoz, például szállítási szabályzathoz, visszaküldési szabályzathoz vagy termékkel kapcsolatos érdeklődéshez.

Ajánlott: Hash fragment (nincs oldalújratöltés)

Használd a #shoply_question= hash fragmentet. Mivel a hash teljes egészében a böngészőben kerül feldolgozásra, erre a linkre kattintva az oldal nem töltődik újra, és a meglévő chatelőzmények is megmaradnak.

Formátum:

plaintext


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

Példák:

Szállítási szabályzat: https://your-store.com#shoply_question=What is your shipping policy?
Visszaküldés: https://your-store.com#shoply_question=How do I return an item?
Rendelés állapota: https://your-store.com#shoply_question=Where is my order?
Termékfelfedezés: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Ezt a webshopod bármely oldalával kombinálhatod. Például így nyithatod meg a chatbotot egy kérdéssel egy adott termékoldalon:

plaintext


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

Korábbi megoldás: URL query parameter

A ?shoply_question= query parameter továbbra is támogatott a visszamenőleges kompatibilitás érdekében. Vedd figyelembe, hogy ha query parametert fűzöl egy olyan URL-hez, amelyen a vásárló már tartózkodik, az oldalújratöltést fog okozni.

Formátum:

plaintext


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

Megjegyzés: Ne felejtsd el URL-kódolni a kérdésedet, ha speciális karaktereket vagy szóközöket használsz. A legtöbb böngésző ezt automatikusan kezeli, de ha programozottan adsz hozzá linkeket, használj megfelelő URL-kódolást (pl. a szóköz %20 lesz).

Amikor a vásárló bármelyik linktípusra kattint, a chatablak automatikusan megnyílik, és a kérdés elküldésre kerül az AI chatbotnak, amely azonnali választ ad.

Felhasználási esetek:

Tegyél egy “Ask about shipping” linket a láblécbe
Hozz létre QR-kódokat, amelyek meghatározott kérdésekkel nyitják meg a chatbotot
Helyezz el hasznos linkeket email kampányokban vagy rendelés-visszaigazolásokban
Adj hozzá kontextusfüggő súgóhivatkozásokat a termékoldalakon (pl. “Ask about sizing”)

Deep link használata a chatablak megnyitásához (ehhez szerkeszteni kell a kódot a témasablonban)

Az előző részben áttekintettük, hogyan használhatod a hashtaget (deep linket) a chatablak megnyitására úgy, hogy közvetlenül a Theme Editorból hozzáadod bármely gombhoz, ikonhoz vagy szöveghez, a témád kódjának szerkesztése nélkül.

Ha azonban teljes rugalmasságot szeretnél ahhoz, hogy a deep linket bárhol elhelyezhesd a webshopodban (például egy új ikont hozz létre a fejlécben), akkor szerkesztened kell a sablonkódot.

Az alábbiakban egyszerű HTML-kódpéldákat találsz, amelyeket új ikonok létrehozásához használhatsz a Theme template-ben:

Kódpéldák

1. Chat ikon

Az alábbi kód hozzáad egy chat ikont:

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 csillag ikon

Az alábbi kód hozzáad egy AI csillagot:

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. Függvényhívásos módszer

A hashtagek használata mellett az openShoplyAIChatBot() függvényhívást is elhelyezheted bármely gomb/ikon onclick attribútumában, így a vásárlók látni fogják a chatablakot, amikor a gombra/ikonra kattintanak.

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>

Segítségre van szükséged?

A fenti példák bármelyikét használhatod, és a kódot beszúrhatod a keresés ikon mellé a sections/header.liquid fájlban, hogy hozzáadd a chat deep linket a webshopod fejlécéhez.

Ha azonban nem érzed teljesen kényelmesnek a kódszerkesztést a témasablonban, semmi gond!

Nyugodtan foglalj velünk egy megbeszélést , és örömmel segítünk beállítani a tökéletes ikont az ideális helyre, hogy illeszkedjen a webshopod egyedi hangulatához.

Hogyan rejtheted el a lebegő ikont?

Miután beállítottad a deep linket a chatablak megnyitásához, előfordulhat, hogy el szeretnéd rejteni a lebegő ikont. A webshop-tulajdonosok gyakran azt is említik, hogy a túl sok lebegő ikon a weboldalon zavaró lehet. Megértjük az aggodalmaidat! Ezért vezettünk be egy funkciót a chat ikon elrejtésére.

Az alkalmazás admin konzoljának “Customize AI Chat” részében, a Select a Chat Icon beállítások alatt most már kiválaszthatod ezt:

„Hide floating icon and use deep link to open chat” opció.

Ez lehetővé teszi, hogy elrejtsd a lebegő ikont, miközben a chatablak továbbra is megnyitható marad deep linken keresztül.