Widget Styling & Customization

Control the widget appearance via init options or the Dashboard UI.

Size Presets#

Choose from three built-in size presets via chatSize and launcherSize:

chatSize	Chat Window	Launcher
compact	340 x 460 px	48 px
default	380 x 520 px	60 px
large	420 x 600 px	68 px

launcherSize accepts small, default, or large — controls the floating button independently.

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  chatSize: 'large',        // wider & taller chat window
  launcherSize: 'small'     // smaller floating button
});

Positioning#

Fine-tune the widget position with offsetBottom and offsetSide (in pixels). Combined with position (bottom-right or bottom-left), this gives full control over placement.

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  position: 'bottom-left',
  offsetBottom: 40,          // 40px from bottom (default: 20)
  offsetSide: 30             // 30px from left edge (default: 20)
});

Border Radius & Z-Index#

borderRadius controls the chat window corner rounding (default: 12px).zIndex sets the stacking order (default: 999999).

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  borderRadius: 20,    // rounder corners
  zIndex: 100000       // lower z-index to avoid conflicts
});

Custom CSS#

For advanced styling beyond built-in options, pass a customCSS string. It is injected into the widget's Shadow DOM — it can override any widget style but cannot affect your page.

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  customCSS: `
    .respondoai-chat {
      border-radius: 24px;
      box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    }
    .respondoai-launcher {
      box-shadow: none;
      border: 2px solid #e5e7eb;
    }
    .respondoai-header {
      backdrop-filter: blur(10px);
    }
    .respondoai-message.assistant {
      background: #f0f9ff;
    }
    /* Style the CTA button inside announcement cards */
    .respondoai-announcement-cta-button {
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    /* Lay out announcement CTA buttons in a row instead of the default stack */
    .respondoai-announcement-ctas {
      flex-direction: row;
    }
  `
});

Custom CSS runs inside Shadow DOM — it is completely isolated from your page styles. You can safely override any widget class without side effects.

Available CSS classes:

Class	Element
.respondoai-widget	Root container (position, z-index)
.respondoai-launcher	Floating button
.respondoai-chat	Chat window
.respondoai-header	Chat header bar
.respondoai-messages	Message list container
.respondoai-message.user	User message bubble
.respondoai-message.assistant	Bot message bubble
.respondoai-input-area	Input bar container
.respondoai-input	Text input field
.respondoai-send	Send button
.respondoai-suggestion-btn	Quick question buttons
.respondoai-announcement-cta-button	CTA button inside an announcement card
.respondoai-announcement-ctas	Wrapper around the CTA buttons in an announcement card (target layout)

You can also configure all styling options from the Dashboard — go to Channels → Widget → Appearance. Changes made in the dashboard are served to the widget automatically via the config API.