--- title: Styling/designing and configuring your Ebbot chat widget description: Master your Ebbot chat widget design. Learn to customize branding, set up a welcoming starting page, use custom CSS, and manage multi-site themes. --- [Skip to content](https://customer.ebbot.ai/knowledge/styling-and-configuring-your-ebbot-chat-widget#main-content) [Submit a ticket](https://customer.ebbot.ai/knowledge/kb-tickets/new?hsLang=en) [Customer portal](https://customer.ebbot.ai/support?hsLang=en) [![](https://customer.ebbot.ai/hs-fs/hubfs/logo-ebbot-darker-green-rgb-Sep-30-2025-07-46-45-0435-AM-2.png?width=1032&height=309&name=logo-ebbot-darker-green-rgb-Sep-30-2025-07-46-45-0435-AM-2.png)](https://customer.ebbot.ai/?hsLang=en) Open main navigation Close main navigation - [Submit a ticket](https://customer.ebbot.ai/knowledge/kb-tickets/new) - [Customer portal](https://customer.ebbot.ai/support) How can we help you? - There are no suggestions because the search field is empty. 1. [Ebbot Knowledge Base](https://customer.ebbot.ai/knowledge?hsLang=en) 2. [Chat widget](https://customer.ebbot.ai/knowledge/chat-widget?hsLang=en) # Styling/designing and configuring your Ebbot chat widget ## Transform your chat widget from a basic tool into a fully branded, interactive extension of your website. ### 🚀 Getting Started All the magic happens in one place. To access your design tools, log in to Ebbot and use the left-hand sidebar: 1. Click on **Chat widget**. 2. Select **Styling**. --- ### 🎨 1. Define your Visual Branding First, let's make sure the widget looks like it belongs to your company. - **Logo & Avatar:** Choose **Default** or upload a **Custom** image. Use the **Show/Hide** toggles to control their visibility. You can also give your bot a name in the **Avatar title** field. - **Chat widget icon:** Select a **Default** icon or upload a **Custom** one. You can also set the **Chat widget icon background color** here. - **Widget header:** Set the **Background color** for the top bar and choose a **Text & Icon color** theme (**Dark**, **Light**, or **Custom**). - **Shapes & Corners:** Use the **Widget border radius** buttons to choose a **Sharp**, **Smooth**, or **Custom** corner style for the entire widget window. ### ✍️ 2. Set your Typography Consistency is key to a professional look. - **Titles & Text:** Choose a **Custom** font for your headers. Check the box **Use the same font for text** to keep the typography uniform across the whole widget. - **Starting Page:** You can set a specific font just for the first screen a user sees. ### 🔘 3. Design Buttons & Interaction How users click and interact with your bot should be intuitive and clear. - **Standard Buttons:** Set the **Background color**, **Text color**, and **Border Radius** (**Sharp**, **Smooth**, or **Round**). - **Visual Confirmation:** In the **Clicked button** section, check **Display as message**. This ensures that when a user clicks a button, the text appears in the chat flow so they have a visual record of their choice. - **Send Button:** Customize the color of the "Send" arrow and update the **Input placeholder text** (e.g., "Ask us anything..."). - **Blob CTA:** To catch a visitor's eye, type a message (like "We're online!") into the **Blob CTA** field and click **Add**. This creates a persistent text bubble next to the chat icon on your site. ### 🏠 4. Build the "Starting Page" The Starting Page is the "home screen" of your widget—the perfect place to greet users before a conversation begins. - **Enable the page:** Ensure the **Enable starting page** checkbox is checked. - **Welcome Message:** Use the **Warning Text** for a header and the main **Text** box for your introduction. - **Link Cards:** These are shortcuts to specific URLs or bot scenarios. - Upload an **Icon**, add a **Title**, and set a **URL** or **Scenario**. - Use the **Time** fields to schedule cards for specific dates (perfect for temporary promotions!). - You can use the checkbox to show the card only **when your agents are online**, for a smooth transition to the live chat - **Footer Choice:** Choose **Input field** if you want users to start by typing, or **Button** if you want them to click to begin. ### 💬 5. Perfect the Chat Experience Make the actual back-and-forth conversation easy on the eyes. - **Chat Bubbles:** Set distinct colours for the **User chat bubble** and the **Agent chat bubble** so the conversation is easy to follow. - **Typing Indicators:** Change the colour of the "typing" dots under the **Bot message animation dots**. - **Quick Replies:** Customise the **Background**, **Border**, and **Text color** of the shortcut chips that appear during a chat. ### ⚠️ 6. Manage Alerts & Safety Keep users in the loop and your bot secure. - **System Alerts:** Toggle **Alert settings** to **On** to show a banner about technical issues or high volume. You can choose to show this on the **Start page**, in the **Conversation**, or both. You can also set a specific time period for this, if you have an outage or a promotion, for example. - **Spam Warning:** Customise the Background color and Warning Text that appear if the system detects automated or repetitive messaging. ### 🛠️ 7. Advanced: Themes & Custom CSS If you run multiple websites or need a highly specific design, use these professional tools. - **Theme Management:** Create multiple "Themes" by clicking the **plus (+)** icon. You can set one as your **Default theme**. - **Theme Matching:** Tell Ebbot where to show specific themes using URL rules: - **contains::** (Matches any URL with this text). - **starts::** (Matches a specific domain or section). - **ends::** (Matches specific page types like `/checkout`). - **Custom CSS:** Click **Create new** under **Advanced Customization** to inject your own CSS code for unique animations or styles not found in the standard menus. 💡 **Pro-Tip** If you have a "Premium" or "Logged In" section of your site, use **User variables matching** under Theme Management to show those users a more exclusive-looking chat theme! - [General](https://customer.ebbot.ai/knowledge/general?hsLang=en) - [Live chat](https://customer.ebbot.ai/knowledge/live-chat?hsLang=en) - [Integrations](https://customer.ebbot.ai/knowledge/integrations?hsLang=en) - [Settings](https://customer.ebbot.ai/knowledge/settings?hsLang=en) - [Ebbot GPT](https://customer.ebbot.ai/knowledge/ebbot-gpt?hsLang=en) - [Dashboards](https://customer.ebbot.ai/knowledge/dashboards?hsLang=en) - [Administration](https://customer.ebbot.ai/knowledge/administration?hsLang=en) - [Scenarios](https://customer.ebbot.ai/knowledge/scenarios?hsLang=en#main-content) - [Builder](https://customer.ebbot.ai/knowledge/scenarios?hsLang=en#builder) - [Training center](https://customer.ebbot.ai/knowledge/scenarios?hsLang=en#training-center) - [Chat history](https://customer.ebbot.ai/knowledge/chat-history?hsLang=en) - [TOPdesk](https://customer.ebbot.ai/knowledge/topdesk?hsLang=en) - [Chat widget](https://customer.ebbot.ai/knowledge/chat-widget?hsLang=en#main-content) - [Styling](https://customer.ebbot.ai/knowledge/chat-widget?hsLang=en#styling) [![](https://customer.ebbot.ai/hs-fs/hubfs/logo-ebbot-darker-green-rgb-Sep-30-2025-07-46-45-0435-AM-2.png?width=1032&height=309&name=logo-ebbot-darker-green-rgb-Sep-30-2025-07-46-45-0435-AM-2.png)](http://ebbot.com) Copyright © 2025, Hello Ebbot AB