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
Window object: window.isFullScreen = true
Web messenger uses these default 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;
}
--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-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
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})
[
"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)