Skip to main content

Customize the Look and Feel of Chili Piper with CSS

Gaines Murfee
  • Updated

Chili Piper admins can customize the CSS for booking links. This allows you to style your booking links to match your company brand. 

Review the following sections to learn more about customizing your CSS!

Input your Primary Hex Color Below to Generate the Chili Piper CSS

 

 

CSS Selectors 

To pick and choose individual selectors, copy/paste these snippets into your Chili Piper instance (under Workspace > Workspace Settings > CSS Preferences) and change the HEX color to your colors! We've gathered some of the most commonly changed styles here, but you can customize any elements on the booking pages that may not be included in this article.

We recommend using the quick CSS generator above as a starting point, and for more advanced changes, review the selectors listed below.


Note that CSS customization is specific to an individual Workspace. Customized CSS will show on queue/router URLs only, not personal booking links or meeting types attached to a User's personal booking link.

Chili Piper's support team may be unable to provide support for customized CSS or issues resulting from customizing the CSS on your booking pages. As such, CSS styling experience is strongly recommended before attempting to add/modify your workspace CSS.

 

Calendar Screen

mceclip0.png

Edit your date-selected background color:

Copy the code below for the syntax

[data-chili-css="date-slot-fill"] {
   background: #HEX !important;
}

Edit your date-selected-hover background color:

Copy the code below for the syntax

[data-chili-css='date-slot-fill'] [data-chili-css='date-slot-fill-text'] {
   color: #000000 !important;
}

Edit your date-slot-hover background color: 

Copy the code below for the syntax. Note: the bottom selector also changes the on-hover text color to white which is usually recommended, but you may choose to remove this 

[data-chili-css="date-slot-fill"]:hover {
   background: #HEX !important;
}

[data-chili-css="date-slot-fill"]:hover {
   color: #ffffff !important;
}

Edit your date slider arrows background color on hover:

Copy the code below for the syntax

[data-chili-css="date-arrows"]:hover {
   background: #HEX !important;
}

[data-chili-css="date-arrows"]:hover div {
   border-color: #FFFFFF !important;
}

Edit your time-slot background color:

Copy the code below for the syntax

[data-chili-css="time-slot-fill"] {
   background: #HEX !important;
}

Edit your time-slot-hover background color:

Copy the code below for the syntax

[data-chili-css="time-slot-fill"]:hover {
   background: #HEX !important;
}

[data-chili-css="time-slot-fill"]:hover span {
   color: #ffffff !important;
}

Change the header colors: "What day works for you?" and "What time works? text in your booking links for Concierge

Copy the code below for the syntax

[data-chili-css="availability-header"] {
   color: #HEX !important;
}

[data-chili-css="times-header"] {
   color: #HEX !important;
}

Hide the "What day works for you?" and "What time works? text in your booking links for Concierge

Copy the code below for the syntax

[data-chili-css="availability-header"] {
   display: none;
}

[data-chili-css="times-header"] {
   display: none;
}

Form Screen

mceclip1.png

Change the 'Confirm Meeting' button color

Copy the code below for the syntax

[data-chili-css="confirm-button"] {
   background: #HEX;
   color: #ffffff;
}

Confirmation Screen

mceclip2.png

Customize your Confirmation Page and Cancel Button

Copy the code below for the syntax - the same color is recommended for all #HEX placeholders below

[data-chili-css="cancel-button"] { 
   background: #HEX;
}

[data-chili-css="confirmation-bar"] { 
   background: #HEX; 
}

[data-chili-css="confirmation-bar"] span { 
   color: #ffffff; 
}

Hide the reschedule link on your confirmation pages

Copy the code below for the syntax

[data-chili-css="reschedule-link"] {
   display: none !important;
}

Multiple Meeting Type Screen

mceclip0.png

Change the background hover

The following will change the "hover" background color when selecting multiple meeting types:

.fabe-online-selector .fabe-templates-holder .fabe-template-holder:hover {
   background-color:#HEX;
}

Change the description hover

The following will change the "hover" font color when selecting multiple meeting types:

.fabe-descritption:hover{
   color: #FFFFFF !important;
}

Adjust the arrow color

Forward Arrow:

mceclip2.png

.fabe-online-selector .fabe-templates-holder .fabe-template-holder .fabe-template-arrow-holder .fabe-arrow-right {
   background-color:#HEX;
}

Back Arrow:

mceclip0.png

.fabe-book-with-holder .fabe-navigate-back .fabe-arrow-right {
   background-color:#HEX;
}

Concierge: Phone and Video Selection

mceclip3.png

We will have options directly within the router to customize these colors, but you may also use custom CSS to adjust the colors as you see fit:

Header Color

Default orange header color on the concierge option screen. Copy the code below for the syntax - the same #HEX color is recommended as your primary color on the calendar page.

[data-chili-css="status-card-layout--header"] {
   background: #HEX !important;
}

Content Background Color

Copy the code below for the syntax. The area below the orange header that the buttons reside on. This is defaulted to grey but can be customized.

[data-chili-css="status-card-layout--content"] {
   background: #HEX !important;
}

Selection Buttons

The below selectors in order are: The default background color, the default text color, the background color when hovering, and the text color while hovering.

[data-chili-css="text-and-button-status-card--button"]{
   background:#HEX !important;
}

[data-chili-css="text-and-button-status-card--button"] span{
   color:#HEX2 !important;
}

[data-chili-css="text-and-button-status-card--button"]:hover{
   background: #000000 !important;
}

[data-chili-css="text-and-button-status-card--button"]:hover span{
   color:#FFFFFF !important;
}

Related articles