We have recently refreshed our branding across our offerings and changed the names of our pricing plans. If you have signed up before Aug 9, 2021, please click Previous plans to view your applicable plans.
We assure you that this change will not impact your product experience, and no action is required on your part.

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:
<button type="button">
This is a button
</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:
<script>
/* This is the function to open the widget */

function openWidget() {
FreshworksWidget('open');
}
</script>

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

If you want to open the contact form directly, you can use the open contact form API

  • Sample code for the openWidget() function:
<script>
/* This is the function to open the widget */

function openWidget() {
FreshworksWidget('open', 'ticketForm');
}
</script>



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:
<button onclick="openWidget()" type="button">
Click this button to open the widget
</button>

Here is an example of how the <script> tag will look like with the widget embed code, along with the JavaScript function openWidget() that we created.


/* This is the function to open the widget code */
function openWidget() {
FreshworksWidget('open');
}

/* This is the widget embed code */
window.fwSettings = {
'widget_id':47000000016
};
!function(){if("function"!=typeof window.FreshworksWidget){var n=function(){n.q.push(arguments)};n.q=[],window.FreshworksWidget=n}}()
</script>
<script type='text/javascript' src='https://widget.freshworks.com/widgets/47000000016.js' async defer></script>



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
<body onload="FreshworksWidget('hide', 'launcher');">


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
<body onload="FreshworksWidget('hide');">