Style your chatbot

Beta

Zapier Chatbots is a beta product. It’s available for use, but still in active development and may change.

Your chatbot's appearance can match your brand or project. To style your chatbot:

1. From your Zapier Chatbots dashboard, click the name of the chatbot.
2. Click the Style tab.

This tab contains settings for different styling elements of the chatbot. Depending on your Chatbots plan, some sections may not be available.

Use an avatar with your chatbot

You can use an image as the avatar that appears on the chatbot conversation window. 

1. From the Style tab, on the Avatar field, click Choose image. A dialog box will appear.
2. Click Choose a local file.
3. Select a file from your computer.
4. Click Open.

To delete the current avatar click the Delete icon that appears beside the file name on the Avatar field.

Add a favicon

If you use your chatbot as a standalone page, you can select a favicon to appear on the browser tab or window. You can upload a new image or use the same as the avatar.

To upload a new image:

1. From the Style tab, on the Favicon field, click Choose image. A dialog box will appear.
2. Click Choose a local file.
3. Select a file from your computer.
4. Click Open. 

To use the avatar image instead, select the Use Avatar As Favicon checkbox.

Add an embed logo

The embedded logo appears at the top of the open chat window. 

To add the embed logo:

1. From the Style tab, on the Embed logo field, click Choose image. A dialog box will appear.
2. Click Choose a local file.
3. Select a file from your computer.
4. Click Open.

Customize the embedded icon

If you're on a paid Chatbots plan, you can also customize the pop up embed icon, which appears on the page where you embed your chatbot.

Add an icon

1. From the Style tab, on the Icon field, click Choose image. A dialog box will appear.
2. Click Choose a local file.
3. Select a file from your computer.
4. Click Open.

Choose the icon shape and size

In the Shape dropdown menu, select a shape for the icon:

• Circle
• Square
• Rounded square

In the Size dropdown menu, select the size of the icon, between 40 and 60 pixels.

Note

If you do not upload an icon, the Chatbots logo will appear as the embedded icon.

Make it open by default

When you click the Automatically open Chatbot pop-up when page loads (non-mobile only) toggle, the chat window will expand automatically when the user visits a page. If the toggle is in the off position, the chat window will appear once the user clicks the embed icon. This only affects chats on non-mobile screens.

Display your greeting along with the embed icon

If you click the Automatically display your greeting message after a few seconds toggle, your greeting will appear on a bubble beside the embed icon once the visitor has been on the page for a few seconds.

Change chatbot colors

If you're on a paid Chatbots plan, you can change the colors of your chatbot to match your business or product colors.

   Use pre-made themes    Use a brand color Select colors individually  

Use pre-made themes

You can select from a range of color themes, and your chatbot elements will match the selection.

• Once you're done, click Save changes.
   

Use a brand color

If you use the field Brand color, your chatbot will automatically tailor all elements to match that color. To see the hues and colors selected, click the Advanced color settings menu. 

Edit individual elements

If you select a brand color, you can still change individual element colors:

• Click the Advanced color settings menu. 
• Click the color swatch for the field you want to change. The color picker will open. 
• Select a new color or paste a HEX value in the text field. 
• Click Save changes.

(Optional) Use RGB or HSL values

• Click the up/down arrows beside the HEX text field to reveal RGB or HSL fields.
• Paste the values in the appropriate fields.
• Click Save changes.

 

Select colors individually

You can pick the colors for each chatbot element individually using the Advanced color settings menu. To change the colors:

• Click the Advanced color settings menu. 
• Click the color swatch for the field you want to change. The color picker will open. 
• Select a new color or paste a HEX value in the text field.
• Click Save changes. 

(Optional) Use RGB or HSL values

• Click the up/down arrows beside the HEX text field to reveal RGB or HSL fields.
• Paste the values in the appropriate fields.

Click Save changes.

Remove the "Built on Zapier" label

If you're on a paid plan, you can remove the "Built on Zapier" label that appears at the bottom of the conversation window.

1. From your Chatbots home, click the name of the chatbot.
2. In the Advanced tab, scroll down and click the Display the “Built on Zapier” labeltoggle to hide it.

Once you're happy with your chatbot styling, you can also add logic to your chatbot to collect information, start Zaps, and much more.

Provide feedback and get help

Submit a feature request, provide feedback on existing features, or get help from the Zapier Chatbots team.