BoldDesk Live Chat Widget Setup Guide

BoldDesk Live Chat provides real-time engagement capabilities across websites, portals, and mobile applications. This guide walks through creating a live chat widget, configuring its experience and appearance, and installing it using Code Snippets, iOS SDK, Android SDK, or NPM.
In this article, you will learn how to:

• Create a Widget: Set up a live chat widget in BoldDesk.
• Embed the Widget: Add it to your website or help desk for real-time support.

How to Add a New Live Chat Widget

To add a live chat widget in BoldDesk, follow these steps:

1. Go to Admin > Chat > Live Chat and click the Add Widget button.
   

   
   
   

This opens a page with four sections where you can configure the widget to suit your needs.

• General
• Widget Customization
• Chat Experience
• Installation

General

You can personalise the live chat widget by adjusting its name, brand, and theme. Additional options include enabling automatic tagging, allowing file uploads, and setting notification sounds for incoming messages. You can also control whether users can respond to closed conversations, specify trusted domains, and choose to display or hide the Powered by BoldDesk branding.

Widget Name

The widget name refers to the custom name you assign to each live chat widget during setup. This name helps you identify and manage multiple widgets, especially if you’re supporting different brands.

Chat Bot Name / Avatar

The chat bot name refers to the term used to identify the bot. The avatar is the icon that represents the chat bot. You may now modify the chat bot name and avatar per live chat widget. Changing the chat bot name and avatar is optional; however, it is important for establishing the identity of your chat bot when interacting with your customers.

How to Change the Chat Bot Avatar

If you do not change the avatar, it takes the initials of the chat bot name. Follow the steps below to change the avatar.

1. Go to the live chat widget that you wish to modify.
2. In the general settings, select Chat Bot Name/Avatar.
3. To change the avatar, click on the edit icon.
   
   
   
   
   
4. In the pop-up window, click on browse to select an avatar image from your device, then click on upload. Please note that the image size must not exceed 1MB. Supported file formats are .jpg, .png, and .jpeg.
   
   
   
   
   

System, workflow, and welcome messages display the chatbot’s name and avatar.

Brand

This represents a distinct identity or business unit within your organization. It allows you to manage multiple customer support experiences under one BoldDesk account. Here, select the brand for which the widget is being created.

Auto Tag Conversations

Tags assigned to a live chat widget will automatically be applied to any conversation initiated through that widget.

Theme

Choose between a light or dark theme for the widget.

File Upload

Enable or disable the ability for visitors to send attachments during chats to enhance support capabilities. The file upload limit in live chat is currently 10MB. You can choose either none or single file.

Allowed File Types

If single file is selected, you can specify the permitted file types for upload. Include a dot before each extension and separate file types with a comma (for example, .png, .pdf). If left empty, all types are allowed except a few that are blocked by default for security reasons.

Allow Users to Reopen a Closed Conversation

If enabled, users can reopen a closed conversation or start a new one after an agent ends it. If disabled, users can only start a new conversation. This feature is unavailable when visitors can chat without entering an email address.

Reopen Interval

The Reopen Interval defines how long a conversation remains eligible for reopening after closure. This can be set for a maximum of 7 days and a minimum of 5 minutes.

Enable Emoji Picker

If the emoji picker is enabled, end users can access the emoji picker and insert emojis while chatting. Otherwise, they will not be able to use emojis when chatting.

Enable Knowledge Base

Our live chat widget seamlessly integrates the Knowledge Base into the live chat widget, helping users quickly find relevant information and reducing the need for agent support. You can leave it empty if you want to show all categories in the widget. Otherwise, selected categories will be listed in the widget. Learn How to Display and Customize the Knowledge Base in the Live Chat Widget.

Enable AI Agent

Enable or disable this setting to activate or deactivate the AI Agent feature. Learn more on Enabling AI Agent in Live Chat.

Trusted Domains

Specify the secure domains where the live chat widget can be embedded. If left empty, the widget can be embedded on any domain. Learn How to Add Trusted Domains to Your Live Chat Widget.

Privacy Policy Notice

The Privacy Policy Notice informs users that their chat interactions may be recorded, stored, or analysed to improve service and support. This promotes transparency, builds trust, and ensures compliance with data protection laws like GDPR and CCPA.

BoldDesk supports displaying a customizable disclaimer directly in the chat widget. You can now include hyperlinks to your privacy policy or other legal pages.

The default privacy policy message is shown below.

By chatting with us, you agree to the monitoring and recording of your data in the chat to improve our service as per our privacy policy. 

Widget Customization

Customize the live chat widget’s appearance by adjusting its theme, logo, launcher button type, colour, position, and other settings. Learn How to Customize the Live Chat Widget to Reflect Your Brand.

Chat Experience

Configure the chat experience with the following options:

• Start chat: Set up welcome messages and forms. Learn more on Customizing the Start Chat Experience for Users in Your Live Chat Widget.
• Away experience: Set business hours and configure an offline support form for concerns sent after business hours. Learn more on Customize the Away Experience for Your Live Chat Widget.

Installation

The Installation tab provides multiple methods to embed BoldDesk Live Chat on websites, customer portals, or mobile apps. Select your preferred installation path based on your platform.

1. Code Snippets

Code Snippets refer to a feature that allows support agents to send predefined blocks of code or formatted text directly within the live chat interface. They can be applied by either using embeddable code or iframe code.

Embeddable Code

This is a script snippet that allows you to integrate the Live Chat Widget directly into your website or web application. This code is generated when you create a widget and can be customised to suit your brand and support needs. You can find the embed code for the live chat widget on the Live Chat Widgets list page or on the live chat installation tab.

Iframe Code

An iframe code is a snippet of HTML that allows you to embed one webpage or web-based content (like a video, form, or widget) inside another webpage. It creates a frame within your page that displays external content. To retrieve the iframe embed code for the live chat widget, go to the Widget list, select your desired widget and navigate to Installation > Code Snippets. Optionally, you can find it on the widget list page on the code snippet.

To integrate the widget into your website, simply copy the provided code snippet and paste it into your website’s HTML.

2. NPM Package

For instructions on integrating the live chat widget using the NPM package, explore further instructions about BoldDesk Live Chat Web SDK: Integrate & Control Chat Widget.

3. SDK

iOS SDK

The iOS SDK option allows you to integrate the BoldDesk Live Chat widget directly into your iOS mobile application. This method provides a native, app‑embedded chat experience with full support for message handling, branding, and push notifications.

Accessing the iOS SDK
Navigate to:
Installation → iOS SDK
The page displays:

• iOS App Key

• Code snippet required for integration

• Push Notification settings (Bundle ID, file upload, notification category)

  
  
  

Using the iOS App Key
The iOS App Key uniquely identifies your mobile app and connects it to the BoldDesk Live Chat service.

To install:

• Copy the iOS App Key from the Installation tab.
• Paste it inside your iOS application wherever you initialise the BoldDesk Chat SDK.

iOS SDK Code Snippet
A pre‑generated snippet is displayed in the UI.
Add the provided code to your iOS project to enable chat features immediately.

This snippet ensures:

• Widget rendering
• Secure connection to BoldDesk
• Event handling for chat interactions

Push Notification Setup (Optional but Recommended)
To support real‑time alerts:

• Bundle ID: Enter your iOS app’s Bundle ID.
• Upload File: Add your .json Firebase Cloud Messaging configuration file.
• Push Notification Category: Choose your preferred category (e.g., Firebase Cloud Messaging).
• Enable the toggle to activate push notifications.

These settings allow your app to receive:

• New message alerts
• Conversation updates
• Background notifications

Android SDK

The Android SDK option allows you to embed the BoldDesk Live Chat widget inside any Android application, giving users a native chat experience with optional push notifications.

Accessing the Android SDK
Navigate to:
Installation → Android SDK
The page displays:

• Android App Key

• Android SDK initialization snippet

• Push Notification configuration

  
  
  

Using the Android App Key
The Android App Key identifies your Android application and connects it to BoldDesk chat services.

To install:

• Copy the Android App Key.
• Add it to your Android application during SDK initialisation.

Android SDK Code Snippet
BoldDesk generates a ready‑to‑use snippet for Android integration.
Add the snippet to your Android project to enable the chat widget.
The SDK handles:

• Widget rendering
• Chat session management
• User interaction events

Push Notification Setup (Optional)
To allow real‑time chat notifications:

• Bundle ID: Enter your application’s package name.
• Upload File: Add your Firebase .json messaging configuration file.
• Enable the Push Notification toggle to activate FCM‑based alerts.

After configuration, your app can receive:

• Incoming chat messages
• Response alerts
• System notifications even when the app is minimised

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.

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 (FAQ)

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. How do I add a privacy disclaimer to the chat widget?
Enable the Privacy Policy Notice in the widget’s General settings. You can customise the message and include hyperlinks using HTML.

6. Can users reopen closed conversations?
Yes, if the Allow Users to Respond to a Closed Conversation option is enabled. This feature is only available when users provide an email address before starting a chat.

7. Is it possible to integrate the Knowledge Base into the chat widget?
Absolutely. You can enable the Knowledge Base integration to help users find answers without needing agent assistance. Learn more How to Display and Customize the Knowledge Base in the Live Chat Widget.

8. How do I activate the AI Agent in live chat?
Enable the AI Agent setting in the widget’s General section.

9. What are trusted domains and why should I set them?
Trusted domains restrict where your chat widget can be embedded. This helps prevent unauthorised use and ensures the widget only appears on approved websites.

10. How do I embed the live chat widget in my mobile app (iOS and Android)?
You can embed the BoldDesk live chat widget in both iOS and Android apps using the dedicated SDKs available under Installation → iOS SDK or Installation → 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