How to Set Up and Embed a Live Chat Widget on Your Website or Help Desk

Live chat widgets are essential tools for providing real-time support and improving customer engagement on websites or help desks. Setting one up in BoldDesk involves customizing the widget to match your brand and embedding it into your site using a simple code snippet.
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.

BoldDesk’s live chat widget is brand-based, allowing you to create and manage multiple widgets under a single brand for tailored customer engagement.

How to Add a New Live Chat Widget

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

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.

Brand

This represents a distinct identity or business unit within your organisation. 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.

Option_for_adding_some_tags_automatically_for_conversations_in_the_Live_Chat_Widget.png

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.

Option_to_Allow_Users_to_Respond_to_a_Closed_Conversation_in_Live_Chat.png

You can customise the Reopen Interval only if you allow users to reopen a closed conversation.

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

Option_to_Enable_Privacy_Policy_Notice_in_a_Live_Chat_Widget.png

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.

The privacy policy message may be tailored to align with your specific policy notice. Additionally, you can translate the policy message into your desired language by navigating to Admin > Settings > Language > General > Language Translation > String Resources. In the search bar below, search for “policy” and modify the translation accordingly. Learn more on How to Translate Dynamic Content for Multilanguage Portal.

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

You can install/embed your live chat to the external site or to your BoldDesk customer portal via various methods discussed below.

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.

NPM Package

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

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.

When embedding the widget as an iframe, JavaScript API code should not be added directly via a <script> tag on your site. Instead, it must be placed inside the widget’s Custom JS within Widget Customization > Advanced Customization for it to work correctly within the iframe context.
Learn more on Live Chat Widget JavaScript API Guide.

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.

Was this article useful?

Dislike

Comments (0)