All Categories
Features & Tutorials
Change The Pop-Up

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>

<script>
    // JavaScript function to toggle the display of the chatbot container
    function toggleChatbot() {
        var chatbotContainer = document.querySelector('.mwai-chatbot-container');
        
        // Toggle the display property
        if (chatbotContainer.style.display === 'none') {
            chatbotContainer.style.display = 'block';
        } else {
            chatbotContainer.style.display = 'none';
        }
    }
</script>
Did this answer your question?
😞
😐
🤩
Support For Other OpenAI Models Where Can I Submit A Feature Request ?