A Chat API áttekintése
Ez a funkció csak bizonyos csomagokban érhető el. Lehetővé teszi a chat widget programozott vezérlését, valamint visszahívások (callbacks) regisztrálását a chateseményekre.
A REST API-t keresi? Ez a cikk a böngészőn belüli JavaScript widget API-ról (window.aichatbotApi) szól olyan oldalak esetén, ahová a ChatLab widget be van ágyazva. Ha a szerverek közötti REST API-ra van szüksége, amellyel a háttérrendszerből (backend) beszélgethet a robotokkal, vagy programozottan kezelheti őket, tekintse meg a Bot Talk API és a Management API cikkeinket.
Első lépések
A chatbot API nem érhető el azonnal az oldal betöltésekor - a szkriptnek először be kell töltődnie és inicializálódnia kell. Az API biztonságos eléréséhez a window.aichatbotCallback.onSessionActivated függvényt kell használnia indítási mechanizmusként.
Helyezze ezt a kódot a ChatLab script tag elé:
<script>
window.aichatbotCallback = {
onSessionActivated() {
var chatbot = window.aichatbotApi.getChatbotApi('YOUR_API_KEY');
chatbot.addCallback('onUserMessage', function(message) {
console.log('User said:', message);
});
chatbot.addCallback('onChatbotMessage', function(message) {
console.log('Bot replied:', message);
});
chatbot.sendMessage('Hello from the API!');
}
};
</script>
<script>window.aichatbotApiKey="YOUR_API_KEY";</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Az onSessionActivated akkor fut le, amikor a csevegési munkamenet létrejön (azaz a felhasználó megnyitja a widgetet). Ezen belül az API objektum már garantáltan létezik, és a munkamenet aktív, így biztonságosan meghívhatja a sendMessage() és az updateClientContext() metódusokat, valamint regisztrálhat esemény-visszahívásokat.
Fontos: Ne hívja meg a window.aichatbotApi.getChatbotApi() függvényt közvetlenül az oldalszkriptből várakozás nélkül - az API objektum nem létezik mindaddig, amíg a ChatLab szkript be nem töltődött és nem inicializálódott.
Tipp: Ha csak a widgetet szeretné vezérelni (megjelenítés/elrejtés/váltás), és nincs szüksége aktív munkamenetre, figyelje inkább az aichatbotReady DOM-eseményt:
window.addEventListener('aichatbotReady', function(e) {
var chatbot = window.aichatbotApi.getChatbotApi(e.detail.apiKey);
chatbot.showChat();
});
Metódusok
| Metódus | Leírás |
|---|---|
showChat() |
A chat widget megnyitása |
hideChat() |
A chat widget bezárása |
toggleChat() |
A widget láthatóságának váltása |
sendMessage(text) |
Üzenet küldése programozottan |
updateClientContext(data) |
Felhasználói kontextus frissítése (lásd alább) |
setLanguage(code) |
A widget nyelvének átváltása (csak többnyelvű botoknál, lásd alább) |
getLanguage() |
A widget által jelenleg használt nyelv visszaadása |
getAvailableLanguages() |
A bot által kínált nyelvek listájának visszaadása |
addCallback(name, fn) |
Esemény-visszahívás regisztrálása |
Megjegyzés: A sendMessage és az updateClientContext metódusokhoz aktív munkamenet szükséges. Használja az Első lépések részben bemutatott onSessionActivated inicializálási mintát.
Visszahívások (callbacks)
Regisztrálja az esemény-visszahívásokat az onSessionActivated kezelőn belül (lásd: Első lépések):
chatbot.addCallback('onUserMessage', function(message) {
console.log('User said:', message);
});
chatbot.addCallback('onChatbotMessage', function(message) {
console.log('Bot replied:', message);
});
chatbot.addCallback('onProductClick', function(productIdOrLink) {
console.log('Product clicked:', productIdOrLink);
});
chatbot.addCallback('onLeadCollectionFormSubmit', function(data) {
console.log('Lead captured:', data.email);
});
chatbot.addCallback('onContactFormSubmit', function(data) {
console.log('Support request from:', data.email);
});
chatbot.addCallback('onLiveChatFormSubmit', function(data) {
console.log('Live chat started:', data.name);
});
Elérhető visszahívások
| Visszahívás | Adat | Leírás |
|---|---|---|
onSessionActivated |
- | A csevegési munkamenet készen áll |
onUserMessage |
string |
A felhasználó üzenetet küldött |
onChatbotMessage |
string |
A bot üzenettel válaszolt |
onProductClick |
string (termékazonosító vagy link) |
A felhasználó egy termékre kattintott (az Offer Cards funkció engedélyezése szükséges) |
onLeadCollectionFormSubmit |
{email, phone, name} |
Elküldték a leadgyűjtő űrlapot |
onContactFormSubmit |
{email, message} |
Elküldték a kapcsolatfelvételi/ügyfélszolgálati űrlapot |
onLiveChatFormSubmit |
{name, email} |
Elküldték a Live Chat űrlapot |
Korábbi esemény-visszahívások (elavult)
A window.aichatbotCallback objektum közvetlen tulajdonságként is támogatja az onUserMessage és az onChatbotMessage elemeket. Ez a formátum elavult - az összes visszahívási típus eléréséhez használja inkább az addCallback() metódust:
window.aichatbotCallback = {
onUserMessage(message) { ... },
onChatbotMessage(message) { ... }
};
Megjegyzés: A window.aichatbotCallback.onSessionActivated nem elavult - ez az ajánlott indítási mechanizmus a Chat API inicializálásához (lásd: Első lépések).
Beágyazás iframe-ben
Ha iframe-es beágyazást használ, a postMessage segítségével kommunikálhat a chatbottal:
Parancsok küldése
const chatbotIframe = document.querySelector('iframe');
// Show chat
chatbotIframe.contentWindow.postMessage({
type: 'aichatbot',
action: 'showChat'
}, '*');
// Hide chat
chatbotIframe.contentWindow.postMessage({
type: 'aichatbot',
action: 'hideChat'
}, '*');
// Send message
chatbotIframe.contentWindow.postMessage({
type: 'aichatbot',
action: 'sendMessage',
payload: 'Hello!'
}, '*');
// Update client context
chatbotIframe.contentWindow.postMessage({
type: 'aichatbot',
action: 'updateClientContext',
payload: { clientId: 'user123', clientName: 'John' }
}, '*');
// Switch language (multi-language bots only)
chatbotIframe.contentWindow.postMessage({
type: 'aichatbot',
action: 'setLanguage',
payload: 'de'
}, '*');
Visszahívások fogadása
window.addEventListener('message', (event) => {
if (event.data?.type !== 'aichatbot-callback') return;
const { apiKey, callback, data } = event.data;
switch (callback) {
case 'onSessionActivated':
console.log('Session ready');
break;
case 'onUserMessage':
console.log('User said:', data);
break;
case 'onChatbotMessage':
console.log('Bot replied:', data);
break;
case 'onProductClick':
console.log('Product clicked:', data);
break;
case 'onLeadCollectionFormSubmit':
console.log('Lead captured:', data);
break;
case 'onContactFormSubmit':
console.log('Contact form:', data);
break;
case 'onLiveChatFormSubmit':
console.log('Live chat started:', data);
break;
}
});
Ügyfélkontextus frissítése
Az updateClientContext függvény lehetővé teszi az ügyfélkontextus frissítését egy aktív munkamenet során:
chatbot.updateClientContext({
clientId: "unique-client-identifier", // Required
clientName: "John", // Optional
clientEmail: "john@doe.com", // Optional
clientPhone: "555-444-333", // Optional
clientSecurityToken: "your-token", // Optional
clientHostContext: { // Optional
param1: "value1",
param2: "value2"
}
});
Paraméterek:
- clientId (kötelező): Az ügyfél egyedi azonosítója
- clientName, clientEmail, clientPhone (opcionális): A beszélgetésekben megjelenített ügyféladatok
- clientSecurityToken (opcionális): Biztonsági token az API-hitelesítéshez
- clientHostContext (opcionális): További kontextusparaméterek, amelyek elérhetők az egyéni API-műveletekben
Használat az API-hívásokban:
A kontextusattribútumok az API-függvényhívásokban úgy használhatók fel, ha az API-paraméter típusát „Context”-re állítja:
clientName,clientEmail,clientPhone,clientSecurityToken- Egyéni hosztkontextus-paraméterek
clientelőtaggal, példáulclientparam1,clientparam2
Nyelv
Ezek a metódusok kizárólag többnyelvű chatbotok esetén működnek. Egy egyetlen nyelvet használó botnál a widget nem rendelkezik váltható nyelvi réteggel, így a setLanguage() semmit sem csinál, a getAvailableLanguages() pedig csak a bot saját nyelvét adja vissza. Először kapcsolja be a többnyelvű támogatást a Settings > Languages (Beállítások > Nyelvek) menüpontban - lásd: Többnyelvű chatbotok.
Használja a setLanguage() metódust, ha az oldala több nyelven is elérhető, és azt szeretné, hogy a chat azon a nyelven nyíljon meg, amelyet a látogató éppen olvas, nem pedig azon, amelyre a böngészője be van állítva:
window.addEventListener('aichatbotReady', function(e) {
var chatbot = window.aichatbotApi.getChatbotApi(e.detail.apiKey);
chatbot.setLanguage(document.documentElement.lang); // e.g. "de"
console.log(chatbot.getLanguage()); // "de"
console.log(chatbot.getAvailableLanguages()); // ["en", "de", "fr", ...]
});
Az oldal nyelvét még a szkript betöltése előtt is megadhatja, amellyel elkerülhető a nem megfelelő nyelv rövid felvillanása:
<script>window.aichatbotLanguage = "de";</script>
Melyik nyelv élvez elsőbbséget. A widget a következő sorrendben határozza meg a nyelvet:
- A látogató által a widget saját nyelvválasztó menüjében kiválasztott nyelv.
- Az oldal nyelve a
setLanguage()metódusból vagy awindow.aichatbotLanguageváltozóból. - A látogató böngészőjének nyelve.
- A chatbot alapértelmezett nyelve.
A látogató saját választását a rendszer megjegyzi a későbbi látogatásokra, de a beállítás érvényét veszti, amint az oldal nyelve megváltozik - így az Ön nyelvváltója mindig felülírja a korábbi választást. A kódok ISO 639-1 formátumúak (en, de, pl); a regionális kódok, mint például a de-AT, visszaesnek az alapkódra (de). Ha a megadott nyelv nem érhető el a botban, a rendszer figyelmen kívül hagyja.
A nyelvváltás nem szakítja meg a beszélgetést, és nem törli a csevegési előzményeket sem.