How to Customize Your AI Sales Agent Design

Introduction

Your AI Sales Agent should feel like a natural part of your store — not a generic chatbot bolted on. The Design tab lets you style every visible part of the agent so it matches your brand, from the floating launcher button to the colors of each message bubble.

In this guide you'll learn how to customize:

The agent trigger (the button visitors click to open the chat)
The chat card (the main window)
The message bubbles for both the agent and the user
The answer options visitors tap during a quiz
The Quizell watermark (removable on Plus and above)

A live preview sits beside the settings the whole time, so you can see changes as you make them.

Step-by-step guide

1. Open the Design tab

In the AI Agent Editor, click the Design tab at the top

The settings appear on the left; the preview panel is on the right

To see your changes in action, click the agent button in the preview panel ("Click on the agent button to see the preview").

2. Style the agent trigger

The Agent Trigger is the floating button that opens the chat on your site.

Background color — set with a HEX code or the color picker
Size — the button's size in pixels (e.g., 55)
Position — where it sits on screen (e.g., Bottom Left or Bottom Right)

3. Customize the chat card

The Card is the main chat window. Adjust:

Background color — the card's main fill
Header color — the top bar of the chat
Border color — the card's outline
Headline color and Subheadline color — the title and supporting text
Card radius — how rounded the corners are (in pixels)

4. Style the message bubbles

You can style the agent's messages and the visitor's messages separately, so the conversation is easy to follow.

AI Agent message

Background color, Text color, Message bubble radius, and Font size

User Message

Background color, Text color, Message bubble radius, and Font size

5. Set the answer option styling

The Options are the tappable answer tabs visitors see when the agent runs a quiz. Customize:

Default background color, Default border color, and Default text color — how an option looks before it's selected
Selected background color, Selected border color, and Selected text color — how an option looks once the visitor chooses it

6. Style the message field

The Message Field is the input box at the bottom of the chat where visitors type. Customize:

Background color, Border color, and Text color — the input box and the text typed into it
Placeholder Text color — the prompt text shown before the visitor types (e.g., "Write a message…")
Send button color and Send button icon color — the button that sends a message
Message field radius — how rounded the input box corners are (in pixels)

7. Remove the Quizell watermark (Plus and above)

By default, the live widget shows a small "Powered by Quizell" badge. On the Plus plan and above, you can remove it for a fully white-labeled experience.

Toggle off the watermark / branding option in the Design settings
Save your changes

If you're on a lower plan, you'll need to upgrade to Plus or above to hide the badge.

8. Preview and save

Click the agent button in the preview panel to test your styling
When you're happy, click Save Changes

That's it!

Your AI Sales Agent now looks like part of your brand. 🎉

What happens next

With design done, you're ready to:

Test the agent in preview mode (free — no engagement credits used)
Connect it to your website to go live

Best practices

Match your brand palette. Pull your exact HEX codes from your brand kit rather than eyeballing colors.
Prioritize contrast. Make sure message text stands out clearly against its bubble background, and the trigger button against your site — readability beats aesthetics.
Place the trigger carefully. Test the position on both desktop and mobile so it doesn't cover your cart, navigation, or other key elements.
Distinguish agent vs. user bubbles. Give them different background colors so visitors can follow the conversation at a glance.
Preview before you publish. Always open the preview and run through a few messages before saving.

Important notes

Removing the watermark requires the Plus plan or above. On lower plans the "Powered by Quizell" badge remains on the live widget.
Design changes appear instantly in the dashboard and preview, but the live widget has a 5-minute cache — allow up to 5 minutes for updates to show on your site.
Always click Save Changes before leaving the Design tab — unsaved edits are lost.
Colors accept HEX codes or the built-in color picker.

Troubleshooting

My design changes aren't showing on my live site

Updates are instant in the dashboard and preview, but the live widget caches for 5 minutes. Wait a few minutes and refresh.
Confirm you clicked Save Changes.

The watermark is still showing

Watermark removal is available on Plus and above — check your current plan.
Make sure you toggled the option off and saved, then allow for the 5-minute live cache.

The preview is blank

Click the agent button inside the preview panel to open the chat and see your styling.

The trigger button overlaps something on my site

Change its Position (e.g., from Bottom Left to Bottom Right) and re-check on both desktop and mobile.

What's next?

These steps take your styled agent all the way to live on your store.

Updated on: 03/06/2026

Was this article helpful?

Thank you!