# 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
```
## 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
Beth Virtual Assistant WebChat
```
## With lazy loading of the web component
```html
Beth Virtual Assistant WebChat
```
## Advanced Usage
### Custom Button
```html
Beth Virtual Assistant WebChat
```