Skip to content

Instantly share code, notes, and snippets.

@michaelhays
Created Dec 10, 2019
Embed
What would you like to do?
Chatbot model injection
window.addEventListener('message', (event) => {
const iframeContainer = document.getElementById('banduro-iframe-container');
// when the chatbot is ready to be injected with the chatbot ID
if (hasOwnProperty.call(event.data, 'chatbotMounted')) {
iframeContainer.childNodes[0].contentWindow.postMessage({
chatbotId: atob(banduroChatbotId), // eslint-disable-line no-undef
version: 'prod',
parentWidth: document.body.clientWidth,
}, '*');
}
// when the chatbot has loaded and is ready to be interacted with
if (hasOwnProperty.call(event.data, 'chatbotLoaded')) {
iframeContainer.classList.add('chatbot-minimized');
if (event.data.minimizedDisplay === 'avatar') {
iframeContainer.classList.add('chatbot-avatar');
} else {
iframeContainer.classList.add('chatbot-header');
}
iframeContainer.classList.remove('chatbot-loading');
iframeContainer['data-width'] = `${event.data.width}px`;
iframeContainer['data-height'] = `${event.data.height}px`;
}
// when the chatbot is toggled open
if (hasOwnProperty.call(event.data, 'chatbotOpen')) {
if (event.data.chatbotOpen) {
iframeContainer.classList.add('chatbot-open');
iframeContainer.classList.remove('chatbot-minimized');
iframeContainer.style.width = iframeContainer['data-width'];
iframeContainer.style.height = iframeContainer['data-height'];
} else {
iframeContainer.classList.add('chatbot-minimized');
iframeContainer.classList.remove('chatbot-open');
iframeContainer.removeAttribute('style');
}
}
});
const iframeContainer = document.createElement('div');
iframeContainer.id = 'banduro-iframe-container';
iframeContainer.classList.add('chatbot-loading');
const iframe = document.createElement('iframe');
iframe.id = 'banduro-iframe';
iframe.src = 'https://chatbot.banduro.ai';
iframeContainer.appendChild(iframe);
const css = document.createElement('style');
css.type = 'text/css';
const outerStyling = `
#banduro-iframe-container {
border-radius: 5px;
bottom: 20px;
box-shadow: 0 2px 10px 3px #00000033;
max-height: calc(100vh - 50px);
max-width: 100vw;
overflow: hidden;
position: fixed;
right: 20px;
transition: all 0.2s ease-in-out;
z-index: 8000;
}
#banduro-iframe-container.chatbot-loading {
display: none;
}
#banduro-iframe-container.chatbot-minimized.chatbot-header {
height: 40px;
width: 200px;
}
#banduro-iframe-container.chatbot-minimized.chatbot-avatar {
border-radius: 25px;
height: 50px;
width: 50px;
}
@media (max-width: 767px) {
#banduro-iframe-container.chatbot-open {
border-radius: 0;
bottom: 0;
right: 0;
width: 100vw !important;
}
}
#banduro-iframe {
border: 0;
height: 100%;
width: 100%;
}`;
css.appendChild(document.createTextNode(outerStyling));
document.querySelector('head').appendChild(css);
document.querySelector('body').appendChild(iframeContainer);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment