@moveo-ai/web-client
Version:
Client side library to load the moveo chat widget and connect it with your agent
91 lines (80 loc) • 5.45 kB
HTML
<html><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/><meta name="keywords" content="Moveo.ai, Preview, WebChat, WebWidget, webclient, chatbot"/><meta name="description" content="Preview and Improve your AI Agent"/><meta name="twitter:card" value="summary"><meta property="og:title" content="Moveo.ai Webchat Preview"/><meta property="og:type" content="website"/><meta property="og:url" content="https://moveo.ai"/><meta property="og:image" content="https://web-client.moveo.ai/public/og-image.jpg"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:description" content="Preview and Improve your AI Agent"/><title>Moveo.ai Client Preview</title><script src="../preview.css.min.js?07dd1123c44ec1785cfc"></script><style>body::before {
background-image: url('/public/background.svg');
}</style></head><body><div class="moveo_preview"><div class="preview_actions"><p class="header_text"><span class="colored">Preview</span> and <span class="colored">Test</span><br>your Webchat</p><p class="body_text">Moveo.ai can help you build engaging conversational applications powered by Artificial Intelligence.</p><div class="button_container"><button class="action_button" id="open-chat-button">Open Webchat</button> <button class="action_button" id="close-chat-button">Close Webchat</button> <button class="action_button" id="render-chat-button">Render Webchat</button></div></div><div id="embed-chat-container"><p id="embed-text">The webchat will render in the html element of your choice. Render the webchat here, in order to preview other settings.</p><div id="embed-chat"></div></div></div><script>// Get version from URL or default to v1
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const version = urlParams.get('version') || 'v1';
// Find web-client.min.js directly
const webpackFiles = `../iframe.min.js?07dd1123c44ec1785cfc,../iframe.v2.min.js?07dd1123c44ec1785cfc,../web-client.min.js?07dd1123c44ec1785cfc,../preview.css.min.js?07dd1123c44ec1785cfc,../audio-client.min.js?07dd1123c44ec1785cfc,../webrtc-client.min.js?07dd1123c44ec1785cfc,../telnyx-client.min.js?07dd1123c44ec1785cfc`.split(',');
const webClientFile = webpackFiles.find(file => file.includes('web-client.min.js'));
const previewCssFile = webpackFiles.find(file => file.includes('preview.css.min.js'));
// Load preview.css
const previewCssScript = document.createElement('script');
previewCssScript.src = previewCssFile;
document.head.appendChild(previewCssScript);
// Dynamically load the correct version of the web client
const script = document.createElement('script');
script.src = webClientFile;
script.onload = function () {
// Initialize the web client after the script is loaded
const integrationId = urlParams.get('integrationId');
const host = urlParams.get('host');
const element = document.getElementById('embed-chat');
const encodedConfig = urlParams.get('_config');
let config = {};
if (encodedConfig) {
try {
config = JSON.parse(atob(encodedConfig));
} catch (error) {
console.debug({ error, encodedConfig }, 'Error parsing config');
}
}
MoveoAI.init({
...config,
version,
integrationId,
host,
element,
})
.then((instance) => {
console.log('Preview initialized', instance);
window.webClientInstance = instance;
if (instance.config.widget_position === 'embed') {
const embedContainer = document.getElementById('embed-chat-container');
embedContainer.style.display = 'block';
const renderButton = document.getElementById('render-chat-button');
renderButton.classList.add("enabled");
renderButton.onclick = function () {
document.getElementById('embed-text').style.display = 'none';
document.getElementById('embed-chat').style.display = 'block';
renderButton.style.removeProperty('background-color')
renderButton.classList.add("disabled");
renderButton.disabled = true;
};
} else {
const openButton = document.getElementById('open-chat-button');
openButton.classList.add("enabled")
openButton.onclick = function () {
instance.openWindow();
};
const closeButton = document.getElementById('close-chat-button');
closeButton.classList.add("enabled");
closeButton.onclick = function () {
instance.closeWindow();
};
}
const primaryColor = instance?.config?.background_color ?? '#1B66D6';
const colored = document.querySelectorAll('span.colored');
for (const element of colored) {
element.style.color = primaryColor;
}
const buttons = document.querySelectorAll('.action_button');
for (const button of buttons) {
button.style.backgroundColor = primaryColor;
}
})
.catch((error) => {
console.error(error, 'Error initializing preview');
});
};
document.head.appendChild(script);</script></body></html>