Workspace Controls' Branding & Language

Who can use this feature?

Available on All Products or Routing & Scheduling

Available to Admins or 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 Command Center. If you are looking for the one in the Command Center, navigate to this article.

Accessing and Initial Steps

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

When you open the page, you will land on the General tab, where you can use features to further enhance your booking links.

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 Command Center and is accessible only to Chili Piper Admins. There, Admins can lock the settings used for the whole org, so you cannot edit them.

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

Preview Screen

On the right, you will notice a preview screen that lets you see the changes you are working with on the fly.

Navigate in the drop-down to move between the Calendar, Confirmation, Guest Form, Router Link Form, Contact Options, Calling Rep, Rep unavailable, Call Succeeded, or Chat (depending on your products), or use the "Preview" button in each section to automatically move to each.

Follow brand styling set by the Organization admin

Remember the Branding style an admin may have applied in the Command 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 Command Center will be applied to the current workspace.

This setting will be disabled if your Chili Piper Admin(s) locked the styling from a Command 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

Default Styling

The primary color that 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

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!

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 for that workspace whenever we identify one of the enabled languages.

What if these settings are locked?

If you notice the messaging below and all settings locked, it means one of your Admins locked the settings set in the Command Center to your whole org. They will need to unlock it, so you can edit in the workspace level.

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 with custom CSS instead of the options we covered so far! Go to the "Custom CSS" tab on the Branding page to experiment. We suggest using this option if you have some CSS knowledge.

Just so you know, any updates made from the Custom CSS tab will overwrite those made in the General tab. If you don't see your changes in the General tab, double-check whether you have any custom CSS.

Now, let's cover this page in more detail.

Custom Styling

Starting with the Custom Styling box on the right, paste the custom CSS you built here so it appears on your pages.

Note: Custom CSS cannot target specific Meeting Types. To apply styles per Meeting Type, isolate the Meeting Type in a separate workspace.

General Styling

Enter a hexadecimal (HEX) value to use 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.

Who can use this feature?

Table of Contents

Accessing and Initial Steps

Why am I seeing locked settings?

Preview Screen

Follow brand styling set by the Organization admin

Company Logo