JobbSEO.hu
Bejelentkezés

Első lépések

Hogyan tedd fel az AI chatbot kódját a weboldaladra?

Az AI asszisztens egyetlen sor kóddal kerül fel a weboldaladra. A kódot a weboldal minden oldalára, a záró </body> címke elé kell beilleszteni. Ezen az oldalon megtalálod a pontos kódot, azt, hogy melyik rendszeren hova kell tenni, és azt is, hogyan ellenőrizd, hogy működik.

  • Kezdőknek is
  • 5 perc olvasás
  • Frissítve:

Röviden

  • A saját kódodat az ügyfélportálban találod: AI asszisztens → Kinézet és beillesztés.
  • Egy sor kód, a weboldal minden oldalára, a </body> elé.
  • A weboldalad címét előbb add meg az Alapok fülön, különben a chat nem indul el.
  • Elég egyszer beilleszteni: a színek, szövegek és beállítások később maguktól frissülnek.

Inkább kérdeznél? Az AI ennek az oldalnak a lényegével segít.

A gomb megnyitja az AI-t, és beírja a kérdést az oldal lényegével és a kódokkal együtt.

ChatGPTClaude

A beillesztőkód

Minden asszisztensnek saját azonosítója van (például cp_3f9a1c2b7d4e). A kódban ezt a data-project-id attribútum adja meg. A pontos, kimásolható kódot az ügyfélportálban találod, a Kinézet és beillesztés fülön, a „Kód másolása” gombbal.

RészMit jelent?Kötelező?
srcA chatbot programjának címe. Ne módosítsd.Igen
data-project-idA te asszisztensed azonosítója. Ebből tudja a rendszer, melyik beállításokat és melyik céges tudást használja.Igen
deferA böngésző az oldal betöltése után futtatja a kódot, így nem lassítja az oldal megjelenését.Ajánlott
data-api-urlCsak különleges esetben kell: ha a szkriptet nem a jobbseo.hu címről töltöd be. Alapból a szkript saját címét használja.Nem
Beillesztőkód (a saját azonosítóddal)HTML
<script src="https://jobbseo.hu/chat-widget.js" data-project-id="cp_a-te-azonositod" defer></script>

Hova kell tenni? Rendszerenként

A szabály mindenhol ugyanaz: a kód legyen ott minden oldalon, lehetőleg a </body> záró címke előtt. A legtöbb rendszerben van erre egy „egyedi kód”, „lábléc kód” vagy „body vége” mező.

RendszerHova illeszd be?
WordPress / WooCommerceEgy fejléc- és lábléc-kódbeillesztő bővítménnyel (például WPCode) a „Footer” részbe. Vagy a sablon footer.php fájljában a </body> elé (ezt gyermeksablonban érdemes, különben frissítéskor elveszhet).
ShopifyOnline áruház → Témák → Kód szerkesztése → theme.liquid, közvetlenül a </body> elé.
WixBeállítások → Egyéni kód → Kód hozzáadása, „Body – vége” helyre, az összes oldalra. Prémium csomag és saját domain szükséges hozzá.
WebflowSite settings → Custom code → Footer code, majd publikáld újra az oldalt. Fizetős site plan szükséges.
ShopRenter, UNAS, ShoptetAz admin felület egyedi kód vagy külső szkript beillesztésére szolgáló részébe, a body végére.
Egyedi HTML oldalMinden oldal sablonjában (vagy a közös lábléc fájlban) a </body> elé.
React, Vue, Next.jsEgyszer, a közös elrendezésbe (layout) töltsd be. A chatbot magától követi az oldalváltást, nem kell újratölteni.

Egyoldalas alkalmazások (React, Next.js, Vue)

Egyoldalas alkalmazásban a kódot egyszer kell betölteni, a közös elrendezésben. A chatbot figyeli a böngésző címének változását (pushState, replaceState, vissza gomb), így oldalváltáskor magától frissíti, melyik oldalon jár a látogató. A beszélgetés közben megmarad.

Next.js-ben a next/script komponenssel a legegyszerűbb:

Next.js (app/layout.js vagy pages/_app.js)React
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="hu">
      <body>
        {children}
        <Script
          src="https://jobbseo.hu/chat-widget.js"
          data-project-id="cp_a-te-azonositod"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}
  • Egy oldalon csak egyszer töltsd be. Ha kétszer kerül az oldalra, a második példány magától kihagyja magát.
  • Ha a saját kódod egy ponton teljesen el akarja távolítani a chatet, hívd meg a window.__AI_CHAT_WIDGET_DISPOSE__() függvényt (részletek a JavaScript API oldalon).

Oldalak, ahol szándékosan nem jelenik meg

A chatbot biztonsági okból nem indul el azokon az oldalakon, amelyek címe így kezdődik: /admin, /api, /user, /login, /register, /audit. Ez a te weboldaladra is igaz: ha például a bejelentkezési oldalad címe /login, ott nem lesz chat. Ez szándékos, nem hiba.

Hogyan ellenőrizd, hogy működik?

  1. Add meg a weboldalad címét

    Az ügyfélportálban, az Alapok fülön. Ha a weboldalad www-vel és anélkül is megnyílik, mindkettőt add meg.

  2. Mentsd el és illeszd be a kódot

    A kód beillesztése után mentsd el vagy publikáld a weboldaladat a saját rendszeredben.

  3. Nyisd meg a weboldaladat

    Frissítsd az oldalt. A jobb (vagy bal) alsó sarokban megjelenik a chat gombja.

  4. Írj egy próbakérdést

    Ha válaszol, kész vagy. A beszélgetés megjelenik az ügyfélportál Beszélgetések fülén is.

Gyakori kérdések

Lassítja a weboldalamat a chatbot kódja?

A kód a defer miatt csak az oldal betöltése után fut, így nem tartja vissza az oldal megjelenését. A chat saját, elkülönített stílussal (Shadow DOM) működik, ezért nem ütközik a weboldalad kinézetével.

Minden oldalra be kell illesztenem?

Igen, minden olyan oldalra, ahol meg szeretnéd jeleníteni. A legegyszerűbb a közös láblécbe vagy a sablonba tenni, így egy helyen elég megcsinálni.

Mi történik, ha módosítom a színeket a portálban? Újra be kell illesztenem a kódot?

Nem. A kód mindig a legfrissebb beállításokat tölti be. Mentés után kb. egy percen belül megjelenik a változás, csak frissítsd az oldalt.

Hol találom a saját azonosítómat?

Az ügyfélportálban: AI asszisztens → Kinézet és beillesztés. Ott a teljes kód egy gombnyomással kimásolható.

Elakadtál? Kérdezd meg az AI-t erről az oldalról.

A gomb megnyitja az AI-t, és beírja a kérdést az oldal lényegével és a kódokkal együtt.

ChatGPTClaude