Javascript API Methods

It seems like you are looking for a way to programatically interact with your HelpKit widget? You have come to the right place. Using our Javascript widget API is super simple. With it, you can control and customize your widget behavior.

The available methods are:

show()

hide()

setContactFields()

showLaunchButton()

hideLaunchButton()

Helpkit.show()

To open the widget you can use the Helpkit.show() function.

Helpkit.show(view, type?, articleId?)

Parameter	Data Structure	Value	Optional
`view`	String	‘popover’ \| ‘sidebar’	No
`type`	String	‘article’ \| ‘contact’	Yes
`articleId`	String	'your_article_page_id'	Yes

Opening the widget with a view type

In order to open the widget within your website all you have to do is define the view parameter

Example of a button with an event listener that displays the widget 👇

<button onclick="Helpkit.show('popover')">Open the widget</button>

Visual Difference of Popover vs Sidebar view

Here you can see the visual difference between 'popover' and 'sidebar'

Opening a single article

In order to open a single article within your website you have to define all three parameters.

Example of a button with an event listener that displays a single article 👇

<button onclick="Helpkit.show('popover', 'article', 'qYFazNTSwDkVohWu9S5rbe')">Open the widget</button>

How to find the `articleId`

In order to obtain the articleId string simply:

Navigate to the Knowledge Base tab,

Find your desired article

Click on the Copy ⬇️ button

Select either Open Article Code to copy the full javascript function or Article ID to just obtain the specific id.

Opening the contact form

In order to open the HelpKit contact form use the type ’contact’ as your parameter.

Example of a button with an event listener that displays a single article 👇

<button onclick="Helpkit.show('popover', 'contact')">Contact us</button>

Helpkit.setContactFields()

This function allows you to programatically set the fields for the HelpKit email contact form. It expects an object containing one or more valid fields to be set. Calling the function again will update the respective field(s).

Helpkit.setContactFields(fields)

The fields object should contain at least one key value pair:

Key	Data Structure	Example
`name`	String	“John Doe”
`email`	String	“john.doe@acme.com”
`subject`	String	“Feature Request”
`metadata`	Any	“Project Id: 10 \| Project Name: demo”

An example of how to programatically set the contact fields

Helpkit.setContactFields({
	name: “John Doe”, 
	email: “john.doe@acme.com”, 
	subject: “Feature Request”, 
	metadata: “Project Id: 10 | Project Name: demos” 
})

A very common workflow would be to set the name and email for your users right after the have logged in. This way they don’t have to retype their contact information whenever they need to submit a new ticket.

How will metadata be displayed?

As you can see metadata can be of type any type such as string, object or an array. HelpKit will conveniently convert it into a string and append it at the bottom of your support ticket email after a dotted line:

ℹ️

Please note that the setContactFields function has to be called before the contact page gets opened. Setting the fields while the contact page is already open currently is not supported. Let us know if you run into any issues.

Helpkit.hide()

To open close the widget you can use the Helpkit.close() function

Helpkit.hideLaunchButton()

In case you want to hide the launch button (the button that you can find at the bottom right corner with the text “Help” by default) in certain scenarios.

Helpkit.showLaunchButton()

Makes the launch button reappear.