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

Properties	Description	Type
sidebarColor	color of the sidebar (Hex color code)	String
backgroundColor	color of the background (Hex color code)	String
fontFamily	font family	String
fontSize	font size	String
sidebarTextColor	color of the text for sidebar	String
chatUnapprovedMessageBackgroundColor	background color for chat unapproved message	String
chatMessageColor	color of the chat message	String
buttonColor	color of the button on the chat interface	String
buttonHoverColor	color when hover over the button	String
buttonTextColor	color of the button text	String
chatMessageFont	font of the chat message	String
usernameFont	font for the username	String
modalFont	font for the modal	String
timestampFont	font for the timestamp	String
sendButtonIconColor	icon color of the send button	String
sendButtonBackgroundColor	background color of the send button	String
textareaBackgroundColor	background color of the text area	String
textareaBorderColor	border color of the text area	String
chatMessageHoverColor	Hover color for the chat message	String
usernameFontSize	font size for the username	String
timestampFontSize	font size for the timestamp	String
sidebarHeadingTextColor	heading color for the sidebar	String
sidebarTextFontSize	text font size for the sidebar	String
sidebarHeadingFontSize	font size for the heading of the sidebar	String
headerBackgroundColor	background color for the heading	String
headerTextColor	text color of the header	String
headerFontSize	font size of the header	String
modalBackgroundColor	background color of the modal	String
modalFontColor	font color of the modal	String
modalHeadingFontSize	font size of the model heading	String
modalLabelFontSize	font size of the modal label	String
textareaFontSize	font size of the text area	String
hideInviteUserButton	whether to hide the invite user button	Boolean
hideOnlineUsersList	whether to hide the online users list	Boolean
hideOnlineUserCounter	whether to hide the Online User Counter	Boolean
hideEmojiPicker	whether to hide the Emoji Picker	Boolean
hideMarkdownSuggestions	whether to hide markdown suggestions	Boolean
hideProfilePics	whether to hide Profile Pics	Boolean
hideClaimAndEditProfileButtons	whether to hide profile buttons	Boolean
hideNotificationButton	whether to hide notification button	Boolean
hideLoginFields	whether to hide login fields	boolean
hideHeader	whether to hide header	Boolean
hideSidebar	whether to hide side bar	Boolean
collapseSidebar	whether to collapse sidebar	Boolean
hideChatInputTextArea	Hide the Text Area to Send the Chat Message. Useful in showing view-only chat rooms on some pages.	Boolean
timeFormat	Enum String with value 12h or 24h.	String (enum)
dateFormat	Check 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.

Duration	Token	Output
Month	M	1 2 ... 11 12
	Mo	1st 2nd ... 11th 12th
	MM	Jan Feb ... Nov Dec
	MMMM	January February ... November December
Day of Month	D	1 2 ... 30 31
	Do	1st 2nd ... 30th 31st
	DD	01 02 ... 30 31
Day of Year	DDD	1 2 ... 364 365
	DDDo	1st 2nd ... 364th 365th
	DDDD	001 002 ... 364 365
Day of Week	d	0 1 ... 5 6
	do	0th 1st ... 5th 6th
	dd	Su Mo ... Fr Sa
	ddd	Sun Mon ... Fri Sat
	dddd	Sunday Monday ... Friday Saturday
Year	YY	70 71 ... 29 30
	YYYY	1970 1971 ... 2029 2030