Help desk software with unlimited agents starts at $99.  Learn More

simple support ticket system

separator-arrow-iconAdministration & Configuration

How to Set up a Help Widget for Embedding in External Website

Updated on : September 8, 2022

The embeddable widget allows you to embed the Contact Form support in your company’s website or Help Center. The user can 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.


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.
Add Widget Option
Add Widget Option

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.

Widget Customization
Widget Customization
  • 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.
Widget Header Background Colors
Widget Header Background Colors
Personal Details
Personal Details


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.
Launcher Button Customization
Launcher Button Customization
Personal Details Fields
Personal Details Fields


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

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

Options to Enable or Disable
Options to Enable or Disable
  • 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.
Custom CSS and Custom JS Fields
Custom CSS and Custom JS Fields

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


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.

Embed Code
Embed Code

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

Embed Code Option in the Widget's List Page
Embed Code Option in the Widget’s List Page


Permission for creating a widget

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

Manage Settings Permission
Manage Settings Permission

Was this article helpful?

    Live Chat Icon