Skip to main content

Demand Conversion Platform's Admin Center Branding

Henrique Tein
  • Updated

warning-icon.png Admin Rights Required

This feature is available for Chili Piper Admins.

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

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 the Calendar, Form, and Confirmation screens, or use the "Preview" button in each section to automatically move to each.

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!

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.

 

 

Related articles