Implementáció

⚙️ Hogyan Integrálj Chatbotot a Weboldaladba? Lépésről Lépésre Útmutató

Részletes útmutató a chatbot beépítéséhez. Tanuld meg, hogyan állítsd be, testreszabd, és konfiguráld a chatbotot a weboldaladra 5 perc alatt.

📅 2025. január 15. ⏱️ 10 perc olvasás 📝 ChatBot Pro

A chatbot integrálása a weboldaladba nem bonyolult, és valóban 5 perc alatt megcsinálhatod! Ebben a cikkben lépésről lépésre végigvezetünk, hogyan építsd be a chatbotot, függetlenül attól, hogy milyen weboldal platformot használsz.

📋 Előkészületek

Mielőtt elkezdenéd, győződj meg róla, hogy:

Van hozzáférése a weboldalad HTML kódjához
Megkaptad a chatbot widget URL-jét vagy kódját
Ismered a weboldalad struktúráját (WordPress, HTML, stb.)

💡 Tipp: A legtöbb modern chatbot platform (mint a miénk) iframe alapú megoldást kínál, ami azt jelenti, hogy csak egy egyszerű kódrészletet kell beillesztened a weboldaladba.

🔧 Módszer 1: Iframe Integráció (Ajánlott)

Ez a legegyszerűbb és leggyorsabb módszer. Az iframe lehetővé teszi, hogy a chatbot egy külön, biztonságos környezetben futjon, miközben beágyazódik a weboldaladba.

1. lépés: Készítsd elő a chatbot URL-t

Először is, szükséged lesz a chatbot widget URL-jére. Ez általában így néz ki:

https://chatbot-szerver.com/widget.html

2. lépés: Másold be a kódot

Illeszd be a következő kódot a weboldalad </body> tagje elé (vagy a <head> részbe, ha scriptként használod):

<script>
  const widgetUrl = 'https://chatbot-szerver.com/widget.html';
  
  document.write(`
    <iframe 
      id="chat-widget-iframe"
      src="${widgetUrl}" 
      style="position:fixed;bottom:0;right:0;width:100px;height:100px;border:none;z-index:9999;background:transparent;pointer-events:auto;"
      allow="clipboard-write"
      title="ChatBot Widget"
    </iframe>
  `);
  
  // Expand iframe when chat opens
  const iframe = document.getElementById('chat-widget-iframe');
  if (iframe) {
    window.addEventListener('message', (event) => {
      if (event.data && event.data.type === 'CHAT_TOGGLE') {
        if (event.data.isOpen) {
          iframe.style.width = '420px';
          iframe.style.height = '670px';
          iframe.style.maxHeight = 'calc(100vh - 20px)';
        } else {
          iframe.style.width = '100px';
          iframe.style.height = '100px';
        }
      }
    });
  }
</script>
        

3. lépés: Testreszabás (Opcionális)

Módosíthatod a chatbot méretét, pozícióját és megjelenését a CSS stílusokkal:

// Példa: Másik pozíció (bal alsó sarok)
iframe.style.bottom = '20px';
iframe.style.left = '20px';
iframe.style.right = 'auto';

// Példa: Nagyobb kezdeti méret
iframe.style.width = '120px';
iframe.style.height = '120px';
        

🎨 Testreszabási Lehetőségek

Pozíció Módosítása

A chatbotot bárhová elhelyezheted a képernyőn:

Jobb alsó sarok (alapértelmezett): bottom: 0; right: 0;
Bal alsó sarok: bottom: 0; left: 0;
Jobb felső sarok: top: 0; right: 0;
Bal felső sarok: top: 0; left: 0;

Méret Beállítása

A chatbot mérete két állapotban van:

Zárt állapot: Általában 100x100px (csak a gomb látható)
Nyitott állapot: Általában 420x670px (a teljes chat ablak)

💡 Tipp: A mobil eszközökön a chatbot automatikusan alkalmazkodik a képernyő méretéhez. A maxHeight: 'calc(100vh - 20px)' biztosítja, hogy soha ne lógjon ki a képernyőről.

🌐 Platform-Specifikus Útmutatók

WordPress

Lépj be a WordPress admin felületre
Menj a Megjelenés → Widget Editor vagy Megjelenés → Téma Szerkesztő menüpontra
Válaszd ki a footer.php vagy header.php fájlt
Illeszd be a chatbot kódot a </body> tag elé
Mentsd el a változtatásokat

⚠️ Figyelem: Ha frissíted a WordPress témát, a módosítások elveszhetnek. Ebben az esetben használj egy "Insert Headers and Footers" típusú plugint, vagy egy child theme-et.

HTML Weboldal

Nyisd meg a weboldalad HTML fájlját egy szövegszerkesztőben
Keress rá a </body> tagre
Illeszd be a chatbot kódot közvetlenül a </body> tag elé
Mentsd el a fájlt
Töltsd fel az új fájlt a szerverre (ha FTP-vel dolgozol)

Shopify

Lépj be a Shopify admin felületre
Menj a Online Store → Themes menüpontra
Kattints a Actions → Edit code gombra
Válaszd ki a theme.liquid fájlt
Keress rá a </body> tagre
Illeszd be a chatbot kódot a tag elé
Mentsd el

Wix / Squarespace

Ezek a platformok gyakran saját HTML widget funkciót kínálnak:

Lépj be a szerkesztőbe
Add hozzá az "HTML Code" vagy "Embed Code" widgetet
Illeszd be a chatbot iframe kódját
Pozícionáld a widgetet a kívánt helyre

✅ Ellenőrzőlista az Integráció Után

Miután beillesztetted a kódot, ellenőrizd le a következőket:

✓ A chatbot gomb megjelenik a weboldaladon
✓ A chatbot gombra kattintva megnyílik a chat ablak
✓ A chatbot működik mobil eszközökön is
✓ Nincs konfliktus más JavaScript kódokkal
✓ A chatbot nem takar ki más fontos elemeket

🔍 Hibaelhárítás

Probléma: A chatbot nem jelenik meg

Lehetséges okok:

Ellenőrizd, hogy helyesen másoltad-e be a kódot
Nézd meg a böngésző konzolt (F12), van-e JavaScript hiba
Ellenőrizd, hogy a widget URL elérhető-e
Győződj meg róla, hogy nincs ad-blocker, ami blokkolja az iframe-et

Probléma: A chatbot nem reagál a kattintásra

Lehetséges okok:

Ellenőrizd a pointer-events: auto CSS beállítást
Nézd meg, hogy nincs-e más elem a chatbot felett (z-index probléma)
Ellenőrizd a böngésző konzolt JavaScript hibákért

Probléma: Mobil eszközön nem működik

Megoldás:

Győződj meg róla, hogy a viewport meta tag megfelelően van beállítva
Ellenőrizd, hogy a chatbot iframe nem kisebb, mint 100x100px
Nézd meg, hogy nincs-e CSS konfliktus a mobil stílusokkal

🎯 Best Practice-ek

1. Tesztelj minden eszközön: Nézd meg a chatbotot asztali gépen, tableten és okostelefonon is, hogy biztosan jól működik.

2. Ne akadályozd a felhasználói élményt: A chatbot nem takarjon ki fontos gombokat vagy tartalmat. Használj megfelelő pozíciót és z-index értéket.

3. Optimalizáld a teljesítményt: A chatbot kódot helyezd a </body> tag elé, így nem lassítja le az oldal betöltését.

4. Monitorozd a használatot: Nézd meg, hányan használják a chatbotot, és milyen kérdéseket tesznek fel. Ez segít optimalizálni a chatbot válaszait.

💡 Összefoglalás

A chatbot integrálása valóban 5 perc alatt megcsinálható, ha követed ezt az útmutatót:

Készítsd elő a chatbot URL-t
Illeszd be az iframe kódot a weboldaladba
Testreszabd a pozíciót és méretet (opcionális)
Teszteld minden eszközön
Kész! 🎉

🚀 Készen állsz az integrálásra?

Ha segítségre van szükséged a chatbot integrálásához, vagy szeretnél egyedi megoldást, lépj velünk kapcsolatba!

💬 Kérj segítséget vagy demót

Ingyenes konzultáció és technikai támogatás!

Kapcsolódó cikkek:
← Mi az a Chatbot, és Miért Fontos?
← Vissza a cikkekhez