Customize Your Chatbot Widget UI

Learn how to customize colors, texts, icons, and visibility of your chatbot widget in Botuj.

Customize Your Chatbot Widget UI

Botuj allows you to personalize the appearance and behavior of your chatbot widget to match your brand and user expectations. Here's a breakdown of available customization options.

🎨 Colors

You can configure the following color options:

  • Main color: Applied to user messages, icons inside the chat window, and the avatar letters.
  • Bubble button color: Background color of the floating chat button that opens the chat window.
  • Bubble icon color: Color of the default icon inside the floating chat button.

⚙️ Active Section

  • Hide widget: Set this option to false if you want to temporarily turn off the widget without deleting it.

📝 Texts

  • Title: The text displayed in the header of the chat window.
  • Greeting message: This message is shown at the beginning of every conversation.

To display quick reply options below the greeting message, use <option> tags. For example:

Hi! How can I help you?
<option>Shipping</option>
<option>Returns</option>

👤 Avatar & Icons

  • Avatar letters: Letters shown in the top-left corner of the header, using the main color.
  • Chat icon: You can override the default bubble icon by uploading your own. The recommended format is 40px × 40px for best visual quality.