The Live Chat Widget in BoldDesk can be visually customized directly from the Live Chat widget settings. Administrators can control branding, widget layout and launcher behavior, and optional advanced styling using built‑in BoldDesk UI controls—without impacting SLAs or workflows.

All changes are widget‑specific and managed entirely inside the Appearance tab of the Live Chat widget configuration screen.

Use Case Overview: Why Customize the Help Widget?

Here are common, high‑value use cases for customizing the Help Widget in BoldDesk:

• Brand‑Consistent Support Experience - Match the widget’s logo, colours, and theme to your corporate website or product UI.
• Multiple Brands or Products - Use different widgets for different brands, regions, or products—each with its own appearance.
• Conversion‑Focused Support - Position and style the widget to avoid UI conflicts while keeping it visible and accessible.
• Advanced UX Control - Apply custom CSS or JavaScript when embedding the widget into complex web applications.

How to Access Help Widget Appearance Settings

To customise the Live Chat Widget, follow this navigation path exactly as shown in the BoldDesk UI:

Navigation path:

Admin → Chat → Live Chat → Add/Edit Widget → Appearance

The top navigation tabs include:

• General
• Appearance
• Preference
• Business Hours
• Installation

Select Appearance to begin customisation.

Appearance Tab – Section Overview

Inside the Appearance tab, the left navigation panel contains three sections in this order:

• Branding & Colours
• Widget
• Advanced Customisation

Each section expands within the main panel on the right.

Branding & Colours

This section controls everything displayed at the top of the Live Chat Widget.

Available Settings

Show Logo

• Toggle to display the brand logo in the widget header
• Upload, change, or remove the logo
• Recommended size: 32 × 32 pixels
• Supported formats include common image types

Show Online Agents

• Displays avatars of currently online agents in the widget header

  
  
  

Header Title

• Main title text shown in the widget header

Header Description

• Secondary description text shown below the title

  
  
  

Widget Theme

• Light Theme
• Dark Theme

Brand Colour

• Primary colour applied across the widget

Action Colour

• Colour used for actionable elements such as buttons

  
  
  

Powered by BoldDesk Branding

To remove the Powered by BoldDesk from the chat widget, go to General Settings and enable the Remove the Powered by BoldDesk branding option. Learn more on How to remove the “Powered by BoldDesk” branding

Widget Customisation

This section controls where the widget appears and how users launch it.

Widget Position

Choose one of the following placement options:

• Bottom Left

• Bottom Right

  
  
  

Offset Configuration

Adjust widget spacing using pixel values:

• Offset Bottom (px) – Distance from the browser bottom edge

• Offset Right (px) – Distance from the browser right edge

  
  
  

These controls are commonly used to prevent overlap with footers or fixed web elements.

Launcher Appearance

The Launcher Appearance section controls how the Live Chat Widget is presented to end users before they open it. By configuring the launcher type and its visual elements, administrators can ensure the widget remains noticeable, brand‑aligned, and consistent with the overall website or application UI.

Located within Widget Customisation, the Launcher Appearance section defines the widget entry point.

Launcher Types

• Image with text button - Displays a launcher that combines an icon or image with supporting text. This option offers the highest visibility and clearly communicates the widget’s purpose to users.

• Text button - Displays only a text‑based launcher. This is ideal for minimal UI designs where a clean and lightweight appearance is preferred.

• Image button - Displays a compact launcher using only an image or icon. This option works best when space is limited or when you want a subtle, non‑intrusive widget presence.

  
  
  

Only one launcher type can be active per widget.

Launcher Configuration Options

Button Text

• Editable label for text‑based launchers

Custom Launcher Image

• Upload a custom launcher icon

• Recommended size: 28 × 28 pixels * Maximum file size: 2 MB

• Options to Change Image or Remove Image
  

  
  
  

Launcher settings apply only to the current widget.

Advanced Customisation

This section is intended for advanced administrators.

Available Options

• Custom CSS

  • Add custom styles to override widget appearance

• Custom JS

  • Add JavaScript to extend widget behaviour
  
  
  

Saving Changes
At the bottom‑right of every Appearance section:

• Click Update to apply changes
• Click Cancel to discard changes

Changes take effect immediately for the selected widget.

FAQs

1. Can each Live Chat widget have different branding?
   Yes. Each widget is configured independently.

2. Can I manually set header text colour?
   No. BoldDesk automatically adjusts the header text colour to ensure proper contrast based on the selected widget theme and brand colours. Manual control over header text colour is not available.

3. Can the widget be placed at the top of the page?
   No. BoldDesk supports only Bottom Left and Bottom Right positions with offset controls.

4. Does Advanced Customisation support validation?
   No. BoldDesk allows Custom CSS and Custom JS, but validation and troubleshooting are not provided.

Related Article

How to Set Up a Live Chat Widget in BoldDesk