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.

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.

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);