A deep link használata a csevegőablak megnyitásához (a téma kódjának szerkesztése nélkül)

A csevegőablakot deep link használatával is megnyithatod, anélkül hogy módosítanod kellene a témád kódját. A Shopify Témaszerkesztőben 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 csevegőablak 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 a hivatkozást vagy URL-t #shoply-ai-chatbot értékre.

Példák:

Gomb használata a csevegőablak megnyitásához:

Hivatkozással ellátott szöveg használata a csevegőablak megnyitásához:

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

Szeretnéd megnyitni a csevegőablakot, és automatikusan elküldeni egy kérdést? Ezt megteheted hash-fragmentum (ajánlott) vagy URL-lekérdezési paraméter használatával.

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

Ajánlott: hash-fragmentum (az oldal újratöltése nélkül)

Használd a #shoply_question= hash-fragmentumot. Mivel a hash feldolgozása teljes egészében a böngészőben történik, a hivatkozásra kattintva az oldal nem töltődik újra, és a meglévő csevegési előzmények 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ékkeresés: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Ezt az áruházad bármely oldalával kombinálhatod. Például egy adott termékoldalon a chatbot kérdéssel együtt történő megnyitásához:

plaintext


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

Régebbi megoldás: URL-lekérdezési paraméter

A ?shoply_question= lekérdezési paraméter továbbra is támogatott a visszamenőleges kompatibilitás érdekében. Ne feledd, hogy ha lekérdezési paramétert fűzöl ahhoz az URL-hez, amelyen a vásárló éppen tartózkodik, az oldal újratöltődik.

Formátum:

plaintext


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

Megjegyzés: ne felejtsd el URL-kódolni a kérdésedet speciális karakterek vagy szóközök használatakor. A legtöbb böngésző ezt automatikusan kezeli, de ha programozottan adsz hozzá hivatkozásokat, használj megfelelő URL-kódolást (például a szóközök %20 karakterekké válnak).

Amikor egy vásárló bármelyik hivatkozástípusra kattint, a csevegőablak automatikusan megnyílik, a kérdés pedig elküldésre kerül az AI-chatbotnak, amely azonnali választ ad.

Felhasználási esetek:

Adj hozzá „Kérdezz a szállításról” hivatkozást a lábléchez
Hozz létre QR-kódokat, amelyek konkrét kérdésekkel nyitják meg a chatbotot
Helyezz el hasznos hivatkozásokat e-mail-kampányaidban vagy rendelés-visszaigazolásaidban
Adj hozzá kontextusfüggő súgóhivatkozásokat a termékoldalakon (például „Kérdezz a méretezésről”)

A deep link használata a csevegőablak megnyitásához (a téma sablonkódjának szerkesztését igényli)

Az előző részben bemutattuk, hogyan indíthatod el a csevegőablakot a hashtag (deep link) bármely gombhoz, ikonhoz vagy szöveges elemhez való hozzáadásával közvetlenül a Témaszerkesztőből, a téma kódjának szerkesztése nélkül.

Ha azonban teljes rugalmasságot szeretnél a deep link áruházad bármely pontján történő elhelyezéséhez (például új ikon létrehozásához a fejlécben), szerkesztened kell a sablonkódot.

Az alábbiakban egyszerű HTML-kódpéldákat találsz, amelyekkel új ikonokat hozhatsz létre a témasablonodban:

Kódpéldák

1. Csevegőikon

Az alábbi kód csevegőikont ad hozzá:

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-csillagikon

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

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ási módszer

A hashtagek használata mellett az openShoplyAIChatBot() függvényhívást bármely gomb vagy ikon onclick attribútumába is elhelyezheted, így a vásárlók a gombra vagy ikonra kattintva látni fogják a csevegőablakot.

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?

Bármelyik fenti példát használhatod, és a kódot a sections/header.liquid fájl keresési ikonja mellé illesztheted, hogy hozzáadd a deep linkes csevegést az áruházad fejlécéhez.

Ha azonban nem érzed magad teljesen magabiztosnak a témasablon kódjának szerkesztésében, ne aggódj!

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 helyen, hogy illeszkedjen az áruházad egyedi stílusához.

Hogyan rejthető el a lebegő ikon?

Miután beállítottad a csevegőablakot megnyitó deep linket, érdemes lehet elrejtened a lebegő ikont. Az áruház-tulajdonosok gyakran azt is megemlítik, hogy a túl sok lebegő ikon túlzsúfolttá teheti webhelyeiket. Megértjük az aggodalmaidat! Ezért vezettük be a csevegőikon elrejtésére szolgáló funkciót.

Az alkalmazás adminisztrációs konzoljának „AI-csevegés testreszabása” szakaszában, a Csevegőikon kiválasztása beállításai alatt most kiválaszthatod a következő lehetőséget:

„Lebegő ikon elrejtése és deep link használata a csevegés megnyitásához”.

Ez lehetővé teszi a lebegő ikon elrejtését, miközben a csevegőablak továbbra is megnyitható deep linken keresztül.