Embedding Help Widget on External Site

Published:

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, and the created tickets will be shown in both the agent and customer portals.

Note: The help widget is fully brand based, and you are allowed to create multiple widgets for a single brand.

Checkout this video to know more

How to add a new widget

To add a new widget, follow the given 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

Widget customization 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, also you can 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 widget header’s background color.

Launcher button customization

The launcher button customization 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 launcher button background color.
Text Color – Allows you to choose the launcher button text color.

Contact form customization

The contact form customization 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 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 for preventing 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 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 that appears as the knowledge base title.
Category - Choose the categories to be listed in the widget pop-up.

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

Embed code

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