Webhook Integration

Everything you need to know about webhook integration in UserGuiding.

Simay avatar
Written by Simay
Updated over a week ago

Overview

Webhook integration allows you to integrate and send UserGuiding events and metadata to any third-party application that supports webhook URLs.

What do you need to enable Webhook Integration?

  • You need to use a third-party application or a platform that provides a Webhook URL.

  • You need to create a new Webhook URL on your third-party application.

A Webhook URL acts like a phone number that UserGuiding can call when an event happens and talk to the receiving application.

It looks something like this (keep in mind that the domain changes based on the application):

Enabling Webhook Integration

You can enable this integration by using the toggle within the Integrations Tab under the Settings page.

  • Turn the toggle on

  • Enter the Webhook URL from your application into the opening pop-up

  • Click “Complete Integration”, and that's all 🙌

Event Data We're Sending Through Webhook

Listed below are the user events and their metadata that we'll be sending to the third-party application you integrate.

Guide Preview Start

It means that the first step of a Guide is previewed by a user. To see which Guide it is, check under guide started (userguiding).

You'll see the Guide ID, name, the URL of the page on which the user has seen its first step, and the user ID.

{
"event": "guide started (userguiding)",
"payload": {
"userId": "USER-ID",
"guideId": 1,
"guideName": "Guide Name",
"pageUrl": "https://panel.userguiding.com/dashboard"
}

Guide Preview Complete

It means that a user has gone through all steps of a Guide and seen its last step. To see which Guide it is, check under guide completed (userguiding).

You'll see the Guide ID, name, the URL of the page on which the user has seen its first step, and the user ID.

{
"event": "guide completed (userguiding)",
"payload": {
"userId": "USER-ID",
"guideId": 1,
"guideName": "Guide Name",
"pageUrl": "https://panel.userguiding.com/dashboard"
}

Survey Shown

It means that your Survey is seen by a user. To see the URL of the page where the user has seen the survey and the user ID, check under survey shown (userguiding).


Example:

{
"event": "survey shown (userguiding)",
"payload": {
"userId": "USER-ID",
"surveyId": 1,
"surveyName": "Survey Name",
"pageUrl": "https://panel.userguiding.com/dashboard"
}

Survey Question Answer (Score, Emoji, Choices, Written Feedback)

It means that a user has given you a certain score or selected an emoji, option, or written feedback. To see the value, check under survey question answer (userguiding).

You'll see the survey question, the URL of the page on which the user has seen the survey, and the user ID.

Survey Question Answer (score)

{
"event": "survey question answer (userguiding)",
"payload": {
"userId": "USER-ID",
"surveyId": 1,
"surveyName": "Survey Name",
"questionId": "f4411b5d-7544-477a-b605-5c8622cb5c8b",
"questionType": "Star Rating" | "Number Rating (5)" | "Number Rating (10)" | "NPS Rating",
"surveyQuestion": "How likely are you to recommend this product to a friend or colleague?",
"score": 5,
"pageUrl": "https://panel.userguiding.com/dashboard",
}

Survey Question Answer (emojiScore)

{
"event": "survey question answer (userguiding)",
"payload": {
"userId": "USER-ID",
"surveyId": 1,
"surveyName": "Survey Name",
"questionId": "d82cf468-6dae-4813-a3e2-1ba740254aa1",
"questionType": "Emoji Rating" | "Thumbs Up/Down",
"surveyQuestion": "How would you describe your experience with our product using emojis?",
"emojiScore": "Positive" | "Neutral" | "Negative",
"pageUrl": "https://panel.userguiding.com/dashboard",
}

Survey Question Answer (choices)

{
"event": "survey question answer (userguiding)",
"payload": {
"userId": "USER-ID",
"surveyId": 1,
"surveyName": "Survey Name",
"questionId": "23300f80-4002-461e-b179-559094c82496",
"questionType": "Multiple Choice",
"surveyQuestion": "Which of the following options best describes your role?",
"choices": "Choice 1,Choice 2",
"pageUrl": "https://panel.userguiding.com/dashboard",
}

Survey Question Answer (feedback)

{
"event": "survey question answer (userguiding)",
"payload": {
"userId": "USER-ID",
"surveyId": 1,
"surveyName": "Survey Name",
"questionId": "81d6c621-d74c-4590-b35e-9d5abc3c49d5",
"questionType": "Written Feedback",
"surveyQuestion": "Please provide any comments or feedback regarding your experience with our service.",
"feedback": "User's feedback",
"pageUrl": "https://panel.userguiding.com/dashboard",
}

Hotspot Interaction

It means that a user interacted with a hotspot group and saw Hotspot content. Please note that Hotspot groups can have multiple Hotspots as contents.

This event is sent once in one UserGuiding script load (page refresh).

To see which Hotspot it is, check under hotspot interacted (userguiding).

You'll see the Hotspot group ID, interacted Hotspot's ID/title, the name of the Hotspot group, the URL of the page on which the user interacted with the Hotspot, and the user ID.

{
"event": "hotspot interacted (userguiding)",
"payload": {
"userId": "USER-ID",
"hotspotGroupId": 1,
"hotspotGroupName": "Hotspot Group Name",
"hotspotId": "7b2a1dc8-9d41-4ba2-bc31-1b15f64ee9a1",
"hotspotTitle": "Hotspot Title",
"pageUrl": "https://panel.userguiding.com/dashboard",
}

Checklist Item Trigger

It means that a checklist item is triggered by a user. To see which item is triggered from which Checklist, check under checklist item triggered (userguiding).


You'll see the Checklist name / ID, Guide name / ID, the URL of the page on which the user has triggered the Guide from the Checklist, and the user ID.

{
"event": "checklist item trigger (userguiding)",
"payload": {
"userId": "USER-ID",
"checklistId": 1,
"checklistName": "Checklist Name",
"guideId": 1,
"guideName": "Guide Name",
"pageUrl": "https://panel.userguiding.com/dashboard",
}

Checklist Item URL Click

It means that a user clicks a Checklist URL item. To see which item is triggered from which Checklist, check under checklist item url click (userguiding).


You'll see the Checklist name / ID, the URL of the clicked item, the URL of the page on which the user has clicked the item from the Checklist, and the user ID.

{
"event": "checklist item url click (userguiding)",
"payload": {
"userId": "USER-ID",
"checklistId": 1,
"checklistName": "Checklist Name",
"checklistItemUrl":"https://help.userguiding.com",
"pageUrl": "https://panel.userguiding.com/dashboard",
}

Checklist Complete

It means that a user completes a Checklist. To see which Checklist is completed, check under checklist completed (userguiding).


You'll see the checklist name / ID, the URL of the page on which the user has completed the checklist, and the user ID.

{
"event": "checklist completed (userguiding)",
"payload": {
"userId": "USER-ID",
"checklistId": 1,
"checklistName": "Checklist Name",
"pageUrl": "https://panel.userguiding.com/dashboard",
}

Resource Center Guide Trigger

It means that a Resource Center Guide is triggered by a user. To see which Guide is triggered from which Resource Center, check under resource center guide triggered (userguiding).

You'll see the Resource Center name / ID, Guide name / ID, the URL of the page on which the user has triggered the Guide from the Resource Center, and the user ID.

{
"event": "resource center guide trigger (userguiding)",
"payload": {
"userId": "USER-ID",
"guideId": 1,
"guideName": "Guide Name",
"resourceCenterId": 1,
"resourceCenterName": "Resource Center Name",
"pageUrl": "https://panel.userguiding.com/dashboard",
}

Resource Center Checklist Guide Trigger

It means that a Guide in a Checklist that is put in a Resource Center as a module is triggered by a user. To see which Guide in which Checklist is triggered from which Resource Center, check under resource center checklist guide triggered (userguiding).

You'll see the Resource Center name / ID, Checklist name / ID, Guide name / ID, the URL of the page on which the user has triggered the Guide from the Resource Center, and the user ID.

{
"event": "resource center checklist guide trigger (userguiding)",
"payload": {
"userId": "USER-ID",
"checklistId": 1,
"checklistName": "Checklist Name",
"guideId": 1,
"guideName": "Guide Name",
"resourceCenterId": 1,
"resourceCenterName": "Resource Center Name",
"pageUrl": "https://panel.userguiding.com/dashboard",
}

Resource Center Checklist Item URL Click

It means that a URL item in a Checklist that is put in a Resource Center as a module is clicked by a user. To see which URL item in which Checklist is clicked from which Resource Center, check under resource center checklist item url click (userguiding).

You'll see the Resource Center name / ID, Checklist name / ID, the URL of the clicked item, and the URL of the page on which the user has clicked on the item from the Resource Center.

{
"event": "resource center checklist item url click (userguiding)",
"payload": {
"userId": "USER-ID",
"checklistId": 1,
"checklistName": "Checklist Name",
"checklistItemUrl":"https://help.userguiding.com",
"resourceCenterId": 1,
"resourceCenterName": "Resource Center Name",
"pageUrl": "https://panel.userguiding.com/dashboard",
}

Resource Center External URL Click

It means that a user clicks an external URL in a Resource Center. To see which external URL is clicked from which resource center, check under resource center external URL clicked (userguiding).

You'll see the resource center name / ID, the external URL, the URL of the page on which the user has clicked the external link from the Resource Center, and the user ID.

{
"event": "resource center external url click (userguiding)",
"payload": {
"userId": "USER-ID",
"externalUrl": "https://help.userguiding.com",
"resourceCenterId": 1,
"resourceCenterName": "Resource Center Name",
"pageUrl": "https://panel.userguiding.com/dashboard",
}

Resource Center Search Article Click

It means that a user clicks a search article in a Resource Center. To see which search article is clicked from which Resource Center, check under resource center article clicked (userguiding).


You'll see the resource center name / ID, the article link, the URL of the page on which the user has clicked the article link from the Resource Center, and the user ID.

{
"event": "resource center article link click (userguiding)",
"payload": {
"userId": "USER-ID",
"articleLink": "https://help.userguiding.com",
"resourceCenterId": 1,
"resourceCenterName": "Resource Center Name",
"pageUrl": "https://panel.userguiding.com/dashboard",
}

Resource Center Survey Trigger

It means that a Survey in a Resource Center as a module is triggered by a user. To see which Survey is triggered from which Resource Center, check under resource center survey trigger (userguiding).

Example:

{
"event": "resource center survey trigger (userguiding)",
"payload": {
"userId": "USER-ID",
"surveyId": 1,
"surveyName": "Survey Name",
"resourceCenterId": 1,
"resourceCenterName": "Resource Center Name",
"pageUrl": "https://panel.userguiding.com/dashboard",
}

💡Please note that the existing events associated with the now-deprecated Promoter Surveys will remain unchanged; however, they will be emitted in their new format.

Testing Webhook Integration

UserGuiding sends data in JSON format, and the Webhook messages are being sent from the client side, meaning we are unable to check if the process is successful or not.

You can use this site to test the integration. While testing on there, make sure the CORS Headers checkbox is checked.

After completing the integration, you need to activate a material (Guide, Hotspot, etc.) and interact with it to trigger an event to be sent through.

You can also check if the HTTP POST messages are being sent to the Webhook URL you are using through the Network tab on the browser console.

Disabling Webhook Integration

You can disable this integration by turning off the toggle within the Integrations Tab under the Settings page.

Did this answer your question?