Request: Display API errors as chatbot messages and remove error box

Hey @djjcnncxn09! 👋

This is probably happening because the pop-up is rendering the shortcode dynamically after the script to initialize the chatbots has already been loaded on your page, so it will appear blank as it is uninitialized. When you’re trying to show the chatbot dynamically, you will need to initialize it at that moment. For this, there is a DOM window-available function you can call anytime: mwaiInitialize(). Hope this helps!

Hey @djjcnncxn09! 👋

You will need to call the mwaiInitialize() function whenever you’re loading the Chatbot shortcode dynamically (or when the script has already been loaded). In your case, listen for when the popup is opened and then call this function (available directly from window) to properly render the shortcode.

Hey @djjcnncxn09! 👋

This ultimately depends on your specific setup, so there is no single snippet to handle all use cases. Here is one way you could go about it: add an observer for the display style of your popup, and when it’s visible, call the init method.

const popup = document.getElementById('my-popup');

const observer = new MutationObserver(() => {
  const style = window.getComputedStyle(popup);
  if (style.display !== 'none') {
    mwaiInitialize();
  }
});

observer.observe(popup, { attributes: true, attributeFilter: ['style', 'class'] });