Az Asyntai AI Chatbot hozzáadása a BigCommerce-hez

Lépésről lépésre útmutató BigCommerce áruházakhoz

Platform:

1. lépés: Szerezze be a beágyazási kódját

Először lépjen az Asyntai Irányítópultra és görgessen le a „Beágyazási kód" szekcióhoz. Másolja le az egyedi beágyazási kódját, amely így fog kinézni:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Megjegyzés: A fenti kód csak egy példa. Le kell másolnia saját egyedi beágyazási kódját az Irányítópultról, mivel az tartalmazza személyes widget-azonosítóját.

2. lépés: Telepítési módszer kiválasztása

Több lehetőség is van a chat widget BigCommerce-hez adásához. Válassza az Önnek legmegfelelőbb módszert:

1. módszer: Script Manager használata (ajánlott)

A Script Manager a legegyszerűbb és ajánlott módszer egyéni scriptek hozzáadásához a BigCommerce áruházhoz. Nem igényel programozási ismereteket, és megmarad a témaváltások során is.

Lépjen be a BigCommerce Vezérlőpanelbe
Lépjen a Storefront → Script Manager menübe
Kattintson a „Script létrehozása" gombra
Konfigurálja a scriptet az alábbi beállításokkal:
- Név: Asyntai AI Chatbot
- Leírás: AI-alapú chat widget (nem kötelező)
- Elhelyezés: Lábléc
- Helyszín: Minden oldal
- Script kategória: Funkcionális
- Script típusa: Script
A „Script tartalma" mezőbe illessze be az Asyntai beágyazási kódot
Kattintson a „Mentés" gombra

Miért érdemes a Script Managert használni? A Script Manageren keresztül hozzáadott scriptek külön vannak kezelve a témától. Nem érintik őket az áruház témájának frissítései vagy cseréi.

2. módszer: Page Builder használata

A BigCommerce Page Builder segítségével HTML elem használatával adhatja hozzá a chat widgetet. Ez a módszer akkor hasznos, ha pontosabban szeretné meghatározni, hol jelenjen meg a widget.

Lépjen be a BigCommerce Vezérlőpanelbe
Lépjen a Storefront → Saját témák menübe
Kattintson a „Testreszabás" gombra az aktív témán
A Page Builder bal oldali sávjában keresse meg a „HTML" elemet
Húzza és ejtse a HTML elemet az oldalsablon lábléc területére
Click on the HTML element and select "Edit HTML"
Illessze be az Asyntai beágyazási kódját
Kattintson a „HTML mentése" gombra
Click "Publish" to apply changes to your live store

Megjegyzés: Ha az összes oldalon szeretné a chatbotot, hozzá kell adnia egy globális régióhoz, például a lábléchez. A Script Manager módszer egyszerűbb az egész oldalt érintő telepítéshez.

3. módszer: Témafájlok szerkesztése (Stencil témák)

A Stencil témákat használó fejlesztők a kódot közvetlenül a témafájlokhoz adhatják hozzá. Ehhez hozzáférés szükséges a téma forrásfájljaihoz.

A BigCommerce Vezérlőpanel használata

Lépjen a Storefront → Saját témák menübe
Kattintson a „Speciális" gombra az aktív témán
Válassza a „Témafájlok szerkesztése" lehetőséget
Navigáljon a templates → components → common mappába
Nyissa meg a footer.html fájlt
Görgessen a fájl aljára
Illessze be az Asyntai beágyazási kódot közvetlenül a záró tag elé
Kattintson a „Mentés és fájl alkalmazása

Stencil CLI használata (helyi fejlesztés)

Ha helyileg fejleszt a Stencil CLI-vel:

Nyissa meg a téma helyi fájljait

Navigate to templates/components/common/footer.html

Adja hozzá az Asyntai beágyazási kódot a záró tagek elé

Töltse fel a változtatásait a stencil push paranccsal

Fontos: A témafájl-változtatások felülíródhatnak a téma frissítésekor. A témafrissítések során is megmaradó állandó megoldáshoz használja a Script Manager módszert.

3. lépés: Telepítés ellenőrzése

A kód hozzáadása után látogassa meg a BigCommerce áruházát egy új böngészőlapon vagy inkognító ablakban. Látnia kell a chat widget gombot az áruház jobb alsó sarkában. Kattintson rá, hogy meggyőződjön arról, hogy megfelelően nyílik meg és működik.

Nem látja a widgetet? Törölje a böngésző gyorsítótárát, és próbálja újra. Ha a Téma szerkesztőn keresztül végzett módosításokat, győződjön meg arról, hogy a „Közzététel" gombra kattintott a változtatások éles áruházban való alkalmazásához.

Dokumentacio