Chatbot model injection

iframe.esnext.js

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);