Skip to main content

Customize CSS for Booking Links

Serban

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.  Make sure to scroll to the bottom of this page for example code to copy and paste into your instance!

Note: CSS customization is specific to an individual workspace. CSS experience is recommended. 

Custom CSS for booking links works for Queue URL's. Custom CSS will not be reflected on individual user's booking links. 

Adding Custom CSS

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!

Example Code:

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%);
}

Related articles

Comments

0 comments

Please sign in to leave a comment.