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 show specific articles when your customers click on a button or a link on your website or product. Instead of providing links that take your customers away from your website/product - you can directly open a particular solution article in the widget using the open article API.


This article will guide you through the process of setting up a button or a link that can open an article directly in 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 solution article


Now that you've created a button or a link, you can go ahead and define what needs to happen when it's clicked. 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 openWidgetArticle(). The name of the function is only for your reference and can be changed as you wish. The openWidgetArticle() function tells the widget to open a specific article by using the widget API: FreshworksWidget('open', 'article', { id: 123 });


The id:123 refers to the article ID. To find out the article ID, open the article in your customer portal and refer to the URL. The URL would look something like yourportalname.freshdesk.com/support/solutions/123-this-is-an-article or like this: yourcname.com/support/solutions/123-this-is-an-article



Here, 123 is the article ID.



  • Sample code for the openWidgetArticle() function:
<script>
/* This is the function to open a specific solution article*/

function openWidgetArticle() {
FreshworksWidget('open', 'article', { id: 123 });
}
</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 a specific solution article


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="openWidgetArticle()" type="button">
Click this button to open the article
</button>
  • Sample code for a link with the onclick event:
<a href="#" onclick="openWidgetArticle()">
Click this link to open the article
</a>


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

<script>
/* This is the function to open a particular solution article */
function openWidgetArticle() {
FreshworksWidget('open', 'article', { id: 123 });
}

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