Общ преглед на Chat API
Тази функция е достъпна само в избрани планове. Тя Ви позволява да управлявате уиджета за чат програмно и да регистрирате функции за обратно извикване (callbacks) за събития в чата.
Търсите REST API? Тази статия разглежда JavaScript API на уиджета в браузъра (window.aichatbotApi) за страници, в които е вграден уиджетът на ChatLab. За REST API от тип сървър към сървър, използвано за разговори с ботове от Вашия бекенд или за програмно управление на ботове, вижте статиите за Bot Talk API и Management API.
Първи стъпки
Chatbot API не е налично веднага след зареждане на страницата Ви - скриптът трябва първо да се зареди и инициализира. Трябва да използвате window.aichatbotCallback.onSessionActivated като механизъм за първоначално зареждане (bootstrap), за да получите сигурен достъп до API.
Поставете този код преди скриптовия таг на ChatLab:
<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>
onSessionActivated се задейства при създаване на чат сесията (т.е. когато потребителят отвори уиджета). Вътре в него съществуването на API обекта е гарантирано и сесията е активна, така че можете безопасно да извиквате sendMessage(), updateClientContext() и да регистрирате функции за обратно извикване на събития.
Важно: Не извиквайте window.aichatbotApi.getChatbotApi() директно в скрипта на страницата си, без да изчакате - API обектът не съществува, докато скриптът на ChatLab не се зареди и инициализира.
Съвет: Ако трябва само да управлявате уиджета (показване/скриване/превключване) и не се нуждаете от активна сесия, вместо това слушайте за DOM събитието aichatbotReady:
window.addEventListener('aichatbotReady', function(e) {
var chatbot = window.aichatbotApi.getChatbotApi(e.detail.apiKey);
chatbot.showChat();
});
Методи
| Метод | Описание |
|---|---|
showChat() |
Отваряне на уиджета за чат |
hideChat() |
Затваряне на уиджета за чат |
toggleChat() |
Превключване на видимостта на уиджета |
sendMessage(text) |
Програмно изпращане на съобщение |
updateClientContext(data) |
Актуализиране на потребителския контекст (вижте по-долу) |
setLanguage(code) |
Превключване на уиджета към даден език (само за многоезични ботове, вижте по-долу) |
getLanguage() |
Връща езика, който уиджетът използва в момента |
getAvailableLanguages() |
Връща списъка с езици, които ботът предлага |
addCallback(name, fn) |
Регистриране на callback за събитие |
Забележка: sendMessage и updateClientContext изискват активна сесия. Използвайте модела за инициализация с onSessionActivated, показан в раздела „Първи стъпки“.
Callbacks
Регистрирайте функциите за обратно извикване на събития във Вашия обработчик onSessionActivated (вижте „Първи стъпки“):
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);
});
Налични Callbacks
| Callback | Данни | Описание |
|---|---|---|
onSessionActivated |
- | Чат сесията е готова |
onUserMessage |
string |
Потребителят изпрати съобщение |
onChatbotMessage |
string |
Ботът отговори със съобщение |
onProductClick |
string (ID на продукт или връзка) |
Потребителят кликна върху продукт (изисква включени Offer Cards) |
onLeadCollectionFormSubmit |
{email, phone, name} |
Формулярът за събиране на лийдове беше изпратен |
onContactFormSubmit |
{email, message} |
Формулярът за контакт/поддръжка беше изпратен |
onLiveChatFormSubmit |
{name, email} |
Формулярът за чат на живо беше изпратен |
Остарели callbacks за събития (Deprecated)
Обектът window.aichatbotCallback също така поддържа onUserMessage и onChatbotMessage като директни свойства. Този формат е остарял - използвайте addCallback() вместо него за достъп до всички видове callbacks:
window.aichatbotCallback = {
onUserMessage(message) { ... },
onChatbotMessage(message) { ... }
};
Забележка: window.aichatbotCallback.onSessionActivated не е остарял - това е препоръчителният bootstrap механизъм за инициализиране на Chat API (вижте „Първи стъпки“).
Внедряване чрез Iframe
При внедряване чрез iframe използвайте postMessage, за да комуникирате с чатбота:
Изпращане на команди
const chatbotIframe = document.querySelector('iframe');
// Показване на чата
chatbotIframe.contentWindow.postMessage({
type: 'aichatbot',
action: 'showChat'
}, '*');
// Скриване на чата
chatbotIframe.contentWindow.postMessage({
type: 'aichatbot',
action: 'hideChat'
}, '*');
// Изпращане на съобщение
chatbotIframe.contentWindow.postMessage({
type: 'aichatbot',
action: 'sendMessage',
payload: 'Hello!'
}, '*');
// Актуализиране на клиентския контекст
chatbotIframe.contentWindow.postMessage({
type: 'aichatbot',
action: 'updateClientContext',
payload: { clientId: 'user123', clientName: 'John' }
}, '*');
// Превключване на езика (само за многоезични ботове)
chatbotIframe.contentWindow.postMessage({
type: 'aichatbot',
action: 'setLanguage',
payload: 'de'
}, '*');
Получаване на Callbacks
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;
}
});
Актуализиране на клиентския контекст
Функцията updateClientContext позволява актуализиране на клиентския контекст по време на активна сесия:
chatbot.updateClientContext({
clientId: "unique-client-identifier", // Задължително
clientName: "John", // По избор
clientEmail: "john@doe.com", // По избор
clientPhone: "555-444-333", // По избор
clientSecurityToken: "your-token", // По избор
clientHostContext: { // По избор
param1: "value1",
param2: "value2"
}
});
Параметри:
- clientId (задължително): Уникален идентификатор за клиента
- clientName, clientEmail, clientPhone (по избор): Данни за клиента, показвани в разговорите
- clientSecurityToken (по избор): Токен за сигурност за оторизация пред API
- clientHostContext (по избор): Допълнителни контекстни параметри, достъпни в персонализирани API действия
Употреба в API извиквания:
Контекстните атрибути могат да се използват в извиквания на функции на API чрез конфигуриране на параметъра на API от тип "Context":
clientName,clientEmail,clientPhone,clientSecurityToken- Персонализирани параметри на host контекста с префикс
client, напр.clientparam1,clientparam2
Език
Тези методи работят само при многоезични чатботове. При едноезичен бот уиджетът няма езиков слой за превключване, така че setLanguage() не прави нищо, а getAvailableLanguages() връща само основния език на бота. Първо включете многоезичната поддръжка в Settings > Languages (Настройки > Езици) - вижте Многоезични чатботове.
Използвайте setLanguage(), когато страницата Ви съществува на няколко езика и искате чатът да се отваря на езика, който посетителят чете, вместо на този, зададен в браузъра му:
window.addEventListener('aichatbotReady', function(e) {
var chatbot = window.aichatbotApi.getChatbotApi(e.detail.apiKey);
chatbot.setLanguage(document.documentElement.lang); // напр. "de"
console.log(chatbot.getLanguage()); // "de"
console.log(chatbot.getAvailableLanguages()); // ["en", "de", "fr", ...]
});
Можете също така да декларирате езика на страницата преди зареждането на скрипта, което предотвратява краткото премигване на грешния език:
<script>window.aichatbotLanguage = "de";</script>
Кой език има предимство. Уиджетът определя езика в следния ред:
- Език, избран директно от посетителя в езиковото меню на самия уиджет.
- Езикът на страницата, зададен чрез
setLanguage()илиwindow.aichatbotLanguage. - Езикът на браузъра на посетителя.
- Базовият език на чатбота.
Изборът на самия посетител се запомня за следващи посещения, но спира да важи веднага щом езикът на страницата се промени - така Вашият превключвател на езици винаги има приоритет пред остарял избор. Кодовете са по стандарта ISO 639-1 (en, de, pl); регионален код като de-AT преминава към de. Език, който ботът не поддържа, се игнорира.
Превключването на езика не прекратява разговора и не изчиства историята му.