How to Customize Web Messenger

How to Customize Web Messenger

Global Parameters

These are the parameters that can be added to either JavaScript window object or to URL query parameters, to change something in the layout of web messenger.


isFullScreen: if this parameter is set to true, web messenger will start as 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, web messenger widget will be opened without pressing on the button by default


Ex:

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

Window object: window.mbIsFullScreen = true 



For the assistant to start without a user input, use the function below:
  1. <script>
  2.         function openChat(retryCount, timeoutDuration) {
  3.             setTimeout(function () {
  4.                 if (typeof mbShowOnclick === 'function') {
  5.                     mbShowOnclick(true);
  6.                 } else {
  7.                     if (retryCount > 5) {
  8.                         console.error("Could not open chat");
  9.                         return;
  10.                     }
  11.                     retryCount += 1;
  12.                     openChat(retryCount, timeoutDuration * 2);
  13.                 }
  14.             }, timeoutDuration)
  15.         }
  16.         openChat(0, 100)
  17. </script>


Adding Language Support

Add language property to global window object.
Ex:
window.language = "en" 
window.language = "ar"


CSS Variables

Web messenger uses these default values.

Default used values

: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;


}

 

Explanations

--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

 

How to change

These variables are set on root scope, and they can be changed from javaScript as follows

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

Ex:


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


Also, to get the value you can use:


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


How to Change or Remove Emojis

[


"mwc-inputActions",


"iconsContainer",


"quickReplyIcon",


"forwardConvIcon",


"attachIcon",


"infoIcon",


"locationIcon",


"tagIcon",


"holdIcon",


"noteIcon",


"emojiIcon",


"emojiPicker",

];


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



Ex:


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 leave 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)


    • Related Articles

    • How to Integrate Web Messenger

      1. Go to the MindBehind platform 2. Choose the company that your assistant belongs to 3. Click the “Channels” icon 4. Click the “Connect” button for Web Messenger, fill the name field and connect. Now, you should see the channel you created recently. ...

    • How to Integrate Your Customized SMS Provider with Web Messenger

      Recommendation: Check the Web Messenger Integration Editor document. Reminder: To be able to customize the SMS provider the "Authentication" field should be set as "One-time password." Any company can use their SMS provider if they prefer. For the ...

    • How to Use Callout Feature for Web Messenger

      Enable Call Out By sliding the toggle in the web messenger editor, the user can choose whether the call out will appear or not. Call Out Text Text: Includes a limit of 150 characters that will be the main call out message. Background Start Color & ...

    • How to Publish Web Messenger by Using Google Tag Manager

      About Google Tag Manager (GTM) Google Tag Manager is a free tool that allows you manage and deploy marketing tags on your website or mobile app without having to modify the code. For more information you can visit their website. If you do not have an ...

    • How to connect a chatbot to Facebook Messenger

      To publish your chatbot on your Facebook page, make sure that you are admin of this page as a first. To check your role Go to the settings of the page On the left find ‘Page Tasks’ or ‘Page Roles’ Check your role whether it is ‘Admin’. If not, please ...