How can I add additional data (query parameter) to an external link in a guide?

This content has been moved to the Best Practices section of the Community. Please reference this article for the most up to date information:  https://support.pendo.io/hc/en-us/articles/6838893201819-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. This is what the custom code is adding.

 

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

Modifying the Custom Code

As currently written, this adds ?visitor=visitorID to the end of an external link, where visitorID will be replaced with the user’s Visitor ID value.

If modifying or customizing the code example, you are responsible for testing and validating it. This code snippet is free to use, and as such, there is NO WARRANTY, SLA or SUPPORT for this snippet.

Some tips are below: 

  • Use ${pendo.accountId} to provide the Account ID value

  • Use ${pendo.getSerializedMetadata().visitor.metadataName} to get the value of a visitor level metadata field. Replace 'metadataName' with the name of the metadata field.
    • As an example, if I was passing in ‘email’ as visitor level metadata, I would reference it via  ${pendo.getSerializedMetadata().visitor.email}

  • Use ${pendo.getSerializedMetadata().account.metadataName} to get the value of an account level metadata field
0

Comments

1 comment

Please sign in to leave a comment.

Didn't find what you were looking for?

New post