Skip to main content

Recipe: Add additional data (query parameter) to an external link in a guide

Overview

If your Pendo guide has an external link, you can add additional data to the link via query parameters. As an example, the external link might launch a third party survey or form. The third party survey or form may be able to reference the additional data sent at the end of the link. 

Please note this custom code example only applies to links in a text block. It cannot be used to modify a button which takes users to an external link.

Implementation

In this example below, the guide step has two components. The first component is a text block with the external link.

 

Screen_Shot_2022-06-24_at_9.50.59_AM.png

 

The second component is a code block with custom code in the Javascript section. When the user clicks on the link in the guide, two things happen:

  1. The link opens in a new tab
  2. The link also has some additional information added to the end of it, which is added by the custom code.

code.png

 

Important Warnings & Caveats

You can only use metadata being currently sent via the Pendo agent. To see what values are available, use pendo.validateInstall() in the Developer Console.

 

Whatever you add to the end of the external link will be visible to both the user and the website that the link opens. If you are sending PII to Pendo as agent metadata, such as name or email, it can also be added to the end of the URL if desired. However, please note that sending PII in a URL is generally not recommended.

 

The Custom Code Example

Add this to the Javascript section of the custom code block

(function (guide, step, dom) {

    var textLinkElement = dom('._pendo-text-link');

    if (!pendo._.isUndefined(textLinkElement) && !pendo._.isUndefined(pendo.visitorId)) {

        var previousUrlLink = textLinkElement[0].href;

        var newUrlLink = previousUrlLink + `?visitor=${pendo.visitorId}`;

        textLinkElement[0].href = newUrlLink;

    }

    

    dom('._pendo-button-primaryButton').on('click', function() {

        window.open(textLinkElement[0].href);

        pendo.onGuideDismissed();

    });

    

    dom(textLinkElement).on('click', function() {

        pendo.onGuideDismissed();

    });

})(guide, step, pendo.dom);

 

 
 

How could I make this work for a Qualtrics survey?

You may already be familiar with this recipe: Qualtrics: Increase your Survey Response Rate by Bringing it Into Your App. However, if you follow that approach, the submitted responses will be anonymous. A different approach is to use the Qualtrics external link and send additional data to Qualtrics via the URL:

  1. Get the external link from Qualtrics - it's called an anonymous link: https://www.qualtrics.com/support/survey-platform/distributions-module/web-distribution/anonymous-link/
  2. In Pendo, follow the instructions in this article to add the desired data (for this example, visitor ID) as a query parameter to the end of the link
  3. In Qualtrics, modify the 'Survey flow' section so that Qualtrics understands to get the data from the URL. 

 

qualtrics.png