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!
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 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="times-header"] {
display: none;
}
Form Screen
Change the 'Confirm Meeting' button color
Copy the code below for the syntax
[data-chili-css="confirm-button"] {
background: #HEX;
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;
}