BoldDesk Live Chat provides real‑time engagement across websites, customer portals, and mobile applications. This guide shows how to create a live chat widget, configure its settings and appearance, and install it using Code Snippets, NPM, or mobile SDKs (iOS & Android).

In this article, you will learn how to:

• Create a live chat widget in BoldDesk.
• Configure General, Appearance, Preference, and Business Hours.
• Embed the widget on your website, portal, or app.

Check out this video for more details

1) Create a Live Chat Widget

1. Go to Admin → Live Chat.

2. Select Add Widget.

   

You’ll configure the widget across these tabs, in order:

• General

• Appearance

• Preference

• Business Hours

  

2) Configure the Widget

A. General

The General tab contains four sub‑sections: Basic, Knowledge Base, Auto‑tag, and AI Agent.

Basic

• Widget Name: A friendly name to identify this widget (useful when you manage several widgets).

• Brand: Select the brand the widget belongs to.

• Chatbot Name / Avatar: Sets the bot’s display name and avatar used in system, workflow, and welcome messages.

  

Knowledge Base

Enable an embedded Knowledge Base and optionally limit which Categories appear in the widget.

Learn more on How to Display and Customize the Knowledge Base in the Live Chat Widget.

Auto‑tag

Automatically apply selected Tags to every conversation created via this widget.

AI Agent

Enable the AI Agent and choose how to route AI responses. Configure Action Buttons shown below AI answers.

Learn more on Enabling AI Agent in BoldDesk Live Chat for 24/7 Support.

B. Appearance

The Appearance tab controls branding, launcher UI, and custom code.

Branding & Colors

• Show Logo (upload brand logo)

• Show Online Agents (header)

• Header Title and Header Description

• Theme & Color: Light/Dark theme, Brand color, Action color

• Powered by BoldDesk Branding: Follow the note to remove branding

  

Widget Customization (Launcher & Position)

• Widget Position (Bottom Left/Right + pixel offsets)

• Launcher Appearance (image with text, text button, or image button)

• Button Text

• Custom Launcher Image (recommended size noted in UI)

  

Advanced Customization

Add Custom CSS or Custom JS for deeper control. Use with caution.

C. Preference

The Preference tab contains User Engagement, Security, Conversation Settings, Chat Input Options, and Notifications. Explore more on How to Configure Preference Tab in the Live Chat Widget.

User Engagement

• Welcome Message (add multiple messages if needed)

• Enable Pre‑Chat Form (add form fields, message, and confirmation)

• Suggestions (quick prompts)

• Sticky Button (display a quick action button in the chat widget)

  

Security

• Set Trusted Domains: Restrict where the widget can load.

• Configure Privacy Policy: Show a notice (supports formatting and links).

  

Conversation Settings

• Enable Multiple Conversation: Allow users to start and manage multiple chats in parallel without closing previous ones; identity (email or visitor ID) is kept across sessions. Explore more on Multiple Conversation Support.

• Enable Conversation Reopen: Allow users to reopen ended conversations (within the interval).

• Reopen Interval: Set the window (between 5 minutes and 7 days) during which a conversation can be reopened.

• Enable End Chat: Let users end their active chat on demand.

  

Chat Input Options

• Enable Emoji Picker: Allow users to insert emojis.

• Enable File Attachments: Allow file uploads in chat.

• Allowed File Types: Restrict permitted extensions (e.g., .png, .pdf). Leave empty to allow all except those blocked for security.

  

Notifications

• Enable Sound Alerts

• Enable Email Transcripts

  

D. Business Hours

Business Hours Setup

Define when your team is available (e.g., 24/7 or custom operational hours).

Away Configuration

Customize your away banner, away message, and the Form Support option for collecting user details while offline. Learn more on How to Customize the Away Configuration for the Live Chat Widget.

3) Add Widget to the Live Chat Page & Copy Installation Codes

Upon completion of the configuration, click Add to initiate the creation of the widget. A Code Snippets dialog box will be displayed containing:

• Embeddable Code (script)

• Iframe Code

  

• Copy the code at that moment or later from the Installation tab.

Click Cancel to close the dialog. This saves your Live Chat Widget.

4) Installation of the Widget

The Installation tab provides multiple ways to embed BoldDesk Live Chat in websites, portals, and mobile apps. Learn more on How to Install BoldDesk Live Chat on Websites, Portals, and Mobile Apps.

Configuring and Setting Up the AI Chatbot in BoldDesk

In BoldDesk, a chatbot is an AI-powered tool designed to simulate human-like conversations and assist users through the live chat widget. It helps automate customer interactions, answer common questions, and streamline support processes. Learn more on Get Started with BoldDesk AI Chatbots.

Embed Live Chat on Portals & Websites

Use this section to embed BoldDesk Live Chat in your external website or the BoldDesk Customer Portal.

Embedding Live Chat to Your External Website

Copy the generated iframe code and paste it into the desired location within your website’s HTML. This embeds the live chat widget directly into your site’s DOM, with no need for additional scripts or wrappers.

You can customise the width, height, and style attributes to match your website’s design and layout.

If you’d rather launch the live chat widget in a new browser tab or window instead of embedding it, use the direct URL provided in the Embed the iframe section.

Embedding Live Chat in the BoldDesk Customer Portal

You have the option to embed the live chat into your customer portal; learn more on How to Add BoldDesk Live Chat Widget to the Customer Portal.

Permission for Adding a Live Chat Widget

To add a new live chat widget, ensure that the Manage Settings permission is enabled.

Frequently Asked Questions (FAQs)

1. Can I create multiple live chat widgets in BoldDesk?
Yes. BoldDesk allows you to create and manage multiple live chat widgets under a single brand, enabling tailored support experiences for different customer segments.

2. How do I embed the live chat widget on my website?
You can embed the widget using either:

• Embeddable Code: A script snippet added to your website’s HTML.
• Iframe Code: An HTML frame that displays the widget within your site.

Both options are available under Admin > Chat > Live Chat > Installation > Code Snippets.

3. What is the maximum file upload size in live chat?
Visitors can upload files up to 10MB during a live chat session.

4. Can I customize the appearance of the chat widget?
Yes. You can adjust the theme (light/dark), logo, launcher button style, colours, and position under the Widget Customization section.

5. Why don’t I see the Live Chat Installation tab during the creation process of a Live Chat widget?

The Installation tab only appears after the widget is created. Once you click Add and close the dialog (Cancel), open the widget again and you’ll find Installation (Code Snippets, NPM Package, iOS SDK, Android SDK).

Related Articles

• How to Add BoldDesk Live Chat Widget to the Customer Portal
• How to Render a Widget in a Specific Language
• How to Activate, Deactivate or Delete a Live Chat Widget
• Customising the Start Chat Experience for Users in Your Live Chat Widget
• Enhancing the Live Chat Widget with Custom CSS and JavaScript
• Customise the Away Experience for Your Live Chat Widget
• How to Customise the Live Chat Widget to Reflect Your Brand