Ezen az oldalon

• Mielőtt elkezded
• Melyik módszert válaszd?
• Lebegő chat gomb
• Beágyazott widget
• Megosztható link
• WordPress
• Framer
• Facebook Messenger
• Hibaelhárítás

Mielőtt elkezded

A beágyazáshoz két dolog kell:

• Egy publikus asszisztens az EchoAI-ban.
• Az asszisztens-azonosító — az asszisztens Beágyazás oldalán találod, a másolás gombbal viszed vágólapra.

Beágyazni csak publikus asszisztenst lehet. A belső tudásbázis és szerződés típusú asszisztensek a vezérlőpulton keresztül érhetők el.

Melyik módszert válaszd?

Hat kódolás nélküli mód közül választhatsz. A táblázat segít eldönteni, melyik illik a helyzetedhez:

Fejlesztő vagy, és teljes kontrollt akarsz a kódból? Akkor az SDK integrációs útmutató a te oldalad.

Lebegő chat gomb népszerű

Egy kis chat ikon a képernyő sarkában. A látogató rákattint, és megnyílik a chat panel. Másold ki a kódrészletet az asszisztens Beágyazás oldaláról, és illeszd be a weboldaladba — az alábbi minta a HTML data attribútumos változat, amihez nem kell JavaScriptet írnod:

1. Nyisd meg az asszisztens Beágyazás oldalát az oldalsávban.
2. Másold ki a kódrészletet.
3. Illeszd be a weboldaladon a záró </body> tag elé.

Az SDK automatikusan elindul, amint talál egy data-echo-container attribútumú elemet — neked csak be kell illesztened a részletet.

• Pozíció: data-echo-floating-position — bottom_right (alapértelmezett), bottom_left, top_right, top_left.
• Színtéma: data-echo-theme — pink (alapértelmezett), purple, blue, green, amber.
• Ikon: ha nem állítasz be sajátot, a lebegő gomb az asszisztens feltöltött profilképét mutatja.

Asztali nézetben a gomb mellett nyílik a chat panel. Mobilon (700 px alatt) teljes képernyőn jelenik meg.

Beágyazott widget

Nem lebegtetni akarod a chatet, hanem beépíteni egy oldalba? Tedd egy konténerbe — a support, a kapcsolat vagy bármelyik oldaladon. Ugyanazt a kódrészletet illeszted be, csak a lebegő gombot hagyod ki belőle (a Beágyazás oldal ehhez is ad kész kódot).

A widget kitölti a konténer szélességét, és a megadott magasságot használja. Ha nem adsz meg magasságot, a konténer teljes magasságát kitölti.

Megosztható link új

Nincs saját weboldalad, vagy egyszerűen csak egy linket akarsz szétküldeni? Minden publikus asszisztenshez tartozik egy kész, önálló chatoldal — semmilyen kódot nem kell beágyaznod.

1. Nyisd meg az asszisztens részletező oldalát a vezérlőpulton.
2. A Megosztás blokkban másold ki a linket a Másolás gombbal, vagy nyisd meg új lapon a Megnyitás gombbal.
3. Oszd meg a linket — emailben, közösségi média bióban, QR-kódon, üzenetben, bárhol.

A link egy letisztult, teljes oldalas chatfelületet nyit: felül az asszisztens neve és ikonja, egy Új beszélgetés gomb, és maga a chat. Tökéletes, ha gyorsan szeretnéd valakinek megmutatni az asszisztenst, vagy ha egyáltalán nincs honlapod, amibe beágyazhatnál.

WordPress

1. Töltsd le az EchoAI Chat WordPress bővítményt.
2. A WordPress admin felületen nyisd meg a Bővítmények > Új hozzáadása > Bővítmény feltöltése menüt.
3. Töltsd fel a fájlt, majd kattints a Telepítés most gombra.
4. Aktiváld a bővítményt.
5. Nyisd meg az EchoAI Beállítások menüpontot a WordPress admin menüben.
6. Illeszd be az asszisztens-azonosítót.
7. Állítsd be a megjelenést: pozíció, színek, méret.
8. Mentsd a beállításokat.

A chat widget az oldalad minden aloldalán megjelenik. Ha csak adott oldalakra szeretnéd, használd a [echo_ai] shortcode-ot.

Részletes útmutató: WordPress bővítmény útmutató.

Framer

1. Nyisd meg a Framer projekted.
2. Lépj az Assets > Add Asset > From URL menübe.
3. Illeszd be a komponens URL-jét (a Beágyazás oldalon találod):
   • Chat Widget komponens — teljes chat widget az oldalra.
   • Lebegő gomb komponens — chat gomb a sarokba.
4. Húzd a komponenst a vászonra.
5. A komponens tulajdonságainál add meg az asszisztens-azonosítót.
6. Publikáld a Framer oldalad.

Facebook Messenger

Kösd össze a publikus asszisztensedet egy Facebook Oldallal, és a látogatók közvetlenül a Messengerben cseveghetnek vele.

1. Nyisd meg az asszisztens részletes oldalát, és lépj a Csatornák fülre.
2. Kattints a Facebook Oldal csatlakoztatása gombra.
3. Jelentkezz be Facebookkal, és válaszd ki a csatlakoztatni kívánt Oldalt.
4. Add meg a kért engedélyeket (oldalkezelés, üzenetek küldése és fogadása).

A csatlakoztatás után az asszisztens automatikusan válaszol a Messenger beszélgetésekre. A beszélgetések a Beszélgetések listában jelennek meg, a webes chat beszélgetések mellett. A Facebook Oldal posztjai és bemutatkozása szintén tartalomforrásként szinkronizálódnak.

Hibaelhárítás

• Nem jelenik meg a chat? Ellenőrizd, hogy jó-e az asszisztens-azonosító, és hogy publikus típusú-e az asszisztens.
• Eltörnek a stílusok? A chat saját, elszigetelt stílust használ, így az oldalad megjelenése nem hat rá — és a chat sem változtatja meg az oldalad kinézetét. Itt nincs teendőd.
• Nem tölt be a betűtípus? A chat magával hozza a saját betűtípusát. Ha a hálózat ezt nem engedi betölteni, automatikusan a látogató eszközén lévő rendszerbetűtípusra vált — ez nem hiba.
• Nem marad meg a beszélgetés az oldalak között? A chat a látogató böngészőjében jegyzi meg a beszélgetést, az asszisztens-azonosítóhoz kötve. Ehhez ugyanazt az azonosítót kell használnod minden oldalon. Bővebben: Chat funkciók — Beszélgetések megőrzése.

Fejlesztőknek: teljes kontroll kódból

A fentiek lefedik a tipikus, kódolás nélküli beágyazást. Ha fejlesztő vagy, és többre van szükséged, az SDK integrációs útmutató az egyetlen igazságforrás minden haladó beállításhoz:

• Konfiguráció kódból — saját new EchoSDK({...}) inicializálás, user kontextus, URL kontextus, indító kérdések felülírása, szöveg-testreszabás, fejléc.
• Programozott vezérlés — a window.echoInstance objektumon keresztül (pl. beszélgetés visszaállítása, kontextus frissítése) és a chat echo:* eseményei.
• Belső működés — a Shadow DOM-os stílus-elszigetelés és a betűtípus-kezelés részletei.