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 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:


1. Creating a button

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

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>



3. Opening the widget when the button 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. This can be done with onclick


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.

<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 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');">