ablera-assistant-webchat
Version:
Ablera Assistant Webchat is a customizable and easy-to-integrate virtual assistant for your web applications.
188 lines (160 loc) • 6.47 kB
Markdown
# 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:
```bash
npm install ablera-assistant-webchat --save
```
Alternatively you can use CDN.
```html
<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:
```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
```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
```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>
```