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.
| Name | Description | Required |
|---|---|---|
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.
| Name | Description | Required |
|---|---|---|
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.
| Name | Description | Required |
|---|---|---|
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).
| Name | Description | Required |
|---|---|---|
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.
| Name | Description | Required |
|---|---|---|
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 |