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

4 mins read

Updated:

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

Allow Users to Respond to 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.

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. Please refer to this article for more information.

Enable AI Agent

Enable or disable this setting to activate or deactivate the AI Agent feature. Please refer to this article for more information on enabling AI Agent.

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.

Privacy Policy Notice

Informs users that their chat interactions may be recorded, stored, or analyzed to improve service and support. It includes a link to the company’s full privacy policy, where users can learn what data is collected and how it’s used. This promotes transparency, builds trust, and ensures compliance with data protection laws like GDPR and CCPA.

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. Please refer to this article for more information on content translation.

Widget Customization

Customize the live chat widget’s appearance by adjusting its theme, logo, launcher button type, colour, position, and other settings. For detailed customization instructions, please refer to this article.

Chat Experience

Configure the chat experience with the following options:

Start chat: Set up welcome messages and forms. Please refer to this article.
Away experience: Set business hours and configure an offline support form for concerns sent after business hours. Please check this article to learn more.

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 customized 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, please refer to this article for further guide.

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.
Please refer to this article for implementation details and usage examples.

Embedding Live Chat in the BoldDesk Customer Portal

You have the option to embed the live chat into your customer portal; please refer to this article for more insights.

Permission for Adding a Live Chat Widget

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

Was this article useful?

Dislike

Comments (0)