Skip to content
Submit a ticket Customer portal
  • There are no suggestions because the search field is empty.

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!