Skip to main content

loadCustomization(CustomizationOptions)

With this method you can dynamically load customizations in the chat room. If there is a use-case where you want to show different styles of chat rooms on different pages or want to create a view only chat room for some users you can easily do this with the loadCustomization method.

This method allows you customize the same chat room differently without applying the customizations globally.

Example:

JavaScript
// Example Customization
frame1.loadCustomization({
sidebarColor: "#ff3",
chatMessageFont: "Nunito"
});

CustomizationOptions

PropertiesDescriptionType
sidebarColorcolor of the sidebar (Hex color code)String
backgroundColorcolor of the background (Hex color code)String
fontFamilyfont familyString
fontSizefont sizeString
sidebarTextColorcolor of the text for sidebarString
chatUnapprovedMessageBackgroundColorbackground color for chat unapproved messageString
chatMessageColorcolor of the chat messageString
buttonColorcolor of the button on the chat interfaceString
buttonHoverColorcolor when hover over the buttonString
buttonTextColorcolor of the button textString
chatMessageFontfont of the chat messageString
usernameFontfont for the usernameString
modalFontfont for the modalString
timestampFontfont for the timestampString
sendButtonIconColoricon color of the send buttonString
sendButtonBackgroundColorbackground color of the send buttonString
textareaBackgroundColorbackground color of the text areaString
textareaBorderColorborder color of the text areaString
chatMessageHoverColorHover color for the chat messageString
usernameFontSizefont size for the usernameString
timestampFontSizefont size for the timestampString
sidebarHeadingTextColorheading color for the sidebarString
sidebarTextFontSizetext font size for the sidebarString
sidebarHeadingFontSizefont size for the heading of the sidebarString
headerBackgroundColorbackground color for the headingString
headerTextColortext color of the headerString
headerFontSizefont size of the headerString
modalBackgroundColorbackground color of the modalString
modalFontColorfont color of the modalString
modalHeadingFontSizefont size of the model headingString
modalLabelFontSizefont size of the modal labelString
textareaFontSizefont size of the text areaString
hideInviteUserButtonwhether to hide the invite user buttonBoolean
hideOnlineUsersListwhether to hide the online users listBoolean
hideOnlineUserCounterwhether to hide the Online User CounterBoolean
hideEmojiPickerwhether to hide the Emoji PickerBoolean
hideMarkdownSuggestionswhether to hide markdown suggestionsBoolean
hideProfilePicswhether to hide Profile PicsBoolean
hideClaimAndEditProfileButtonswhether to hide profile buttonsBoolean
hideNotificationButtonwhether to hide notification buttonBoolean
hideLoginFieldswhether to hide login fieldsboolean
hideHeaderwhether to hide headerBoolean
hideSidebarwhether to hide side barBoolean
collapseSidebarwhether to collapse sidebarBoolean
hideChatInputTextAreaHide the Text Area to Send the Chat Message. Useful in showing view-only chat rooms on some pages.Boolean
timeFormatEnum String with value 12h or 24h.String (enum)
dateFormatCheck the table below for supported date formats.String

Date Format

"DD/MM/YYYY" - 31/12/2022

"MM/DD/YYYY" - 12/31/2022

"MM-DD-YYYY" - 12-31-2022

"YYYY-MM-DD" - 2022-12-31

"MMM Do YYYY" - Dec 31st 2022

Please refer the to table to below for all the possible format for day, month year.

DurationTokenOutput
MonthM1 2 ... 11 12
Mo1st 2nd ... 11th 12th
MMJan Feb ... Nov Dec
MMMMJanuary February ... November December
Day of MonthD1 2 ... 30 31
Do1st 2nd ... 30th 31st
DD01 02 ... 30 31
Day of YearDDD1 2 ... 364 365
DDDo1st 2nd ... 364th 365th
DDDD001 002 ... 364 365
Day of Weekd0 1 ... 5 6
do0th 1st ... 5th 6th
ddSu Mo ... Fr Sa
dddSun Mon ... Fri Sat
ddddSunday Monday ... Friday Saturday
YearYY70 71 ... 29 30
YYYY1970 1971 ... 2029 2030