The JavaScript API is a collection of methods that you can utilize in your web projects. Please use a method after the embed widget script on your web page to trigger one of the ways listed below.
By offering you more control over widgets, the JavaScript API allows you to provide a more personalized visitor experience.
Use cases:
You can use the JavaScript API to change how and when the widget shows on your website.
It allows you to do the following at a high level:
- Control the behavior of the widget
- Listen for events in the widget and react to them
- Poll to understand widget state
Getting started
The RedpenWidget object contains the API. This object provides access to all available methods. This object will be created for you by the Redpen script loader on your page.
API reference
openWidget();
Open the widget. If the widget is already open or isn't currently loaded, this is a no-op.
You can also open widget from custom elements using this method.
RedpenWidget.openWidget(); // Example <button class=”feddbackBtn” onclick={RedpenWidget.openWidget()}>Feedback<button>
status();
This method returns an object with properties relating to widget status.
Field name |
Data type |
Default |
Description |
active |
Boolean |
Whether the widget is open or not. |
RedpenWidget.status();
//Example
const status = RedpenWidget.status();
if (status.active) {
// do something for active
} else {
// do something for inactive 10
}
Event specification
Throughout its lifetime, the Redpen widget will broadcast numerous events to which you can listen and reply.
onStatusChange();
Callback function invoked when the widget status changes. The function will receive the changed status which will be either active true or false.
RedpenWidget.onStatusChange = function(status){
//place your code here
};
Send custom data with the Redpen diagnostics information
Custom data are additional pieces of information that you want to send in order to identify and debug issues specific to your product or application. You can send custom data when issues are created with Redpen.
There are two ways to send custom data:
- Static Data
- Dynamic Data
1. Static Data
Static data are the known metadata that is sent in every issue created. e.g. productId, tenantId, etc.
Add the customData JSON code inside the Redpen Widget script to send the static data as shown below:
...
customData : {
tenantId: 'xxx-xxx-xxx',
productId: 'yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy',
...
}
...
After adding the customData in the widget script, the script will look as below:
<script id="redpen-widget-data" type="text/javascript">
window.redpenWidgetConfig = {
widgetId: 'aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa',
customData : {
tenantId: 'xxx-xxx-xxx',
productId: 'yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy',
...
}
}
</script>
<script id="redpen-widget-script"
src="https://app.redpen.ai/redpenWebWidget.js" defer>
</script>
2. Dynamic Data
Dynamic data are the metadata that is specific to the business logic of your application that you want to collect and send with every issue created. e.g. userId, application state, etc.
To collect dynamic data, you need to implement the getCustomData() method (the method must be on the same page where the Redpen widget script is added) in the application that has the business logic and returns a JSON string. Redpen widget will call the method when a user captures a screenshot or stops the screen recording to get the data.
...
customData : getCustomData,
...
...
function getCustomData(){
// Business Logic
let user = getUser();
// Return the JSON object
return {
logedinUserId: user.userID,
email: user.email,
...
}
}
...
After adding the getCustomData() method in the widget script, the script will look as below:
<script id="redpen-widget-script" type="text/javascript">
window.redpenWidgetConfig = {
widgetId: 'aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa',
customData : getCustomData,
...
}
</script>
<script id="redpen-widget-script"
src="https://app.redpen.ai/redpenWebWidget.js" defer></script>
3. Predefined Fields
Data can be sent into predefined fields configured in your Redpen widget. We currently support the labels, that sets labels in your Jira ticket.
|
Predefined Field |
Field Key |
Data Type |
|
Labels |
rp:labels |
string[] |
You can also set an Epic link automatically to the tickets that are created using the Redpen widget by following these easy steps.
- Create an Epic that you want to set if you haven't created it already.
- Create a label that will be used to indicate that a particular Epic needs to be assigned to the ticket.
- Create the Jira Rule to set the Epic according to the labels. (This document will guide you for the same)
- Configure the label in the widget
- Test the integration by creating a ticket using the Redpen web widget
<script id="redpen-widget-script" type="text/javascript">
window.redpenWidgetConfig = {
widgetId: 'aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa',
customData : {
"rp:labels": ["abc", "1.1.1"]
}
}
</script>
<script id="redpen-widget-script"
src="https://app.redpen.ai/redpenWebWidget.js" defer></script>
We will add other common APIs incrementally. We are always excited to see how you use the API, so feel free to share your creations with us!