Note: The help widget is being rolled out in batches. Click here to request early access for your account.


With the Freshdesk help widget, you can embed solution articles and/or 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 also make the widget open up when your customers click on a button or a link on your website or product, such as a "Click here for help" link. This solution article will guide you through the process of setting up a button or a link which cean open the widget. 


Here's a sample site with this implemented:


1. Creating a button or a link

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

  • Sample code for a button:
<button type="button">
This is a button
</button>
  • Sample code for a link:
<a href="#">
This is a link
</a>


2. Creating a function that opens the widget


Now that you've created a button or a link, you can go ahead and define what needs to happen. This is done using a JavaScript function


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


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 code */

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

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


3. Opening the widget when the button or link is clicked 

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 or link. This can be done with the onclick event


The onclick event executes a function when the user clicks on an element (such as a link or a button).


  • Sample code for a button with the onclick event:
<button onclick="openWidget()" type="button">
Click this button to open the widget
</button>
  • Sample code for a link with the onClick event:
<a href="#" onclick="openWidget()">
Click this link to open the widget
</a>


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.

<script>
/* 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. 






4. Hiding the widget


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


One way to use the hide widget API code - is to run it whenever the page loads. That way, the widget is hidden by default for your customers. And opens, only when the link or button is clicked.


  • Example of the hide widget API code included in the body tag
<body onload="FreshworksWidget('hide')">


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