ablera-assistant-webchat
Version:
Ablera Assistant Webchat is a customizable and easy-to-integrate virtual assistant for your web applications.
60 lines (54 loc) • 2.08 kB
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 = '';
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>