A ChatLab hozzáadása a weboldalához lehetővé teszi a látogatók számára, hogy közvetlenül az Ön webhelyén lépjenek kapcsolatba az AI-chatbottal. Ez az útmutató bemutatja, hogyan szerezheti meg a beágyazási kódot, és hogyan adhatja hozzá a weboldalához.
Mielőtt elkezdené
Hozza létre és trénelje a chatbotot, mielőtt megosztaná azt az ügyfelekkel. A telepítéshez jogosultságra van szüksége a weboldal szerkesztéséhez és közzétételéhez is. Lásd: Hogyan hozza létre első chatbotját.
A Deploy fül megnyitása
Válassza ki a chatbotját a fő vezérlőpulton, majd kattintson a Deploy (Telepítés) fülre.
Platform kiválasztása
A jobb oldalon található Select Platform (Platform kiválasztása) panel két csoportban sorolja fel a támogatott célhelyeket: Website (Weboldal) a chatbot elhelyezéséhez az Ön által kezelt oldalakon, valamint Messaging channels (Üzenetküldési csatornák) a meglévő beszélgetési fiókhoz való csatlakoztatáshoz. Kattintson arra az elemre, ahol meg szeretné jeleníteni a chatbotot, a személyre szabott utasítások megtekintéséhez.
Támogatott platformok:
- HTML Code - bármely olyan weboldallal működik, ahol szerkesztheti a HTML-kódot
- WordPress - a hivatalos ChatLab beépülő modulon vagy manuális kódbeillesztésen keresztül
- Wix - a Settings > Custom Code menüpontban
- Webflow - a Site settings > Custom code menüpontban, ha az egyéni kódok használata engedélyezve van a webhelyén vagy munkaterületén
- PrestaShop - a ChatLab PrestaShop modulján vagy manuális kódbeillesztésen keresztül
- Shopify - a theme.liquid fájlon keresztül
- WooCommerce - a WordPress beépülő modulon vagy manuális kódbeillesztésen keresztül
- Abicart - a Store design > Themes > Site header menüpontban
- CS-Cart - a Design > Layouts > Custom HTML code menüpontban
Üzenetküldési csatornák:
- WhatsApp Business - válaszadás egy WhatsApp Business fiókban, lásd: WhatsApp for Business
- Facebook Messenger - válaszadás a Facebook-oldalára érkező üzenetekre, lásd: Integráció a Facebook Messengerrel
- Instagram - válaszadás az Instagram közvetlen üzeneteire, lásd: Integráció az Instagrammal
Az üzenetküldési csatornák nem használják az alábbi beágyazási kódot. Ezek egy már meglévő fiókhoz csatlakoznak, így nem kell kódot beilleszteni a weboldalra.
Mindegyik platform lépésről lépésre követhető utasításokat jelenít meg az adott integrációhoz. A dedikált súgócikkel rendelkező platformok esetében egy View full instructions (Teljes útmutató megtekintése) hivatkozás jelenik meg alul.
Hozzáadás HTML Code használatával
A HTML Code opció minden olyan weboldallal működik, ahol hozzáfér a forráskódhoz. Két beágyazási lehetőséget fog látni: Widget és Iframe.
Widget mód
A Widget fülön található az a kód, amely hozzáadja a chat ikont a weboldalához. Amikor a látogatók rákattintanak az ikonra, megnyílik egy felugró chatablak.
- Kattintson a Widget fülre
- Kattintson a Copy to clipboard (Másolás a vágólapra) gombra a kód kimásolásához
- Keresse meg a weboldal
<head>szakaszát - Illessze be a kódot utolsó elemként a
<head>szakaszba - Frissítse a böngészőt annak ellenőrzéséhez, hogy a chatbot ikon megjelenik-e
Iframe mód
Az Iframe fülön látható az a kód, amely a chatbotot közvetlenül az oldal tartalmába ágyazza be. A chatbot folyamatosan látható, és más oldalelemek vehetik körül.
- Kattintson az Iframe fülre
- Kattintson a Copy to clipboard (Másolás a vágólapra) gombra a kód kimásolásához
- Illessze be a kódot a weboldal HTML-kódjának tetszőleges pontjára, ahol a chatbotot meg szeretné jeleníteni
- Módosítsa a
widthésheightattribútumokat az elrendezéshez igazítva
Nem biztos benne, melyiket válassza? Olvassa el a Mi a különbség a widget és az Iframe között? című cikket a részletes összehasonlításért.
Hozzáadás WordPress vagy WooCommerce használatával
A WordPress és WooCommerce platformok két telepítési módszert kínálnak: Plugin Installation (Telepítés beépülő modullal - ajánlott) és Manual Installation (Manuális telepítés).
Plugin Installation (ajánlott)
- Kattintson a Get the plugin on WordPress.org lehetőségre, majd telepítse és aktiválja a ChatLab beépülő modult.
- Nyissa meg a ChatLab menüpontot a WordPressben. WooCommerce áruház esetén hagyja bejelölve a WooCommerce integration opciót az áruház adatainak összekapcsolásához is.
- Kattintson a Continue gombra, jelentkezzen be a ChatLab felületére, és válassza ki a chatbotját.
- Fejezze be az összekapcsolást, nyissa meg a közzétett weboldalt, és küldjön egy tesztüzenetet.
Manual Installation
Váltson a Manual Installation fülre, és másolja be a Widget kódját a webhely fejlécébe egy kódbeillesztő modul segítségével. Az Iframe esetében használjon egy olyan HTML-blokkot az oldal tartalmában, amely engedélyezi az iframe HTML-t. Tegye közzé az oldalt, és tesztelje a chatet. Csak egyszer telepítse a widgetet: vagy a bővítmény használatával, vagy a manuális kódrészlettel.
A részletekért lásd: Hogyan adhatja hozzá chatbotját WordPress weboldalhoz.
Hozzáadás egyéb platformokon keresztül
Shopify, Wix, Webflow, PrestaShop, Abicart és CS-Cart esetén válassza ki a platformot a Select Platform panelen. Mindegyik platform a következőket jeleníti meg:
- A beágyazási kód a Widget és az Iframe opciókkal
- Platformspecifikus, lépésről lépésre követhető beillesztési utasítások
- Egy View full instructions hivatkozás a teljes platform-útmutatóhoz
GDPR-megfelelőség
Ha azt szeretné, hogy a chatbot csak a sütik elfogadása után töltődjön be, olvassa el a ChatLab beállítása a GDPR-megfelelőséghez című cikket a CookieBot, a Usercentrics és a Google Tag Manager integrációs útmutatóiért.
Tartalomvédelmi irányelv (CSP)
Ha a weboldala Content Security Policy (tartalomvédelmi irányelv) fejléceket használ, engedélyeznie kell a ChatLab doméneket a chatbot működéséhez. A szükséges direktívák attól függnek, hogy Widget vagy Iframe módot használ.
Widget mód
A widget betölt egy szkriptet az oldalára, amely létrehozza a chatfelületet. Fűzze hozzá a következő ChatLab-forrásokat a meglévő CSP-direktíváihoz; ne írja felül a weboldal többi részére vonatkozó szabályzatot:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com 'unsafe-inline';
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Alapértelmezés szerint a widget egyes stílusokat beágyazottan (inline) szúr be. Az Ön szabályzatának engedélyeznie kell a beágyazott konfigurációs szkriptet is, például egy CSP nonce vagy hash használatával. Engedélyezze a bot és a termékkártyák által használt képforrásokat az img-src direktívában; a hang- és egyéb engedélyezett funkciók további forrásokat igényelhetnek. Ügynökségi domén esetén használja a generált kódrészletben szereplő doméneket.
CSP Safe Mode - az unsafe-inline elkerülése
Ha a webhelye biztonsági szabályzata nem engedélyezi az 'unsafe-inline' értéket a style-src direktívában, bekapcsolhatja a CSP Safe Mode (CSP biztonságos mód) beállítást. Ez a widget konténerének stíluslapját egy külső CSS-fájlból tölti be. Ez nem engedélyezi a beágyazott konfigurációs szkriptet, és nem garantálja, hogy minden egyedi stílus és bekapcsolt funkció megfelel a szabályzatának.
Az engedélyezéséhez adja hozzá a window.aichatbotCspSafe = true; sort a ChatLab script-tag elé:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Bekapcsolt CSP Safe Mode mellett teszteljen egy stíluslap-irányelvet az 'unsafe-inline' nélkül. Kiindulási alapként használható:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com;
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Iframe mód
A szülőoldalnak engedélyeznie kell a másolt iframe URL-ben található forrást. A standard ChatLab-tárhely esetén adja hozzá a következőt a meglévő szabályzathoz:
frame-src https://api.chatlab.com;