My Profile
Sign Out
Tickets
Knowledge Base
Login
Articles in this section
Category / Section
  2. Working with Live Chat
  3. Live Chat Widget

How to Customize the Live Chat Widget to Reflect Your Brand

Updated:

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.

    Live_Chat_Configuration_Page.png

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.

    General_Tab_in_Live_Chat_Settings.png

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.

    Start_Chat_Configuration_in_Chat_Experience.png

    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”).

    Away_Experience_Configuration_in_Chat_Experience.png

    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.

    Widget_Appearance_in_Live_Chat_Widget_Customization.png

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.

    Launchers_Appearance_in_Live_Chat_Widget_Customization.png

C) Advanced Customization

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

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

    Advanced_Customization_settings_in_Live_Chat_Widget_Customization.png

Before using custom code, validate accessibility and performance before publishing.

D) Feature Settings

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.

    Code_Snippets_Option_in_the_Installation_Tab_section_of_a_Live_Chat_Widget.png

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");

NPM_Package_Option_in_the_Installation_Tab_section_of_a_Live_Chat_Widget.png

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
Attachments
Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied