Customize Web Messenger

  • Updated on Jul 3, 2025
  • Published on Jul 4, 2024
  • 2 minute(s) read
Prev Next

This guide aims to explain how you can customize Web Messenger.

Global parameters

Global parameters can be added to either a JavaScript window object or URL query parameters to change the layout of Web Messenger.

  • isFullScreen: If this parameter is set to true, Web Messenger will start in full screen.
  • mbHideHeader: If this parameter is set to true, Web Messenger’s header will be hidden.
  • mbWidget: If this parameter is set to true, the Web Messenger widget will open by default without requiring a click on the button.

You can see an example below:

  • URL: https://app.mindbehind.com/chatbot-test?channelId={your_channel_id}&isFullScreen=true
  • Window object: window.mbIsFullScreen = true

For the assistant to start without user input, use the function below:

<script>
        function openChat(retryCount, timeoutDuration) {
            setTimeout(function () {
                if (typeof mbShowOnclick === 'function') {
                    mbShowOnclick(true);
                } else {
                    if (retryCount > 5) {
                        console.error("Could not open chat");
                        return;
                    }
                    retryCount += 1;
                    openChat(retryCount, timeoutDuration * 2);
                }
            }, timeoutDuration)
        }
        openChat(0, 100)
</script>

Add language support

You can add a language property to the global window object. You can see an example below:

window.language = "en"

window.language = "ar"

Allow full chat page usage

To allow full chat page usage, you can use the script below:

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Web Messenger</title>

    <script>

        window.mbIsFullScreen = true;

    </script>

    <script async src='https://cdn.mindbehind.com/sdk/mindbehind-sdk.js?auto=true&key=63e4ff3e19804960f23b1dee&api=tr'></script>

</head>

CSS variables

Web Messenger uses these default values below:

:root {

--mb-mwc-font-stack: "MuseoSansRounded", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

--mb-mwc-fontSize-xs: 12px;

--mb-mwc-fontSize-sm: 16px;

--mb-mwc-fontSize-xl: 26px;

--mb-mwc-fontWeight-regular: 300;

--mb-mwc-lineHeight-xs: 18px;

--mb-mwc-lineHeight-sm: 22px;

--mb-mwc-light-gray-color: #9b9b9b;

--mb-mwc-dark-gray-color: #4d4d4d;

--mb-mwc-agent-message-background-start-color: #fff;

--mb-mwc-agent-message-background-end-color: #fff;

--mb-mwc-agent-message-text-color: #4d4d4d;

--mb-mwc-client-message-background-start-color: #6b4491;

--mb-mwc-client-message-background-end-color: #ec4e7c;

--mb-mwc-client-message-text-color: #fff;

--mb-mwc-danger-color: #d6312e;

}

You can see how each default value functions below:

  • --mb-mwc-font-stack sets the default font family for the text inside web chat.
  • --mb-mwc-fontSize-xs sets the default font size for the text.
  • --mb-mwc-fontSize-sm sets the font size for titles.
  • --mb-mwc-fontSize-xl sets the font size of the emojis.
  • --mb-mwc-fontWeight-regular sets the default font weight for the text.
  • --mb-mwc-lineHeight-xs sets the default line height for the text.
  • --mb-mwc-lineHeight-sm sets the line height of exit popup buttons.
  • --mb-mwc-light-gray-color sets the color for light gray for the text box when sending input is invalid --mb-mwc-dark-gray-color sets the color of dark gray for the messages (used heavily).
  • --mb-mwc-agent-message-background-start-color sets the linear start color of the background for the messages on the left-hand side.
  • --mb-mwc-agent-message-background-end-color sets the linear end color of the background for the messages on the left-hand side.
  • --mb-mwc-agent-message-text-color sets the text color for the messages on the left-hand side
  • --mb-mwc-client-message-background-start-color sets the linear start color of the background for the messages on the right-hand side.
  • --mb-mwc-client-message-background-end-color sets the linear end color of the background for the messages on the right-hand side.
  • --mb-mwc-client-message-text-color sets the text color for the messages on the right-hand side --mb-mwc-danger-color sets the error color.

Change the variables

These variables are set on the root scope and can be changed from JavaScript as follows. 

document.documentElement.style.setProperty({variable_name},{value})

For example, document.documentElement.style.setProperty("--mb-agent-message-background-end-color","green")

To get the value, you can use:

getComputedStyle(document.documentElement).getPropertyValue({variable_name})

Change or remove emojis

To change or remove emojis, you can use the values below:

[

"mwc-inputActions",

"iconsContainer",

"quickReplyIcon",

"forwardConvIcon",

"attachIcon",

"infoIcon",

"locationIcon",

"tagIcon",

"holdIcon",

"noteIcon",

"emojiIcon",

"emojiPicker",

];

These are the IDs of each icon in the footer. You can hide them separately or fully.

You can take a look at some of the examples below:

  • document.getElementById("mwc-inputActions").style.display = "none"; // This command hides the command footer area completely.
  • document.getElementById("iconsContainer").style.display = "none"; // This command hides all the icons and leaves their place empty.
  • document.getElementById("emojiPicker").style.display = "none"; // This command hides the emoji picker pop-up.
  • document.getElementById("quickReplyIcon").style.display = "none"; // This command hides only the quickReplyIcon (same for all the rest).