LexoDocs

Widget beágyazása

Egyetlen sor kód, és a chatbot megjelenik a weboldalad sarkában.

A chatbot a weboldaladon egy buborékként jelenik meg a képernyő sarkában. Ehhez egyetlen sor kódot kell beillesztened az oldalba, keretrendszer vagy egyéb beállítás nem kell hozzá.

A beágyazó kód

Nyisd meg a chatbotot, és válaszd a Beágyazás menüpontot. A Beágyazó kód kártyán találod a chatbotodhoz tartozó egysoros kódot. Így néz ki:

<script src=".../widget-loader.js" data-id="..."></script>

A cím és a data-id értéke a te chatbotodé, ezért ne gépeld be: másold ki a Másolás gombbal. Ezután:

  1. Illeszd be a kódot minden oldalon a záró </body> tag elé, vagy a webáruház-motor lábléc / egyedi script mezőjébe.
  2. Mentsd el, és tedd közzé a változtatást.
  3. Nyisd meg a weboldaladat: a chatbot buborékja megjelenik az oldal sarkában.

A beágyazott chatbot ugyanúgy néz ki és viselkedik, mint a Testreszabásban. Amit később ott módosítasz, automatikusan átkerül a weboldaladra, a kódot nem kell újra beilleszteni.

Ha nem te szerkeszted a weboldalt, használd az Üzenet másolása a fejlesztődnek gombot. Egy kész üzenetet másol ki a beágyazó kóddal és a teendőkkel, amit e-mailbe vagy chatbe illeszthetsz.

Hová kerüljön a kód?

A Beágyazás oldalon a gyakori platformokhoz is találsz útmutatót. A menük neve a platform verziójától és a témától függően kissé eltérhet.

  • WordPress: Egy kódbeillesztő bővítménnyel (pl. WPCode) a lábléc (Footer) mezőbe, vagy a téma footer.php fájljában a záró </body> tag elé.
  • Shoprenter: Beállítások → Megjelenés → Téma testreszabás → Egyedi scriptek. A menü neve témától függően kissé eltérhet.
  • UNAS: Beállítások → Kinézet, Arculat → Script beszúrás → Hozzáad. Ha választhatsz, az oldal aljára (body vége) helyezd.
  • Shopify: Online áruház → Témák → … → Kód szerkesztése: a theme.liquid fájlban a záró </body> tag elé.
  • Wix: Beállítások → Egyéni kód (Custom Code): „Body – vége” elhelyezés, minden oldalon. Saját domain és prémium csomag kell hozzá.
  • Webflow: Site settings → Custom code → Footer code. Fizetős webhelycsomag kell hozzá.
  • Squarespace: Beállítások → Code Injection → Footer mező.
  • HTML / Egyéb: Minden oldal HTML-jében a záró </body> tag elé.

Melyik címen működik?

A beágyazott chatbot csak a chatbotnál megadott weboldal domainjén és annak aldomainjein jelenik meg. Ha például a weboldalad pelda.hu, akkor a pelda.hu, a www.pelda.hu és a bolt.pelda.hu is jó, egy másik cím viszont nem. A Beágyazás oldal a kód alatt kiírja, melyik domainre érvényes.

Ha a chatbotnál nincs megadva weboldal, a beágyazott chatbot egyetlen oldalon sem fog válaszolni. A Beágyazás oldal ilyenkor figyelmeztet. Add meg a címet a Testreszabás fülön, mielőtt beilleszted a kódot.

Ha a chatbot nem tud betöltődni (például más domainen van a kód), a buborék nem jelenik meg az oldalon.

Kipróbálás

A chatbotot a beillesztés előtt is kipróbálhatod: a Beágyazás oldalon kattints a Kipróbálás a Tesztelés fülön gombra, vagy nyisd meg a Tesztelés menüpontot. Ott ugyanaz a widget fut, amit a látogatóid látnak.

Egy saját gépen megnyitott HTML-fájlban nem fog megjelenni a chatbot, mert az nem a weboldalad domainje. Próbáld ki a Tesztelés fülön, vagy a valódi weboldaladon.

Amikor a chatbot először válaszol egy látogatónak a valódi weboldaladon, e-mailt küldünk róla (a Tesztelés fülön küldött üzenetek nem számítanak). Részletek: E-mail értesítések.

Pozíció és megjelenés

A widget helyét a Testreszabás → Elhelyezés fülön állítod be. A Sarok lehet Jobb alsó, Bal alsó, Jobb felső vagy Bal felső. Ha a Pontos elhelyezés kapcsolót bekapcsolod, a sarok helyett pixelre megadhatod a távolságot a képernyő széleitől. Ugyanitt a megnyitó gomb alakját és ikonját is kiválaszthatod. A színeket, a betűtípust és a többi megjelenési beállítást a Testreszabás → Megjelenés fülön találod.

A chatablak egy beágyazott keretben (iframe) fut, így a weboldalad stílusai nem befolyásolják. A megnyitó gomb viszont közvetlenül a weboldaladon jelenik meg. CSS-t egyikhez sem kell írnod.

Telefonon (480 pixelnél keskenyebb képernyőn) a megnyitott chat a teljes képernyőt kitölti. Ha a látogató nyitva hagyta a chatet, a következő oldalbetöltéskor újra nyitva jelenik meg.

Fejlesztőknek

A Beágyazás oldal alján a Fejlesztőknek részt kinyitva találsz egy kész React / Next.js komponenst a chatbotodhoz. Ez betölti ugyanazt a kódot, és az oldal elhagyásakor eltávolítja a widgetet.

A betöltött widget JavaScriptből is vezérelhető. A window.LexoWidget objektum alatt a chatbot azonosítójával éred el (a pontos kódot ugyanott, a Programozható vezérlés alatt másolhatod ki):

// A chatbot azonosítója ugyanaz, mint a beágyazó kód data-id értéke
const widget = window.LexoWidget[chatbotId];

widget.open();     // megnyitja a chatet
widget.close();    // bezárja
widget.toggle();   // nyitja vagy zárja
widget.isOpen();   // true, ha nyitva van
widget.isReady();  // true, ha a widget betöltődött
widget.destroy();  // eltávolítja a widgetet az oldalról
A megnyitás és a bezárás csak a betöltés után működik. Ha a kódod az oldal betöltésekor fut, előbb ellenőrizd az isReady() értékét.

A „Működteti: Lexo” felirat

A widget alján a Próba és az Induló csomagban megjelenik a „Működteti: Lexo” felirat. Ezt csak az Ügynökségi csomag távolítja el.

Az ügynökséged saját adatait (cégnév, logó, elérhetőség) a Beállítások → White-label oldalon adhatod meg. Az egyes ügyfelek chatbotjainak kinézetét chatbotonként, a Testreszabás → Megjelenés fülön állítod be.

RAG és vektoros keresésAnalitika