Style your chatbot

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.

Make it open by default

When you click the Open by default toggle, the chat window will appear 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.

 

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.

1. Click the color swatch for the field you want to change. The color picker will open. 
2. Select a new color or paste a HEX value in the text field. 
   • (Optional) Use RGB or HSL values.

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

 

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” label toggle 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.