Customize your BoldDesk Live Chat widget to match your brand quickly and clearly. Use Chat Experience for welcome/away messages and pre‑chat flow, Widget Customization for colors, logo/avatar, and launcher style/position, and Installation to embed the widget via script/iframe or the web SDK. The result is a consistent, on‑brand chat that feels native to your site.

Follow the steps below to customize your Live Chat widget in BoldDesk:

Open the Widget Editor

1. Go to Admin → Chat → Live Chat.

2. From the Active tab, click the more options icon (three vertical dots) for your widget and select Edit.

   

General Tab — Core Behavior & AI Settings

The General tab lets you set the theme, file uploads, reopen interval, knowledge base, and AI agent settings.

Key fields shown in General tab:

• Chatbot Name / Avatar: The display name/icon your users will see.

• Brand: Confirms the brand context for this widget.

• Theme: Choose Light or Dark to match your site.

• File Upload Option & Allowed File Types: Control what users can upload.

• Allow users to reopen a closed conversation & Reopen Interval: Manage post‑closure engagement.

• Enable Emoji Picker / Enable Knowledge Base: Optional UX enhancements.

• Enable AI Agent: Choose whether the AI agent responds and how:

  • Assign to AI Agent (Direct) or Assign to AI Agent (Workflow).

• Action Buttons for AI Response: Configure quick actions (e.g., Helpful / Transfer to Agent).

• Trusted Domains / Enable Privacy Policy Notice: Compliance and trust controls. Learn more on How to Add Trusted Domains to Your Live Chat Widget.

• Powered by BoldDesk Branding: In the chat widget General settings, toggle Powered by BoldDesk branding to show or hide the label. Learn more on How to remove the “Powered by BoldDesk” branding.

  

Step 1: Customize the Chat Experience Tab

A) Start Chat Configuration

• Welcome Message: Write a short, friendly greeting that sets expectations.

  • Example: “Welcome to FoodHaven Support. How can we help today?”

• Enable Pre‑Chat Form: Collect user details before chat starts (recommended for triage).

• Suggestion: Offer quick‑reply suggestions to speed up resolution.

• Sticky Button: Keep the launcher visible as users scroll.

  

  Learn more on Customizing the Start Chat Experience in the Live Chat Widget.

B) Away Experience Configuration

• Business Hours: Select the appropriate schedule.

• Banner Description: A bold line that signals current status.

  • Example: “Offline”

• Away Message: Empathetic guidance for next steps.

  • Example: “We’re currently away. Please leave a message and we’ll reply ASAP.”

• Form Support: Choose the form users complete when you’re offline (e.g., “Support Form”).

  

  Learn more on Customize the Away Experience for Your Live Chat Widget.

Step 2: Customize the Widget Customization Tab

A) Widget Appearance

• Banner Heading: Short headline in the chat window.

  • Example: “Welcome to FoodHaven Support”

• Banner Description: Secondary line under the heading.

  • Example: “Our team is here to help.”

• Widget Color

  • Brand Color: Set your primary brand color (buttons, highlights).
  • Action Color: Set the accent for actions (e.g., send button).

• Logo and Avatar

  • Show Logo: Display your brand logo in the widget.
  • Show Online Agents: Decide whether to show agent presence.
  

B) Launcher Appearance

• Button Type: Choose Text button, Image with text, or Image button.

• Custom Launcher Image: Upload a brand‑consistent icon (PNG/SVG; follow size guidance in the UI).

• Button Text: Clear call to action.

  • Example: “Need Assistance?”

• Button Position: Bottom Left or Bottom Right.

• Offset Bottom / Offset Right (px): Fine‑tune exact placement to avoid overlapping other elements.

  

C) Advanced Customization

• Custom CSS: Override widget styles to match typography or spacing.

• Custom JS: Add small UX enhancements (use cautiously).

  

D) Feature Settings

• Enable Notification Sound: Audible alerts for new messages.

• Enable Transcript Emailing: Email conversation transcript to users.

• Enable End Chat: Let users explicitly end a session.

  

  Learn more on Customizing Feature Settings in Your Live Chat Widget.

Step 3: Install the Widget (Embed Options)

A) Code Snippets

• Embeddable Code (Script Tag): Paste the provided <script> into your website’s HTML where you want the widget to load.

• Iframe Code: Use this if you must isolate the widget in an iframe.

  

B) NPM Package (Web SDK)

1. Install the SDK:

   npm install @bolddesk/live-chat-web-sdk
   

2. Import and initialize:

   import { LiveChat } from '@bolddesk/live-chat-web-sdk';
   LiveChat.configure("YOUR_WIDGET_ID", "https://yourbrand.bolddesk.com");
   

Learn more on BoldDesk Live Chat Web SDK: Integrate & Control Chat Widget.

Frequently Asked Questions (FAQs)

1) How do I change the welcome message that appears when the chat opens?

• Go to Admin → Chat → Live Chat → (⋮) Edit → Chat Experience.
• Under Start Chat Configuration, enter your Welcome Message.
• (Optional) Click Add Another Welcome Message for variations.
• Click Update to save.

2) How do I set what users see when we’re offline (business hours, banner, and away message)?

• Go to Chat Experience → Away Experience Configuration.
• Select Business Hours (the schedule you want).
• Set Banner Description (e.g., “Offline”).
• Write the Away Message (e.g., “Leave a message and we’ll reply ASAP”).
• Choose a Form Support option to collect user details.
• Click Update.

3) Can I collect user details before chat starts (name, email) with a pre‑chat form?

• Go to Chat Experience → Start Chat Configuration.
• Toggle Enable Pre‑Chat Form ON.
• Configure the form fields as prompted (e.g., name, email).
• Click Update.

4) Where do I change the chat widget’s colors to match our brand?

• Go to Widget Customization → Widget Appearance.
• Set Brand Color (primary accent) and Action Color (buttons/CTA).
• (Optional) Edit Banner Heading and Banner Description to match tone.
• Click Update.

5) How do I show our company logo (and whether agents are online) inside the chat?

• Go to Widget Customization → Logo and Avatar.
• Toggle Show Logo ON to display your brand mark.
• Toggle Show Online Agents ON if you want agent presence shown.
• Click Update.

6) Can I add my own CSS or JavaScript to fine‑tune a chat widget’s look and behavior?

• Go to Widget Customization → Advanced Customization.
• Click Add Custom CSS or Add Custom JS and paste your code.
• Keep changes lightweight; test on desktop and mobile.
• Click Update.

Related Articles

• BoldDesk Live Chat Widget Setup Guide.
• Embedding the BoldDesk Live Chat Widget in the Customer Portal