Change The Pop-Up

You can acheive this using some CSS, have a look :

.mwai-open-button > img {
    width: 150px;
    height: 150px;

You can also move it around :

Note that there are many ways to acheive this, depending on what your configuration is. This is just the simplest way.

.mwai-open-button {
    bottom: 250px !important;
		right: 250px !important;

If you are encountering an overlapping issue, with some full-screen menu, for instance, do not hesitate to change the z-index for the chatbot icon as follows:

.mwai-chatbot-default {
	z-index: 1;

If you think the chatbot icon takes too much space in mobile format, you can reduce its size (refer to the above example) when your user is on a mobile device, or completely hide it:

@media screen and (max-width: 756px ) {
    .mwai-chatbot-container {
        display: none;

You can also use this same logic to create your own toggle system for the pop-up icon:

<button onclick="toggleChatbot()">Toggle Chatbot</button>

    // JavaScript function to toggle the display of the chatbot container
    function toggleChatbot() {
        var chatbotContainer = document.querySelector('.mwai-chatbot-container');
        // Toggle the display property
        if ( === 'none') {
   = 'block';
        } else {
   = 'none';
Did this answer your question?