With the Freshdesk help widget, you can embed solution articles and a contact form within your website or product. When your customers need help, they can open the widget to search through solution articles or to submit a ticket. You can watch this video to learn how to set up the help widget or read more about setting up the help widget here.


You can also make the widget open up when your customers click on a button on your website or product, such as "Click here for help." This solution article will guide you through the process of setting up a button that can open the widget. 


Here's a sample site with this implemented:


First, decide on which button that your customers will have to click on, to open the widget. If you don't already have a button, you'll have to create one first.

  • Sample code for a button:

By the way, this doesn't have to be a button. You can also use any other element, like a link, if that's what you prefer.


2. Creating a function that opens the widget

Now that you've created a button, you can go ahead and define what needs to happen. You can use a JavaScript function to do so.


A JavaScript function is a piece of code to complete a specific action or set of steps.



In the sample code below, we've defined a function named openWidget(). The openWidget() function tells the widget to open by using the widget API: FreshworksWidget('open');


The name of the function is only for your reference and can be changed as you wish.


  • Sample code for the openWidget() function:

Place this function above the embed code (that you'd have copied from Freshdesk) and within the



So far, we've done two things:

  • created a button on the page
  • created a function that opens the widget


The next thing we need to do is to run the function when your customers click on the button. You can use onclick to do this.


We can execute a function using the onclick event when the user clicks on an element (such as a button).


  • Sample code for a button with the onclick event:

Here is an example of how the



Here is a sample page with this implemented. 




Additionally, you can also hide the widget so that your customers don't see it until they click on a button to ask for help. For this, we'll use the hide widget API: FreshworksWidget('hide', 'launcher');


You can call the hide widget API whenever the page loads. That way, the widget, along with the launcher, is hidden by default for your customers. The widget will open only when the button is clicked.


  • Example of the hide widget API code included in the body tag





Here is a sample page with the hide widget API and the open widget API implemented:


If you prefer to show the launcher when the widget opens when your customers click on a button, then you can remove the 'launcher' parameter when you hide the widget: FreshworksWidget('hide')

  • Example of using the hide widget API in the body tag without the launcher parameter