Customize CSS for Booking Links – Chili Piper

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.

CSS styling experience is recommended before attempting to add / modify your workspace CSS.

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

Quick CSS Generator
CSS Snippets (Most used)
Example of how to make your own custom edits

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.

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

CSS Snippets (Most used)

Copy/paste these snippets into your Chili Piper instance and change the HEX color to your colors!

Edit your date-selected background color

Copy the code below for the syntax Date Selected background color.

.fabe-days-chooser .fabe-date-selected {
    background-color: #FE4400;
}

Edit your date-slot-hover background color

Copy the code below for the syntax Date-Slot Hover background color. Black (#000) in this example.

.fabe-days-chooser .fabe-date-slot:hover {
   background-color: #000;
}

Edit your time-slot:hover background color

Copy the code below for the syntax Time-Slot Hover background color.

.fabe-time-chooser .fabe-time-holder .fabe-time-slot:hover {
   background-color: #FE4400 !important;
}

Edit your date-slot:hover text color

Copy the code below for the syntax Time-Slot Hover background color. White (#ffffff) in this example.

.fabe-days-chooser .fabe-date-slot:hover .fabe-month-day-label .fabe-day {
    color: #ffffff;
}
.fabe-days-chooser .fabe-date-slot:hover .fabe-month-day-label .fabe-month {
    opacity: 1;
    color: #ffffff;
}

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. Use-Case is if you are deploying CP in non-English speaking countries.

.fabe-availability-mobile .fabe-prospect-header .fabe-prospect-name {
    display: none;
}

.fabe-availability-mobile .fabe-times .fabe-prospect-name {
    display: none;
}

Remove the reschedule button on your confirmation pages

Copy the code below for the syntax

.fabe-booked .fabe-reschedule-container {
    display: none;
}

Edit the main header's font color for the scheduling page of Concierge

Copy the code below for the syntax

.fabe-av-title {
   color: #EA5938 !important;
}

Edit the Reschedule Button Text Color

Copy the code below for the syntax

.fabe-booked .fabe-reschedule-container .fabe-reschedule-button span {
   color: #000C50;
}

Edit the Reschedule Button Hover Color

Copy the code below for the syntax

.fabe-booked .fabe-reschedule-container .fabe-reschedule-button:hover {
   color: #000C50 !important;    
   background-color: #000C50 !important;
}

Edit the Calendar Icon Color on the /booked page

Copy the code below for the syntax ( use this CSS filter generator)

.fabe-booked .fabe-booked-title .fabe-booked-title-holder .fabe-booked-icon-holder .fabe-chili-book-img {
   -webkit-filter: invert(11%) sepia(46%) saturate(4068%) hue-rotate(222deg) brightness(78%) contrast(117%);
}

Edit the Calendar Icon Color during the "booking" flow

Copy the code below for the syntax ( use this CSS filter generator)

.fabe-loading-section .fabe-book-loading-flower .fabe-chili-book-img {
-webkit-filter: invert(11%) sepia(46%) saturate(4068%) hue-rotate(222deg) brightness(78%) contrast(117%);
}

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

Concierge only: 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;
}

Example of how to make your own custom edits

1) In Chili Piper Admin, navigate to CSS Preferences. This is where you will add the custom code.

2) Next, navigate to Queues, copy a Queue URL and paste into a browser tab.

3) Once you have the Booking Link open, right click and "Inspect" the page:

4) Locate the individual classes you would like to customize and test out the different CSS within the page.

In the example picture below, you are inspecting the color of the background behind the selected date. You can then edit this color on the page with your brand's color. For HTML color reference, please see here.

5) Once you customize the page to your choosing, copy the CSS from the browser and Paste CSS into Chili Piper.

Add the CSS into Chili Piper under "Preferences":

6) Save the CSS and reload your queue booking link to test what you have done!

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

CSS Snippets (Most used)

Edit your date-selected background color

Edit your date-slot-hover background color

Edit your time-slot:hover background color

Edit your date-slot:hover text color

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

Remove the reschedule button on your confirmation pages

Edit the main header's font color for the scheduling page of Concierge

Edit the Reschedule Button Text Color

Edit the Reschedule Button Hover Color

Edit the Calendar Icon Color on the /booked page

Edit the Calendar Icon Color during the "booking" flow

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

Example of how to make your own custom edits

2) Next, navigate to Queues, copy a Queue URL and paste into a browser tab.

3) Once you have the Booking Link open, right click and "Inspect" the page:

4) Locate the individual classes you would like to customize and test out the different CSS within the page.

5) Once you customize the page to your choosing, copy the CSS from the browser and Paste CSS into Chili Piper.

6) Save the CSS and reload your queue booking link to test what you have done!

Related articles