Súgóközpont
A chatbot hozzáadása a weboldalhoz

Chatbot hozzáadása a weboldalához

Utoljára frissítve:

A ChatLab weboldalhoz való hozzáadása 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 be a beágyazási kódot, és hogyan adhatja hozzá azt a weboldalához.

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.

Deploy fül kiemelve

A platform kiválasztása

A jobb oldalon található Select Platform (Platform kiválasztása) panelen látható az összes támogatott platform. Kattintson a weboldalának megfelelő platformra a személyre szabott telepítési utasítások megtekintéséhez.

Select Platform panel kiemelve

Támogatott platformok:

  • HTML Code - bármely olyan weboldallal működik, ahol szerkesztheti a HTML-kódot
  • WordPress - a hivatalos ChatLab bővítményen vagy kézi kódbeillesztésen keresztül
  • Wix - a Settings > Advanced > Custom Code menüponton keresztül
  • Webflow - a Site Settings > Custom Code menüponton keresztül (prémium Webflow-csomagot igényel)
  • PrestaShop - a ChatLab PrestaShop-modulon vagy kézi kódbeillesztésen keresztül
  • Shopify - a theme.liquid fájlon keresztül
  • WooCommerce - a WordPress bővítményen vagy kézi kódbeillesztésen keresztül
  • Abicart - a Store design > Themes > Site header menüponton keresztül
  • CS-Cart - a Design > Layouts > Custom HTML code menüponton keresztül

Minden platformhoz külön, az adott integrációra vonatkozó, lépésről lépésre követhető utasítások jelennek meg. Azoknál a platformoknál, amelyekhez külön súgócikk tartozik, alul egy View full instructions (Teljes útmutató megtekintése) link jelenik meg.

Hozzáadás HTML Code segítségével

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 látható az a kód, amely hozzáad egy csevegési ikont a weboldalához. Amikor a látogatók az ikonra kattintanak, megnyílik egy felugró csevegőablak.

Widget fül kiemelve

  1. Kattintson a Widget fülre
  2. Kattintson a Copy to clipboard (Másolás a vágólapra) gombra a kód másolásához
  3. Keresse meg a weboldal <head> szakaszát
  4. Illessze be a kódot a <head> szakasz utolsó elemeként
  5. Frissítse a böngészőt, és ellenőrizze, hogy megjelenik-e a chatbot ikonja

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.

Iframe fül kiemelve

  1. Kattintson az Iframe fülre
  2. Kattintson a Copy to clipboard gombra a kód másolásához
  3. Illessze be a kódot a weboldal HTML-kódjának bármely olyan részére, ahol meg szeretné jeleníteni a chatbotot
  4. Módosítsa a width és a height attribútumokat az elrendezéshez igazítva

Nem biztos benne, melyiket válassza? Részletes összehasonlításért olvassa el a What is the difference between widget and Iframe? című cikket.

Hozzáadás WordPress vagy WooCommerce segítségével

A WordPress és a WooCommerce platformok két telepítési módszert kínálnak: Plugin Installation (Bővítmény telepítése - ajánlott) és Manual Installation (Kézi telepítés).

WordPress platform a Plugin Installation füllel

Plugin Installation (ajánlott)

  1. Kattintson a Get WordPress Plugin (WordPress bővítmény letöltése) gombra a WordPress bővítménytár megnyitásához
  2. Telepítse és aktiválja a "ChatLab - AI Chatbot" bővítményt
  3. Lépjen a bővítmény beállítási oldalára a WordPress adminisztrációs felületén
  4. Másolja ki a Bot ID (Botazonosító) értékét a ChatLabből a másolás gombbal
  5. Illessze be a Bot ID-t a bővítmény beállításaiba, majd mentse el
  6. Ellenőrizze, hogy a chatbot megjelenik-e a weboldalán

Manual Installation

Kódalapú telepítéshez váltson a Manual Installation fülre:

  1. Telepítse az "Insert Headers and Footers" bővítményt a WordPressben
  2. Lépjen a Settings > Insert Headers and Footers menüpontra
  3. Másolja ki a kódot a ChatLabből, és illessze be a Header szakaszba
  4. Mentse el a módosításokat, és frissítse a weboldalt

A részletekért tekintse meg a How to add your chatbot to WordPress website című cikket.

Hozzáadás más platformokon keresztül

A Shopify, Wix, Webflow, PrestaShop, Abicart és CS-Cart esetében válassza ki a platformot a Select Platform panelen. Minden platformnál a következők láthatók:

  1. A beágyazási kód Widget és Iframe opciókkal
  2. A platformra vonatkozó, lépésről lépésre követhető beillesztési utasítások
  3. Egy View full instructions hivatkozás a teljes platform-útmutatóhoz

Shopify platform lépésről lépésre követhető utasításokkal

GDPR-megfelelőség

Ha azt szeretné, hogy a chatbot csak a sütikhez való hozzájárulás megadása után töltődjön be, tekintse meg a Setting up ChatLab for GDPR compliance című cikket, amely bemutatja a CookieBot, a Usercentrics és a Google Tag Manager integrációs útmutatóit.

Tartalombiztonsági szabályzat (CSP)

Ha a weboldala Content Security Policy (CSP) fejléceket használ, engedélyeznie kell a ChatLab-tartományokat a chatbot működéséhez. A szükséges direktívák attól függnek, hogy a Widget vagy az Iframe módot használja.

Widget mód

A widget egy olyan szkriptet tölt be az oldalán, amely létrehozza a csevegőfelületet. Adja hozzá ezeket a direktívákat a CSP-fejléchez:

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 közvetlenül (inline) szúr be néhány stílust, ezért az 'unsafe-inline' megadása kötelező a style-src direktívában.

CSP Safe Mode - az unsafe-inline elkerülése

Ha a weboldala biztonsági szabályzata nem engedélyezi az 'unsafe-inline' használatát a style-src direktívában, bekapcsolhatja a CSP Safe Mode (CSP biztonságos mód) funkciót. Ezzel a widget az összes stílust külső CSS-fájlokból tölti be ahelyett, hogy inline módon szúrná be őket.

A bekapcsoláshoz adja hozzá a window.aichatbotCspSafe = true; sort a ChatLab script címkéje elé:

<script>
  window.aichatbotApiKey = "YOUR_API_KEY";
  window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>

A CSP Safe Mode bekapcsolásával már nincs szükség az 'unsafe-inline' értékre, és a CSP-fejléc az alábbiakat használhatja:

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

Az iframe a teljes chatbotot egyetlen URL-ről tölti be, így csak egyetlen direktíva szükséges:

frame-src https://api.chatlab.com;
Keresés az összes cikkbenKérdezze az agenst