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 show specific articles when your customers click on a button 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 that can open an article directly in 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 solution article

Now that you've created the button, you can go ahead and define what needs to happen when it's clicked. 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 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 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. You can use onclick  for 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="openWidgetArticle()" type="button">
Click this button to open the article
</button>


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.