Customize CSS for Booking Links

Chili Piper admins are able to customize the CSS for booking links. This gives you the ability to style your booking links to match your company brand. 

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

• Quick CSS Generator
• CSS Selectors
  • Calendar Screen
  • Form Screen
  • Confirmation Screen
  • Concierge: Phone and Video Selection
  • General

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

Generate CSS

Click to Copy

CSS Selectors 

To pick and choose individual selectors, copy/paste these snippets into your Chili Piper instance and change the HEX color to your colors! We've gathered some of the most commonly changed styles here, but you are free to 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, reviewing the selectors listed below.

Note that CSS customization is specific to an individual Hot / Spicy Workspaces and is not available with our Free product. Customized CSS will show on queue / router URLs only, and not personal booking links or meeting types attached to a user's personal booking link.

Chili Piper's support team may not be able to provide support for customized CSS, or issues that result 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

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

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

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

Copy the code below for the syntax

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="custom-chili-times-header"] {
display: none;
}

Form Screen

Change the 'Confirm Meeting' button 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="custom-chili-confirm-button"] {
background: #HEX;
}

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

Confirmation Screen

Customize your Confirmation Page and Cancel Button

Copy the code below for the syntax - 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;
}

Concierge: Phone, and Video Selection

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 - 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 a 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;
}

General 

Hide the Chili Piper Branding on your website when the calendar loads

Removes the "Powered by Chili Piper" branding that appears in the footer of the booking window.

Note this only affects links used within a concierge flow (eg: queue links in a workspace), and does not remove branding from personal booking links. 

[data-test-id="BrandingFooter"]{
display:none;
}