Mielőtt elkezded

Kelleni fog:

• Egy nyilvános asszisztens az EchoAI-ban.
• Az Asszisztens ID (az asszisztens Beágyazás oldalán találod -- kattints a másolás gombra).

Csak nyilvános asszisztenseket lehet beágyazni. A belső és szerződés asszisztensek a dashboardon keresztül érhetők el.

Lebegő chat gomb (legnépszerűbb)

Kis chat ikon a sarokba. A látogató rákattint, megnyílik a chat panel.

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

Pozíció opciók: bottom_right (alapértelmezett), bottom_left, top_right, top_left.

Desktopon a gomb mellett nyílik a chat panel. Mobilon (700px alatt) teljes képernyőn, fehér háttérrel.

Beágyazott widget

A chatet nem lebegtetni akarod, hanem beépíteni egy oldalba? Rakd egy konténerbe a support, kapcsolat vagy bármilyen oldalon.

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 100%-át veszi.

Preview mód

A preview mód egy üdvözlő képernyőt mutat a teljes chat helyett. A látogató látja az üdvözlő üzenetet, a kezdő kérdéseket és egy "Chat indítása" gombot. Kattintásra nyílik a teljes chat.

Mobilon a preview az alapértelmezett beágyazott mód. A lebegő gomb mindig full módban nyit.

Visszatérő látogatóknál más preview-t mutat: az asszisztens ikont és nevét, "Utolsó üzenet X-kor" időbélyeget, és egy "Beszélgetés folytatása" gombot a kezdő kérdések mellett.

Data attribútumos módszer (JavaScript nélkül)

Az SDK-t teljesen HTML data attribútumokkal is konfigurálhatod:

Az SDK automatikusan inicializálódik, ha talál egy data-echo-container attribútumú elemet.

WordPress

1. Töltsd le az EchoAI Chat WordPress plugint.
2. A WordPress admin panelben: Bővítmények > Új hozzáadása > Bővítmény feltöltése.
3. Töltsd fel és kattints a Telepítés most-ra.
4. Aktiváld a plugint.
5. Menj az EchoAI Beállítások-ba a WordPress admin menüben.
6. Illeszd be az Asszisztens ID-t.
7. Állítsd be a megjelenést: pozíció, színek, méret.
8. Mentsd.

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

Részletes útmutató: WordPress plugin útmutató.

Framer

1. Nyisd meg a Framer projekted.
2. Menj: Assets > Add Asset > From URL.
3. Illeszd be a komponens URL-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ágoknál add meg az Asszisztens ID-t.
6. Publikáld a Framer oldalad.

Facebook Messenger

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

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

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

SDK konfigurációs lehetőségek

Ezek a beállítások minden integrációs módszernél működnek.

User context

Adj át metaadatokat a látogatóról, hogy az AI személyre szabhassa a válaszokat:

new EchoSDK({
  assistantIdentifier: 'AZ_ASSZISZTENSED_ID',
  userContext: JSON.stringify({
    userId: '12345',
    membershipTier: 'premium',
    companySize: '50-100 alkalmazott'
  })
});

Max. 1000 karakter. Az AI megkapja ezt a kontextust és felhasználhatja. Például egy prémium tagot másként köszönthet, vagy releváns árazást mutathat.

URL context

Tudasd az asszisztenssel, melyik oldalon van éppen a látogató:

urlContextOptions: {
  autoDetect: true,
  customUrl: 'https://...'
}

Így az AI oldal-releváns válaszokat ad. Például az árazás oldalon proaktívan válaszol árazási kérdésekre.

Starter questions felülírás

A dashboardon beállított kezdő kérdéseket oldalanként felülírhatod:

starterQuestions: [
  { question: 'Hogyan működik az árazás?' },
  { question: 'Milyen funkciók vannak?' },
  { question: 'Kérhetek demót?' }
]

Max. 5 kérdés. Így más-más oldalon más kérdéseket mutathatsz.

Szöveg testreszabás

Felülírhatod az alapértelmezett feliratokat:

textConfig: {
  inputPlaceholder: 'Kérdezz bátran...',
  sourcesLabel: 'Források',
  searchingText: 'Keresés...',
  toolsText: 'Eszközök',
  loadingText: 'Betöltés...',
  startButtonLabel: 'Chat indítása'
}

Header

Szabályozd, hogy a chat fejléc látható-e:

header: {
  enabled: true
}

Mobil viselkedés

Az SDK automatikusan kezeli a mobileszközöket (700px vagy kevesebb szélesség):

• Lebegő gomb: Teljes képernyős chatet nyit. A gomb eltűnik mobil nézetben. Háttér fedi az oldalt.
• Beágyazott widget: Preview mód az alapértelmezett. Kinyitáskor teljes képernyő, az oldal scrollolása le van tiltva.
• Billentyűzet: A chat panel automatikusan átméretezi magát a mobil billentyűzet megnyitásakor és bezárásakor. A fejléc eltűnik a hely maximalizálásáért.
• iOS safe area: Az SDK kezeli a notch és home indicator területeket.

Hibaelhárítás

• Nem jelenik meg a chat? Ellenőrizd, hogy jó-e az Asszisztens ID és nyilvános típusú-e az asszisztens.
• Eltörnek a stílusok? Az SDK Shadow DOM-ot használ a teljes stílus izolációhoz. Az oldalad CSS-e nem hat rá, és fordítva.
• Nem tölt be a font? Az SDK önállóan tölti az Inter fontot. Hálózati korlátozások esetén rendszer fontokra vált.
• Nem marad meg a beszélgetés oldalak között? A beszélgetések localStorage-ben tárolódnak az asszisztens azonosító alapján. Ugyanazt az ID-t használd minden oldalon.

Teljes SDK referencia

Az SDK integrációs útmutató (angol) teljes kontrollt ad a megjelenés, viselkedés és események felett, beleértve a programatikus hozzáférést is.