Who can use this feature?
Branding is where admins give their team’s links, and scheduling flow their own special touch. They can add a company logo, change colors everywhere in the flow using our pre-built styling, or go the extra mile with Custom CSS to maximize the experience.
We will explore each detail of this feature below!
Table of Contents
- Accessing and Initial Steps
- Preview Screen
- General Information
- Lock Settings
- Company Logo
- Default Styling Settings
- Display Chili Piper branding
- Reset to default
- Language & Copy
- Custom CSS
Accessing and Initial Steps
Admins can access the "Branding" page on the Admin Center's left-hand side menu.
As soon as you access the page, you will land in the "General" tab, where you can use some nice features to spice up your booking links even more!
Before proceeding, once done with any updates, do not forget to Publish Changes at the top-right by clicking the button with the same name to ensure your updates will be reflected.
Also, notice that these settings will not impact your Concierge Router customization as they are independent. Click here to check for more details on how to customize it there.
Finally, we will cover each available feature in more detail below.
Preview Screen
At the right, you will notice a preview screen that allows you to see the changes you are working with on the fly.
Navigate in the tabs located in the header to move between your editable pages from the drop-down shown below.
General Information
Company Name
The first setting you will notice is the General Information, and then, a place to set your Company Name. This will be used in associated Dynamic Tags that can be included in your Meeting Types and Reminders.
Lock Settings
Within settings, you will notice the "Lock these settings in for all Workspaces" setting, which can be toggled on or off.
If toggled on, the branding configured on the Admin Center will be applied to all workspaces, and it cannot be updated from a workspace perspective. This option is useful if you want unified branding across all your workspaces, teams, etc.
If toggled off, you enable each workspace to have different branding across them.
Do not forget to publish your changes once done!
Company Logo
Here, you can define the logo that will be displayed on all Scheduling Pages for all users in the org. It cannot be changed by users.
Click "Add" to find a new logo from your local computer. The logo image needs to be 2 MB maximum.
If you already have a logo, click "Edit" to add a new one or completely remove it using the "Remove" button..
The logo will be placed on your Calendar Screen's top-right:
Do not forget to publish your changes once done!
Default Styling Settings
Brand
Primary Color
The primary color will be applied across some places within your booking experience:
- Calendar screen Button
- Form screen (Confirm Meeting button)
- Suggested times colors in e-mails
-
Action Color (Chat)
Click the box with the hexadecimal color, and we will display a color palette where you can navigate and choose the one you want from there.
You can also type a hexadecimal value directly.
Calendar Screen
Background Color
This will be the color applied to your calendar's screen background. Notice in the video below how the background changes while moving in the color palette:
Header Text Color
Here, we can update the calendar screen's header color, specifically the one that says, "What day is best for you?"
Confirmation Screen
Moving to the confirmation screen, this is the page your prospects will see after finishing the booking process, containing some details about the booked meeting such as day, time, Guests, and who they are meeting with.
Preview
While performing your updates, click the "Preview" button, and Chili Piper will redirect you to the Confirmation Screen tab of the right-hand side preview to facilitate!
Background Color
This will be the color applied to your confirmation screen's background. Notice in the video below how the background changes while moving in the color palette. You can directly type a hexadecimal value if you would like.
Confirmation Bar
Here, we can stylize the color of the confirmation bar, which contains the text "An email has been sent with the full booking details! 🎉". You can directly type a hexadecimal value if you would like.
Confirmation Text
This is where we can edit the text color that goes inside the confirmation bar, more specifically the "An email has been sent with the full booking details! 🎉" text color. You can directly type a hexadecimal value if you would like.
Form Screen
Moving to the form screen, this is the page your prospects will see after the calendar screen while filling out their form details.
Preview
While performing your updates, click the "Preview" button, and Chili Piper will redirect you to the Form Screen tab of the right-hand side preview to facilitate!
Background Color
This will be the color applied to your confirmation screen's background. Notice in the video below how the background changes while moving in the color palette. You can directly type a hexadecimal value if you would like.
Do not forget to publish your changes once done!
Display Chili Piper branding
If this setting is on, the "Powered By Chili Piper" branding will appear at the bottom of reminders, notifications, and meeting confirmation screens. If toggled off, the same branding will not be displayed.
This setting should be enabled by default for ChiliCal Org.
Do not forget to publish your changes once done!
Reset to default
Would you like to start from scratch again? No problem!
Use the Reset to default setting to revert your customization to the initial settings, which can be found below:
Do not forget to publish your changes once done!
Language & Copy
At the header, you will also notice the Language & Copy tab, where you can customize and preview how the booking experience will look for prospects whenever we identify one of the enabled languages.
Lock Settings
This view has a Lock switch, which means when toggled on, the selected languages at this level apply to all Workspaces and cannot be changed within a Workspace.
Languages
Right below, you can select the Languages that will be included in the booking experience. English comes enabled by default.
Headers & Button Copy
Within the Preview Language setting, you can navigate between each enabled language and check what the Confirmation Screen, Guest Form, and Calendar Screen headers will look like, and also edit as you wish:
Do not forget to publish your changes once done!
Custom CSS
You can also customize your pages using custom CSS codes instead of the options we covered until now! Access the "Custom CSS" tab on the Branding page to start playing around. We would suggest using this option if you have some knowledge of CSS.
Note that any updates made from the Custom CSS tab will overwrite those made in the General tab. If you notice your changes made in the General tab are not reflected, always double-check if you have any custom CSS.
Now, let's cover this page in more detail:
Custom Styling
Starting with the Custom Styling box at the right, this is the place to paste the custom CSS you built so that it can be reflected in your pages.
General Styling
Over here, you can include a hexadecimal (HEX) value to be used as the Primary Color. Add the HEX, and click Generate CSS after that.
Once you have made your changes, click the "Copy code snippet" button at the bottom to copy the code and paste it into the Custom Styling box.
Reinforcing that the primary color will be applied across some places within your booking experience:
- Personal pages' Schedule button
- Calendar screen Button
- Form screen (Confirm Meeting button)
- Suggested times colors in e-mails
-
Action Color (Chat)
Calendar Screen
In the first box, you can edit the color of the headers: "What day works for you?" and "What time works?” text in your booking links. Use the "Copy code snippet" button to copy to your Custom Styling section and update the #HEX placeholder.
In the second box, you can copy the CSS to the Custom Styling box to hide both headers in your booking links: "What day works for you?" and "What time works?”
Form Screen
Over here, you can change the color of your Form Screen's "Confirm Meeting" button. Use the "Copy code snippet" button to copy to your Custom Styling section and update the #HEX placeholder.
Confirmation Screen
In the first box, you can customize your Confirmation Page and Cancel Button colors. The same color is recommended for all #HEX placeholders.
Within the second box, you can copy the CSS to the Custom Styling box to hide the Reschedule button in your confirmation screen.