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

How to use custom CSS to enhance your chat widget

Use this library of CSS "cheat codes" to customize specific elements of your widget that go beyond the standard styling menu.

🚀 How to apply these styles

To use the code snippets below, you don't need to be a developer. Just follow these steps:

  1. Go to Chat widget > Styling.

  2. Scroll down to Advanced Customization.

  3. Click Create new.

  4. Copy the code from this guide and paste it into the editor.

🎨 Personalize your icons and buttons

Use these classes to give your interactive elements a unique look.

Customize the "Blob"

The Blob is your widget’s main entry icon. Use this code to adjust its border and shape.

  • Code tip: Replace the # with your brand's color code. .ebbot-blob .ebbot-blob-icon-wrapper { border: solid; border-width: 1px; border-color: #; align-items: center; border-radius: 30px; display: flex; height: 100%; justify-content: center; width: 100%; }

Stylize your buttons

This class allows you to set custom background colors and borders for every button in the bot.

  • Code tip: We recommend setting a border even if it's the same color as the background. This prevents the button from "jumping" or shifting position when a user hovers over it. .ebbot-button { background-color: #; color: #; border-style: solid; border-width: 1px 1px 1px 1px; border-color: #;}

📱 Optimize the mobile experience

Sometimes the chat window can feel a bit large on small screens. Use this class to "downscale" the bot on mobile devices, giving the content more breathing room.

  • What this does: It makes the chat window slightly smaller (95% width) and adds a small gap at the top and left. .ebbot-chat-box.ebbot-chat-box__opened-mobile { width: 95%; height: 97%; left:5%; top:3%; bottom: 0; right: 0; animation: mobile_open_animation .5s ease-in-out;}

💬 Refine the chat flow

Use these snippets to change how messages and suggestions behave during a live conversation.

Move the "Attention Seeker"

If your "Attention Seeker" (the text bubble that pops up before clicking) is blocking other elements, use this to move it higher up the page. .ebbot-attention-seeker__suggestions-list { margin-bottom: 3.5em;}

Hide unselected buttons

To keep the chat history looking clean, you can make the bot hide all other options once a user has made their choice.

  • Why use this: It prevents the user from clicking "old" buttons and keeps the focus on the current conversation. (Copy the long "Hide all buttons" code block from your documentation into the editor to enable this).

✨ Add "Hover" effects and link styles

Adding a subtle change when a user hovers their mouse over an item makes the bot feel more interactive and professional.

  • Start Button Hover: Change the color of the Start Page button when a mouse moves over it.

  • Link Card Scaling: Make your Link Cards grow slightly (1.1x) when hovered, making them feel "clickable."

  • URL Text Color: Change the color of any links shared within the chat to make them stand out.

🤖 Clean up AI & GPT answers

If you are using EbbotGPT, you might want a more streamlined look for your answers.

  • Hide Citations: Use the .ebbot-cite class to hide the small source numbers.

  • Hide "Show Sources" Button: Use this if you want the bot to provide answers without the option for the user to see the background documentation. .ebbot-chat-gpt-message__content__sources-btn { display: none; }

💡 Pro-Tip Whenever you see a # in the code snippets, it’s a placeholder for a color. You can use a "Hex Color Picker" online to find the exact code for your brand colors (e.g., #000000 for black or #FFFFFF for white).