Skip to main content

Workspace Settings Branding

Jorge Ferreira Filho
  • Updated

warning-icon.png Admin or Workspace Manager Rights Required

This feature is available for Admins and Workspace Managers. 

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!

Note that these Branding settings differ from the ones available to Admins in the Admin Center. If you are looking for the one in the Admin Center, navigate to this article.

Table of Contents

Accessing and Initial Steps

Admins and Workspace Managers can access the Branding page on the workspace's left-hand side menu under the Settings section:

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 on this page, 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.

Why am I seeing locked settings?

The Branding feature is also available in the Admin Center and is accessible only to Chili Piper Admins. There, Admins can lock the settings they use for the whole org, meaning you can't edit them.

If you notice an information banner like the one below, that's the case:

Preview Screen

At the right, you will notice a preview screen that lets you 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.

Follow Brand Styling set by the org

Remember the Branding style possibly applied by an Admin in the Admin Center? If they have not locked the styling for the org and you still want to use the same one they created there, you can toggle this setting on, and the styling applied in the Admin Center will be applied to the current workspace.

This setting will be disabled if your Chili Piper Admin(s) locked the styling from an Admin Center perspective.

Remember to publish your changes once done!

Company Logo

Here, you can define the logo displayed on all Scheduling Pages for all users in the org. Users cannot change it.

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:

Remember 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:

  • Personal pages' Schedule button
  • 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.

Remember 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.

Remember 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 play around. We suggest using this option if you have some knowledge of CSS.

Just so you know, any updates made from the Custom CSS tab will overwrite those made in the General tab. If you notice your changes in the General tab are not reflected, 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