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 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.isFullScreen = true


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

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

    • 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, ...

    • How to Use Generic Channel

      Creating generic channel: Generic channel can be used to integrate any messaging platform or channel to MindBehind. It supports three actions: Receive endpoint: The MindBehind endpoint that will receive your messages, and its ...

    • How to integrate a Shopify store to MindBehind

      In the Company Management page, select Integrations section to see Shopify integration. Click on "ADD" here. The form that directly pops up shows the required information to connect to your Shopify store. URL represents your regular URL directed to ...