🛠️ Integrációs Segédlet · Nem igényel kódolást

Hogyan illeszd be a ChatMate-et a weboldaladra?
Lépésről Lépésre Útmutató

Bármilyen weboldalon azonnal működik: WordPress, cPanel tárhely, Shoprenter, UNAS, Shopify vagy egyedi HTML. Válaszd ki a számodra legegyszerűbb utat!

🛠️ 2. Út (Csináld Magad - DIY)

Illeszd be saját magad 2 perc alatt

Nincs fejlesztőd, vagy nem akarsz várni? Semmi gond! Egyetlen sor kódot kell beillesztened a weboldalad láblécébe. Semmilyen programozói tudásra nincs szükség.

📋 Mi kell hozzá az induláshoz?

  • 1. A ChatMate Beágyazó Kódod: Lépj be a Dashboardra, és a Widget beállítások oldalon kattints a Másolás gombra.
  • 2. Hozzáférés a weboldaladhoz: Belépés a WordPress adminba, vagy a tárhelyed cPanel / Fájlkezelő felületére.
Görgess le a lépésről lépésre útmutatóhoz ↓

Válaszd ki a weboldalad rendszerét

Kattints arra a platformra, amin a weboldalad fut, és kövesd a számozott lépéseket!

1

Lépj be a WordPress admin felületedre

Nyisd meg a böngésződben a weboldalad adminisztrációs felületét (általában a-te-oldalad.hu/wp-admin), és jelentkezz be.

2

Telepítsd az ingyenes WPCode bővítményt

A bal oldali fekete menüben kattints a Bővítmények (Plugins) → Új hozzáadása (Add New) pontra.

A jobb felső keresőbe írd be: WPCode (teljes neve: WPCode – Insert Headers and Footers). Kattints a Telepítés most, majd utána a kék Bekapcsolás gombra.

💡 Tipp: Ha már használsz valamilyen script-kezelőt (pl. Header and Footer Scripts vagy Elementor), nem kell újat telepítened, használd nyugodtan a meglévőt!
3

Nyisd meg a Header & Footer beállításokat

A bal oldali menüben megjelent egy új menüpont: Code Snippets → Header & Footer. Kattints rá!

4

Illeszd be a ChatMate kódot a Footer (Lábléc) dobozba

Görgess le a második dobozhoz, aminek a címe Footer (Lábléc). Egyszerűen kattints bele a dobozba, és illeszd be (Ctrl + V) a ChatMate beágyazó kódodat:

<script src="https://chatmate.hu/chatmate.min.js" data-widget-id="A_TE_WIDGET_ID-D"></script>
5

Kattints a Mentés (Save Changes) gombra

A lap tetején vagy alján kattints a kék Save Changes gombra.

✅ Kész is vagy! Nyisd meg a weboldaladat új lapon: a ChatMate AI robot azonnal ott lebeg a sarokban és fogadja a látogatókat!
1

Lépj be a tárhelyszolgáltatód cPanel felületére

Nyisd meg a tárhelyedhez kapott webcímet (pl. cpanel.tarhelyed.hu vagy a Rackhost, Tarhely.eu, Websupport ügyfélkapuján keresztül), és lépj be felhasználóneveddel és jelszavaddal.

2

Nyisd meg a Fájlkezelőt (File Manager)

A cPanel ikonjai között keresd meg a Fájlok (Files) csoportban lévő Fájlkezelő (File Manager) ikont, és kattints rá. Ekkor megnyílik a tárhelyed mappaszerkezete.

3

Lépj be a public_html mappába

Kattints duplán a bal vagy jobb oldali listában a public_html mappára (egyes szervereken www vagy httpdocs). Itt találhatók a weboldalad élő fájljai.

4

Keresd meg az index.html vagy footer fájlt

Klasszikus HTML weboldal esetén keresd meg az index.html fájlt. (Ha PHP alapú a weboldalad, a footer.php vagy layout.php fájlt keresd).

Kattints jobb egérgombbal a fájlra, és válaszd a Szerkesztés (Edit) opciót. A megerősítő ablakban kattints az Edit gombra.

5

Keresd meg a </body> címkét és illeszd be a kódot

Görgess a fájl leges-legvégére. Keresd meg a záró </body> címkét (nyomhatsz Ctrl + F-et a keresőhöz).

Nyomj egy Entert közvetlenül a </body> elé, és illeszd be a ChatMate kódsort:

<!-- ChatMate AI Widget -->
<script src="https://chatmate.hu/chatmate.min.js" data-widget-id="A_TE_WIDGET_ID-D"></script>
</body>
6

Kattints a Módosítások mentése (Save Changes) gombra

A jobb felső sarokban kattints a kék Save Changes gombra.

✅ Tökéletes! A fájl elmentődött a szerveren, a chatbot máris aktív a weboldaladon!

🛒 Shoprenter Webáruházak esetén:

  1. Lépj be a Shoprenter adminisztrációs felületre.
  2. Kattints a bal oldali menüben a Beállítások → Megjelenés → Egyedi scriptek menüpontra.
  3. Keresd meg a Lábléc scriptek (Body vége) dobozt.
  4. Egyszerűen másold be ide a ChatMate <script> kódodat.
  5. Kattints a Mentés gombra a jobb felső sarokban!

📦 UNAS Webáruházak esetén:

  1. Lépj be az UNAS admin felületre.
  2. Navigálj a Beállítások → Megjelenés → Egyedi HTML és Javascript kódok menüpontba.
  3. Helyezésnél válaszd a: Lábléc (záró </body> elé) opciót.
  4. Oldalak: Válaszd a Minden oldalon jelenjen meg lehetőséget.
  5. Illeszd be a ChatMate kódodat a szövegdobozba, majd kattints a Mentés gombra!

🛍️ Shopify áruházak esetén:

  1. Lépj be a Shopify Adminba.
  2. Kattints az Online Store → Themes (Sablonok) menüre.
  3. Az aktív sablonod mellett kattints a három pontra (...) → Edit code (Kód szerkesztése).
  4. A bal oldali fastruktúrában nyisd meg a Layout → theme.liquid fájlt.
  5. Görgess le a legvégére, keresd meg a </body> sort, és közvetlenül fölé illeszd be a ChatMate kódot.
  6. Kattints a jobb felső Save (Mentés) gombra!

🌐 Webflow oldalak esetén:

  1. A Webflow Dashboardon kattints a projekted melletti beállítások fogaskerékre (Project Settings).
  2. Kattints a Custom Code fülre a felső menüben.
  3. Görgess le a Footer Code dobozhoz.
  4. Illeszd be a ChatMate kódodat.
  5. Kattints a Save Changes gombra, majd publikáld a weboldalt a Publish gombbal!
1

Kapcsolódj a tárhelyhez FTP-n

Nyisd meg a Total Commander vagy FileZilla programot. Csatlakozz a tárhelyedhez a szolgáltatódtól kapott FTP Host, Felhasználónév és Jelszó megadásával.

2

Navigálj a weboldal könyvtárába

Nyisd meg a public_html (vagy httpdocs / www) mappát a szerveren.

3

Nyisd meg szerkesztésre az index.html vagy footer fájlt

Kattints jobb klikkel a fájlra → Szerkesztés (Total Commanderben nyomj F4-et). Nyisd meg bármilyen szövegszerkesztővel (pl. Notepad, VS Code).

4

Illeszd be a kódot a </body> elé és töltsd vissza

Görgess a fájl legaljára, illeszd be a ChatMate kódot közvetlenül a </body> elé, mentsd el a fájlt (Ctrl + S), majd töltsd vissza a szerverre (a felülírás megerősítésével).

✅ Sikeres feltöltés! A weboldalad azonnal frissült a szerveren.

🔍 Hogyan ellenőrizheted, hogy sikerült a beillesztés?

A mentés után a chatbotnak azonnal meg kell jelennie a weboldaladon. Kövesd ezt a 3 egyszerű lépést a teszteléshez:

🕶️
1. Nyiss egy Inkognitó ablakot

A böngészők hajlamosak a régi oldalt a memóriából betölteni. Nyiss egy új Privát / Inkognitó ablakot (Ctrl + Shift + N).

🔄
2. Nyomj egy kemény frissítést

Töltsd be a weboldaladat, és nyomj Ctrl + F5-öt (Macen: Cmd + Shift + R), hogy frissen töltse le a fájlokat.

💬
3. Teszteld az AI chatbotot!

Nézd meg a sarokban lebegő kerek AI ikont: vidd fölé a kurzort (kiszrollozódik az üzenet), kattints rá és írj neki bátran!

Nem jelenik meg a widget vagy elakadtál valamelyik lépésnél? Ne aggódj, nem maradsz egyedül!

✉️ Írj nekünk: info@kazomi.hu