> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.quizell.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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"). ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_27zmt4.png =1000x657) ### 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) ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_3ceed8.png =1000x657) ### 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) ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1jcplrw.png =1000x657) ### 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** ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_c5vlku.png =1000x657) ### 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 ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1sodnkd.png =1000x657) ### 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) ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_xpqwfw.png =1000x657) ### 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? * [How to Create Your First AI Sales Agent](https://help.quizell.com/en/article/how-to-create-your-first-ai-sales-agent-zgltjg/) * [How to Train Your AI Sales Agent](https://help.quizell.com/en/article/how-to-train-your-ai-sales-agent-1m69624/) * [How to Test Your AI Sales Agent (Preview Mode)](https://help.quizell.com/en/article/how-to-test-your-ai-sales-agent-preview-mode-1rvaspb/) * [How to Connect the Quizell AI Sales Agent to Your Website](https://help.quizell.com/en/article/how-to-add-the-quizell-ai-sales-agent-to-your-website-1prk0w6/) * [How the Quizell AI Sales Agent Works](https://help.quizell.com/en/article/how-the-quizell-ai-sales-agent-works-ceoavy/) * [Understanding AI Sales Agent Credits & Billing](https://help.quizell.com/en/article/understanding-ai-sales-agent-credits-billing-aawwbv/) These steps take your styled agent all the way to live on your store.