0.0.14 • Published 3 days ago
ablera-assistant-webchat v0.0.14
Ablera's Beth Chatbot
Ablera's Beth Chatbot Component is a customizable web component enabling developers to integrate Beth Virtual Assistant into their web applications.
Installation
To get started with using the Ablera's Chatbot, first you need to install the package from the npm repository.
Run the following command to install the chatbot component:
npm install ablera-assistant-webchat --saveAlternatively you can use CDN.
<script type="text/javascript" src="https://unpkg.com/ablera-assistant-webchat"></script>Configuration Options
The ChatConfig class allows you to configure the chatbot according to your needs. Below are the configuration properties you can set:
userId: A unique identifier for the user chatting with the bot.defaultLang: The default language for the chat interface. ('EN' | 'BG')showDefaultBtn: Display the default button.showPoweredBy: Display 'Powered By' information.theme: The color theme for the chatbot ('blue' or 'default').mode: The display mode for the chatbot ('popup' or 'sidebar').synthesizerConfig: Configuration for the chatbot cognitive services of voice and avatar.backgroundConfig: Configuration for the chat window background image.
Each of these properties can be defined within the configuration JSON object that you pass as the config attribute on the chatbot element.
Simple Usage
To use the chatbot in your HTML file, follow these steps:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Beth Virtual Assistant WebChat</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="index.js"></script>
</head>
<body class="mat-typography" style="margin: 0;">
<script>
const initializeChat = () => {
const chat_el = document.createElement('ablera-assistant-webchat');
const ws_url = 'URL_HERE';
const chat_opened_by_default = true;
const chat_config = JSON.stringify({
userId: 'test-user-id', // required for user session & unique
theme: 'blue', // default
mode: 'sidebar', // sidebar
showPoweredBy: true
});
chat_el.setAttribute('id', 'beth-webchat-el');
chat_el.setAttribute('ws-url', ws_url);
chat_el.setAttribute('config', chat_config);
chat_el.setAttribute('chat-opened', chat_opened_by_default);
document.body.appendChild(chat_el);
};
window.addEventListener('load', initializeChat);
// window.addEventListener('DOMContentLoaded', initializeChat);
</script>
</body>
</html>With lazy loading of the web component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Beth Virtual Assistant WebChat</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body class="mat-typography" style="margin: 0;">
<script>
const loadScript = src => {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
script.onload = () => resolve(script);
script.onerror = () => reject(new Error(`Script load error: ${src}`));
document.head.appendChild(script);
});
};
const initializeChat = async () => {
await loadScript("index.js");
const chat_el = document.createElement('ablera-assistant-webchat');
const ws_url = 'URL_HERE';
const chat_opened_by_default = true;
const chat_config = JSON.stringify({
userId: 'test-user-id', // required for user session & unique
theme: 'blue', // default
mode: 'sidebar', // sidebar
showPoweredBy: true
});
chat_el.setAttribute('id', 'beth-webchat-el');
chat_el.setAttribute('ws-url', ws_url);
chat_el.setAttribute('config', chat_config);
chat_el.setAttribute('chat-opened', chat_opened_by_default);
document.body.appendChild(chat_el);
};
window.addEventListener('load', initializeChat);
// window.addEventListener('DOMContentLoaded', initializeChat);
</script>
</body>
</html>Advanced Usage
Custom Button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Beth Virtual Assistant WebChat</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body class="mat-typography" style="margin: 0;">
<button id="btn">
Custom button to open avatar
</button>
<script>
const loadScript = src => {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
script.onload = () => resolve(script);
script.onerror = () => reject(new Error(`Script load error: ${src}`));
document.head.appendChild(script);
});
};
const initializeChat = async () => {
await loadScript('index.js');
const chat_el = document.createElement('ablera-assistant-webchat');
const ws_url = 'URL_HERE';
const chat_opened_by_default = true;
const chat_config = JSON.stringify({
userId: 'test-user-id', // required for user session & unique
theme: 'blue', // default
mode: 'sidebar', // sidebar
showPoweredBy: true,
showDefaultBtn: false
});
chat_el.setAttribute('id', 'beth-webchat-el');
chat_el.setAttribute('ws-url', ws_url);
chat_el.setAttribute('config', chat_config);
chat_el.setAttribute('chat-opened', chat_opened_by_default);
document.body.appendChild(chat_el);
};
window.addEventListener('load', async () => {
await initializeChat();
const btn = document.getElementById('btn');
const chat_el = document.getElementById('beth-webchat-el');
const toggleChat = () => {
const isOpened = chat_el.getAttribute('chat-opened') === 'true';
chat_el.setAttribute('chat-opened', `${!isOpened}`);
};
btn.addEventListener('click', toggleChat);
});
// window.addEventListener('DOMContentLoaded', initializeChat);
</script>
</body>
</html>