3 min read 2 wks ago

Client-Side API (JS)

You can interact with the chatbots and conversations directly through JS. Have a look at the MwaiAPI object that it is available directly in your JS console. If you only use one chatbot, you can get the instance by using MwaiAPI.getChatbot(). If you have many, you can mention its ID as the first argument. For example, you could do:

let chatbot = MwaiAPI.getChatbot(); // Get the chatbot; if there are more than one on the same page, you'll need to pass the ID of the chatbot in argument
chatbot.open(); // Opens the chatbot if it's minimized
chatbot.ask("How are you?", false); // Sends a request (if true, the request will be send immediately)
chatbot.clear(); // Clears the chat

JS Filters

Modify the reply: ai.reply

MwaiAPI.addFilter('ai.reply', function (reply, args) {
  const { botId, chatId } = args;
  return reply + ' For more information, visit [Meow Apps](https://meowapps.com).';
});

Examples

MwaiAPI.addFilter('ai.reply', function (reply, args) {
  return reply + ' For more info, visit [Meow Apps](https://meowapps.com).';
});


Auto-Engage If User is Inactive for 30 Seconds

let inactivityTimer;
function resetInactivityTimer() {
  clearTimeout(inactivityTimer);
  inactivityTimer = setTimeout(() => {
    const chatbot = MwaiAPI.getChatbot();
    chatbot.ask("Still there? Let me know if you need help!", true);
  }, 30000); // 30 seconds
}

document.addEventListener('mousemove', resetInactivityTimer);
document.addEventListener('keydown', resetInactivityTimer);
resetInactivityTimer();

Show a Shortcut after a “result”

If you don’t know what a Shortcut is, it is basically a button that displays inside of the chatbot, you can learn more about it here.

MwaiAPI.addFilter('ai.reply', function (reply, args) {
    const { botId, chatId } = args;
    // Check if the reply is from the default bot (assumed ID 'default') and contains 'result'
    if (botId === 'default' && reply.toLowerCase().includes('result')) {
        let chatbot = MwaiAPI.getChatbot(botId);
        chatbot.setShortcuts([
            {
                type: 'message',
                data: {
                    label: 'Thanks',
                    message: 'Thank you!',
                    variant: 'success',
                    icon: null
                }
            }
        ]);
    }
    return reply;
});

Render chatbots dynamically

The chatbots are essentially shortcodes that create HTML elements on your page. These elements won’t mean anything to your browser and won’t render as chatbots until the AI Engine scripts are fully loaded and initialize them properly.

If you’re loading the chatbot dynamically—such as rendering the shortcode after the page has already loaded—the initial script that renders the chatbot will have already passed. As a result, your chatbot won’t appear automatically.

To fix this, you can manually trigger the initialization anytime after the scripts are loaded by calling the globally available function mwaiInitialize().

You can test it by typing mwaiInitialize() in your browser’s developer console.

In practice, you’ll want to listen for a specific event—like a popup opening or a button click—and then call this function to render the chatbot at the right time.

// Observe changes in visibility of the popup
const popup = document.getElementById('chatPopup');

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

// Start observing style changes
observer.observe(popup, { attributes: true, attributeFilter: ['style'] });