Embedding Help Widget on External Site

Published: Mar 24, 2023

The embeddable widget allows you to embed the Contact Form and knowledge base in your company’s website or Help Center. The user can see the articles and create a ticket using the help widget. The created tickets will be shown in both the agent and customer portals.

Note: The help widget is fully brand-based, and you can create multiple widgets for a single brand.

Check out this video to learn more about embeddable widgets.

How to add a new widget

To add a new widget, follow these steps:

Open the Widget module.
Click the Add Widget button on the right side.

It has three sections,

Name and Brand section – Allows you to choose the widget’s name and brand.
Widget Customization – Allows you to customize the widget form and launcher button.
Contact Form – Allows you to choose the form type, such as a simple contact form or a simple contact form with ticket fields, as well as other properties, such as file attachment, Google reCAPTCHA, etc.

Widget customization

The widget customization feature allows you to customize the following fields.

Logo – You can enable or disable the logo. If you enable logo, the customer portal’s default logo will be shown. You can also upload a new logo.
Header Text– The text that appears as the widget header.
Header Description – The text that appears as the widget header description.
Header Theme Color – Allows you to choose the background color of the widget header.

Launcher button customization

The launcher button customization feature allows you to customize the following fields.

Button Text – The text that appears in the launcher button.
Position – Allows you to choose the position of the launcher button (bottom left or bottom right).
Offset – Shows the launcher button’s position offset (Left, right, and bottom).
Background Color – Allows you to choose the background color of the launcher button.
Text Color – Allows you to choose the text color of the launcher button.

Contact form customization

The contact form customization feature allows you to customize the following fields.

Form Option – There are two types.
- Contact form – Shows basic fields (Name, Email, Phone Number, Subject, and Description)
- Contact form with ticket fields – Provides the above basic fields along with all custom and system fields that are mapped to the chosen brand.

Note: The contact form only displays the ticket fields that are set to be visible in the customer portal. Field dependency and Field display conditions are also applicable.

Form Title – The text that appears as the form title.
Form Description – The text that appears as the form description.
Footer Message – The text that appears in the form footer.
Confirmation Message – The text shown after the creation of a successful ticket.
Submit Button Text – The text that appears in the submit button.

Apart from this, there are a few other options you can enable/disable on the form:

You have an option to enable GDPR consent in forms.
You can allow users to attach files while submitting the form. When attachments are enabled, the end user can attach up to five files.
Enable Google reCAPTCHA to prevent spam.

You have the option to add Custom CSS and Custom JS, which help to overwrite the styles and script.

Knowledge base customization

The knowledge base customization feature has the following options,

Enable Knowledge Base - By enabling this feature, the knowledge base article will be displayed in the widget pop-up.
Header Text - Text to appear as the knowledge base title.
Category - Allows you to choose the categories to be listed in the widget pop-up.

Refer this article to see more details about enabling knowledge base within the help widget.

Embed code

The embed code option is shown in the dialog box after the widget has been successfully created. You can copy the code and embed it into your help center or website.

You can also find the embed code feature on the widget’s list page.

How to integrate the help widget on your website

Integrating the help widget on your website is simple and helps enhance your visitors’ experience by providing easy access to support. Follow these steps to add the help widget to your website:

Obtain the widget code as mentioned above after adding the widget in your BoldDesk account.
Determine the desired location for the widget on your website and insert the code into the corresponding section of your website’s HTML.
- Header or Footer: For site-wide visibility, insert the code into your website’s header or footer.
- Specific Section or Page: To display the widget only on certain pages, embed the code within that page’s content section.
Save your changes and publish the page to make the widget live and accessible.

Ticket history properties

By using the ticket history properties, you can identify the site through which the user made contact. On the ticket history tab, you can find two properties.

Source: Widget name will be displayed if you have created multiple widgets.
Source Site URL: If it is possible to fetch, it will retrieve the web page URL where the widget is hosted.

Permission for creating a widget

For creating a new widget, you should enable the Manage settings permission.