Skip to main content
Make your chatbot feel like a natural part of your website. Customize colors, position, branding, and messaging to match your brand perfectly.

​
Accessing Design Settings

1

Open Dashboard

Go to bubblav.com/dashboard
2

Select Website

Click on the website you want to customize
3

Open Design

Click Design in the sidebar menu
Widget Design Overview

​
Design Options

The design settings are organized into collapsible sections to help you focus on specific parts of the widget.

​
🌐 Website Color Analyzer

Automatically generate a color palette that matches your website:
  1. Enter your website URL.
  2. Click Analyze.
  3. BubblaV will detect your brand colors and apply a matching theme.

​
🎨 Color Palette Presets

Choose from professionally designed color themes if you want a quick start.

​
Basic Settings

Configuration for the widget’s general behavior and appearance.

​
General

  • Show Expand Button: Allow users to expand the chat widget to a larger size.
  • Show “Powered by” branding: Toggle the BubblaV branding (available on Pro+ plans).

​
Dimensions

Customize the size of the widget window:
  • Widget Width: Default is 400px.
  • Widget Height: Default is 650px.

​
Bubble Appearance

Customize the floating chat button:
  • Bubble Color: The background color of the chat button.
  • Bubble Icon Color: The color of the icon inside the button.

​
Positioning

Choose where the chat button appears on Desktop and Mobile:
  • Bottom Right: Standard convention.
  • Bottom Left: useful if you have other widgets on the right.

​
Screen Configuration

The widget is divided into three main screens, each with its own customization options.

​
🏠 Home Screen

The first screen users see when they open the widget.
  • Welcome Message: The greeting text displayed at the top.
  • Background Style: Solid color or gradient.
  • Chat Suggestions: Quick-start questions to guide users.

​
💬 List Screen (Messages)

The screen displaying the history of conversations.
  • Customize the title, background colors, and unread indicator settings.

​
💭 Chat Screen

The active conversation interface.
  • Bot Identity: Set the Bot Name and upload a custom Avatar.
  • Colors: Customize message bubbles (User vs Bot), text colors, and the input area.
  • Placeholder Text: The text shown in the message input field before typing.

​
Advanced Settings

​
Exclude URLs

Prevent the widget from appearing on specific pages:
  1. Expand the Advanced Settings section.
  2. Enter the URLs where you want to hide the widget (one per line).
  3. You can use specific paths like /checkout or full URLs.

​
Product Card Layout

Control how product cards are displayed in chat responses: Vertical Layout (default):
  • Product cards stack vertically.
  • Each card takes full width.
  • Best for detailed product information.
Horizontal Layout:
  • Product cards display side-by-side (carousel).
  • Users can scroll horizontally to see more products.
  • Compact view, good for showing multiple options.

​
Live Preview

The design page includes a real-time preview:
  • Desktop view: See how it looks on larger screens.
  • Mobile view: Toggle to see mobile responsiveness.
  • Interactive: You can type and test the chat flow (powered by your knowledge base).
Live Chat Interface

​
Saving Changes

Changes are not live until you save!
1

Review in Preview

Check your changes in the live preview.
2

Save

Click Save at the bottom of the form.
3

Verify Live

Visit your website to confirm the updates (usually takes 1-2 minutes).

​
Design Best Practices

Use the Website Color Analyzer or manually set your primary brand color for the Bubble and User Messages to create a seamless experience.
Ensure high contrast between text and background colors. Dark text on light backgrounds is generally the most readable.
If you enable the Expand Button, check that the larger widget size doesn’t cover important content on your site.
Customize the Welcome Message on the Home Screen to sound friendly and helpful.

​
Troubleshooting

  • Ensure you clicked Save.
  • Clear your browser cache.
  • Wait a few minutes for the changes to propagate.
  • Try changing the Positioning (Left vs Right).
  • Use Advanced Settings > Exclude URLs if it shouldn’t appear on certain pages.

​
Next Steps

Test Your Bot

Preview your chatbot in action

Installation

Add the widget to your website