Developer/IT > Whisbi API > API Reference > General Config > Styles

Styles

These styles apply to Engage, Guide, and Sell widget. Buttons are the main element where the brand color can be applied. You can set a primary color for the main buttons (such as CTAs), and a secondary color for the secondary actions (Such as cancel, etc). The default color for the button texts is white, so make sure that primaryColor and secondaryColor are dark enough so that the white text can be read easily.

NameDescriptionRequired
direction String The direction of the texts: from left to right or from right to left Optional
Default: ltr
textColor String Color that will be applied to the main texts of your widget Optional
primaryColor String Primary color for your widget, mainly used as background color of the main buttons. Optional
primaryTextColor String Text color for the main buttons of your widget. Optional
secondaryColor String Secondary color for your widget, mainly used as background color of the secondary buttons Optional
secondaryTextColor String Text color for the secondary buttons of your widget. Optional
buttonRadius String Border radius of all the buttons except the like and mute buttons. Optional
header whisbi.GeneralHeaderStylesConfig Shared Header styles between the Engage, Guide and Sell widget Optional
floatingButton whisbi.GeneralFloatingButtonStylesConfig Shared floating button styles between the Engage, Guide and Sell widget Optional
titles whisbi.GeneralTitleStylesConfig Shared titles styles between the Engage, Guide and Sell widget Optional

Header styles

This header styles apply to the Engage, Guide and Sell widget.

NameDescriptionRequired
fontFamily String Font family for the header of your widget Optional
fontSize String Font size for the header of your widget Optional
fontWeight String Font weight for the header of your widget Optional
backgroundColor String Background color for the header of your widget. It must be a light color, as the header text color is dark grey. Optional
textTransform String Capitalization for the text of the header. It uses the same format as the CSS property text-transform Optional
textColor String Text color for the header of your widget Optional

Floating Button styles

This styles apply to the Engage, Guide and Sell widget.

NameDescriptionRequired
borderColor String Color of to the outer circle of the agent picture on the floating button. It can be set as a solid color or a gradient. Optional
collapseType String It determines where the customer has to click to collapse the conversation bubble: ‘icon’ to do so from an X icon, or ‘button’ to do it from a customizable button that appears inside the conversation bubble. Optional
Default: ‘button’
onDesktop whisbi.generalFloatingButtonPosition Position properties of the floating button on desktop. Optional
Default: 12px
onMobile whisbi.generalFloatingButtonPosition Position properties of the floating button on mobile. Optional
Default: 12px

Floating Button position

Position of the floating button based on device type (desktop or mobile).

NameDescriptionRequired
marginY String Bottom margin of the floating button from the browser’s edge. Optional
Default: 12px
marginX String Right margin of the floating button from the browser’s edge (left margin if the direction is set to “rtl”). Optional
Default: 12px

Titles styles

This titles styles apply to the Engage, Guide and Sell widget.

NameDescriptionRequired
fontFamily String Font family for the titles of your widget Optional
fontSize String Font size for the titles of your widget Optional
fontWeight String Font weight for the titles of your widget Optional