Customization

Apply custom branding, themes, window styles, and CSS to the DealerAI webchat widget.

Beyond the standard portal settings, the DealerAI webchat widget exposes several advanced customization mechanisms for developers and designers who need precise control over the widget's look and feel.

Branding Colours

The widget's primary accent colour is set in the portal under Settings → Webchat → Primary Colour. This colour applies to:

The chat head button background
The send button
Action button borders and highlights
The typing indicator

The accent colour is delivered to the widget via the API configuration and applied at runtime, so no rebuild or redeployment is needed when you change it.

Theme Mode

The widget supports light and dark themes. Each theme defines a complete set of CSS custom properties (variables) that control every colour in the UI.

Variable	Light	Dark	Description
`--theme-webchat-welcome-background-color`	`#ffffff`	`#212121`	Welcome screen background
`--theme-webchat-welcome-message-background-color`	`#ececed`	`#2e2e2e`	Bot message bubble background
`--theme-webchat-welcome-message-color`	`#000000`	`#ffffff`	Bot message text colour
`--theme-chat-window-header-background-color`	`#ffffff`	`#212121`	Chat window header background
`--theme-dialog-background-color`	`#fff`	`#212121`	Modal dialog background
`--theme-buy-window-background-color`	`#ffffff`	`#212121`	Payment window background

The default theme can be configured under Settings → Webchat → Default Theme Mode. Individual customers can toggle their preferred theme using the theme button in the chat header — their choice is remembered via cookie.

Window Styles

Three visual window styles are available:

`speechbubble`

A compact, speech-bubble-style welcome panel that floats above the chat head. Well-suited for sites where you want a minimal footprint. The customer clicks the bubble or the chat head to open the full chat window.

`window`

A traditional rectangular chat window anchored to the bottom corner. This is the most familiar pattern and works well on most dealership websites.

`roundbox`

Similar to window but with rounded corners and a card-style shadow. Gives a more modern, softer feel.

Set the window style under Settings → Webchat → Window Style.

When the widget is used in expand mode, the window style is automatically forced to window regardless of the portal setting.

Custom Inner CSS

For fine-grained styling adjustments, you can inject custom CSS into the widget via the portal under Settings → Webchat → Custom CSS. This CSS is injected into the page <head> and can override widget-specific CSS custom properties.

Changing the accent colour dynamically

/* Override accent on a specific page */
dealerai-chat .theme-light {
  --theme-webchat-welcome-message-background-color: #f0f4ff;
  --theme-webchat-welcome-message-color: #1a1a2e;
}

Adjusting chat window dimensions

/* Taller chat window on desktop */
@media (min-width: 768px) {
  dealerai-chat .dealerai-chat-window {
    height: 680px;
    width: 400px;
  }
}

Hiding the send button label

dealerai-chat .webchat__send-button__text {
  display: none;
}

Custom CSS is injected at the page level and targets elements inside the dealerai-chat custom element. Use the dealerai-chat selector prefix to scope all rules correctly and avoid affecting the rest of your website.

Logo and Avatar

Dealership Logo

Upload a logo under Settings → Webchat → Logo. The logo appears in the chat window header alongside the widget title. Accepted formats: PNG, JPG, SVG. Recommended size: 120 × 40 px.

Bot Avatar

Upload a custom avatar image under Settings → Webchat → Avatar. The avatar is shown next to every bot message bubble inside the chat window. Recommended size: 48 × 48 px (square).

Bot Framework WebChat Style Overrides

The chat area (after the customer engages) is rendered by Microsoft Bot Framework WebChat. You can override its internal style variables by injecting CSS that targets Bot Framework's CSS classes within the dealerai-chat scope:

/* Make bot message bubbles use a custom font */
dealerai-chat .webchat__bubble__content {
  font-family: 'Your Brand Font', sans-serif;
}

/* Adjust suggested action button appearance */
dealerai-chat .webchat__suggested-actions__button {
  border-radius: 20px;
  font-size: 13px;
}

Bot Framework WebChat CSS class names are prefixed with webchat__. You can inspect the rendered HTML in DevTools to discover the exact class names for any element you want to style.

Disabling Audio

By default the widget can play audio notifications. To disable audio support, turn off Settings → Webchat → Enable Audio Support in the portal.

Customization

On this page