BubblaV LogoBubblaV
Documentation
Documentation

Widget Design Customization

Customize every aspect of your chatbot's appearance to perfectly match your brand. From colors and positioning to text and sizing - make it truly yours with our comprehensive design system.

Complete Design Control

BubblaV's widget configuration system allows you to customize every visual element of your chatbot. All changes are stored in the widget_configurations table and automatically applied to your live widget.

Responsive Design

Different positioning for desktop and mobile viewports with automatic detection

Live Preview

Real-time preview mode shows changes instantly before saving to database

Automatic Deployment

Widget config cache invalidation via /api/revalidate/widget-config/[id]

Design Customization Dashboard Overview

Available Configuration Options

Color & Branding

title_color#ffffff
title_bg_color#3b82f6
chatbox_bg_color#ffffff
bot_message_bg_color#f3f4f6
user_message_bg_color#3b82f6
bubble_color#3b82f6
send_button_color#3b82f6

Text & Content

titleChat with us
welcome_textHi! How can I help you?
greeting_messageHi! How can I help you?
textbox_placeholderAsk me anything...
show_greeting_messagefalse

Position & Size

desktop_positionbottom-right
mobile_positionbottom-right
widget_width380px
widget_height500px

Responsive Behavior: Mobile devices automatically use mobile_position settings and adapt widget dimensions for optimal UX.

Advanced Options

powered_by_visibletrue
exclude_urls[]

Plan Restrictions: Free plan users cannot hide powered_by_visible (forced to true in API). Paid plans can customize freely.

How Customization Works

Configuration Storage

  • • Database Table: widget_configurations
  • • Upsert Operation: Conflict resolution on website_id
  • • Default Values: Fallback config when no customization exists
  • • Cache Invalidation: Automatic revalidation after changes

Widget Application

  • • API Endpoint: GET /api/websites/[id]/widget-config
  • • Server Config: Passed via data-server-config attribute
  • • Shadow DOM: Style isolation prevents conflicts
  • • CSS Variables: Dynamic color application

Design Best Practices

Color Contrast

Ensure sufficient contrast between text and background colors for accessibility. Use tools like WebAIM's contrast checker.

Brand Consistency

Match your chatbot colors to your website's existing color scheme and brand guidelines for a cohesive experience.

Mobile Optimization

Test your design on mobile devices. Consider using different positioning for mobile vs desktop for optimal UX.

Detailed Customization Guides

Explore specific aspects of widget customization with step-by-step guides.

Colors & Branding

Complete guide to color customization and brand integration

Position & Size

Control widget placement and dimensions across devices

Messages & Text

Customize all text content and messaging behavior