If you signed up before Aug 9, 2021, please click Previous plans to view your applicable plans.

You can modify your help widget's functionality using the Widget API. This article describes specific use-cases that might be useful to you.


This is article 2 of 3 about the Freshdesk Help Widget:
  1. Set up your help widget
  2. Advanced configurations with the help widget API
  3. Support multiple languages in your help widget

This article contains:


To explore the full scope of possibilites, see the Widget API documentation.

Control widget visibility

Consider a use-case where you hide the help widget, and only display it in specific situations. For example, when a user clicks a button or a link, the widget displays a particular solution article or the contact form. To set this up:

  1. Use the Hide API to hide the widget launcher from all pages.
  2. Create a button on specific pages and map a JavaScript function.
  3. In the JavaScript function, use the Open API to open the contact form or a solution article.


You can use the Hide API with the launcher parameter to hide the widget launcher. In this example, the API call is made when the HTML body of the page loads.

<body onload="FreshworksWidget('hide', 'launcher');">

Whether or not you hide the widget, you can then use the Open API to show a contact form or a solution article. You must place your function above the widget embed code.

<button onclick="openWidget()" type="button">Open widget</button>
<button onclick="openWidgetForm()" type="button">Open form</button>
<button onclick="openWidgetArticle()" type="button">Open article</button>

<script>
   /* This function opens the widget in its default state. */
   function openWidget() {
      FreshworksWidget('open');
   }

   /* This function directly opens the contact form. */
   function openWidgetForm() {
      FreshworksWidget('open', 'ticketForm');
   }

   /* This function directly opens the solution article with the ID 123. */
   function openWidgetArticle() {
      FreshworksWidget('open', 'article', { id: 123 });
   }

   /* Put your widget embed code at the end. */
   ...
</script>

Control the form

If your contact form has a lot of fields, sometimes you may wish to curate that based on your website experience. For example, you may want to hide or disable some fields and prefill others.


When customers are already logged in to your website, the Identify API fetches their name and email address and fills in the contact form. Use the variables that you use to store their name and email.


The Prefill API allows you to fill in any fields. You can use it in conjunction with the Disable ticket fields API to grey out a field in the form, or the Hide ticket fields API to not show it to the customer. Mandatory fields must be prefilled if you disable or hide them.

/* The Identify API prefills the contact form with details about a customer */
FreshworksWidget('identify', 'ticketForm', {
    name: variableName,
    email: VariableEmail,
});

/* The Prefill API lets you set values for any fields in your form */
FreshworksWidget('prefill', 'ticketForm', {
    subject: 'Snow White T-Shirt enquiry'
});

/* The Hide ticket fields API removes fields in the contact form */
FreshworksWidget('hide', 'ticketForm', ['subject'])

/* The Disable ticket fields API prevents editing fields in the contact form*/
FreshworksWidget('disable', 'ticketForm', ['subject'])


For additional help, read the Widget API documentation or contact support@freshdesk.com.