Can I use a dynamic URL as the CTA button from a guide?

Featured

Comments

13 comments

  • Avatar
    gregg

    Since the URL is dynamic, you will not be able to just copy/paste it into the settings for your Guide's button.

    But it is possible to use a dynamic URL - it just requires a custom code block in the Pendo Guide.

    I don't know how applicable this would be to your situation, but I have created a Guide that dynamically sets a URL for the Guide's button based on metadata. In other words, I started from what is described here: https://support.pendo.io/hc/en-us/articles/360032206811-Recipe-Using-Metadata-in-Javascript

    And then in the custom code block for my Guide, the HTML tab has:

    <span class="_pendo-hidden-account_"><%= metadata.account.id %></span>
    <span class="_pendo-hidden-plan_"><%= metadata.account.aa_pt %></span>

    <a id="thelink" href="https://www.surveymonkey.com/r/mark-as-shipped?p=[p_value]&cidd=[cidd_value]" target="_blank">
    <button id="thebutton" style="display: block; color: rgb(255, 255, 255); font-weight: 500; letter-spacing: 0.2px; line-height: 1; position: relative; text-align: center; text-transform: none; min-width: 0px; background-color: rgb(19, 124, 189); border-radius: 2px; font-size: 13px; padding: 12px 25px; white-space: pre-wrap; width: auto; margin: 0px 0px; border: 0px solid rgb(74, 144, 226); float: none; vertical-align: baseline;"> Take the Survey</button></a>

    The CSS tab has:

    ._pendo-hidden-account_ {
    display: none;
    }

    ._pendo-hidden-plan_ {
    display: none;
    }

    #thelink {
    color: rgb(255, 255, 255); font-weight: 500;
    }

    #thelink:hover {
    text-decoration: none !important;
    background-color: #0F6397 !important;
    }

    And the Javascript tab has:

    var AccountValue = document.getElementsByClassName("_pendo-hidden-account_")[0].innerHTML;
    var PlanValue = document.getElementsByClassName("_pendo-hidden-plan_")[0].innerHTML;
    var linkElement = document.getElementById('thelink');
    linkElement.href = "https://www.surveymonkey.com/r/mark-as-shipped?p=" + PlanValue + "&ccid=" + AccountValue;
    console.log("hrefString: " + linkElement.href);


    (function wireGuideAdvanceButton(step) {
    step && step.attachEvent(step.guideElement[0], 'click', function (e) {
    var advanceButton = pendo.dom(e.target || e.srcElement).closest('#thebutton');
    if (advanceButton.length) {
    pendo.onGuideAdvanced();
    }
    });
    })(step,guide);


    Hope this helps.

    1
    Comment actions Permalink
  • Avatar
    Eric Miller

    I have a similar question. I want to create a button CTA that links to an area of our application where part of the URL is specific to the currently logged in user. There's nothing in the metadata to help me here. The specific URL exists elsewhere for the user on the page and it can be inspected, I just want to propagate that URL into the guide button. Any other ideas on a way to pull the URL from the page and feed it into the button so it would work for each logged in user?
    Example URL: www.abc.com/user-specific-GUID/reports

    2
    Comment actions Permalink
  • Avatar
    James Hartley

    I have the same use case as Eric Miller.  Interested if there is a solution!

    0
    Comment actions Permalink
  • Avatar
    James Hartley

    gregg

    How does the HREF in your HTML block reference the dynamic metadata values?  

    I don't see how the query params are referencing the values set in the JS block.  Thanks!

    0
    Comment actions Permalink
  • Avatar
    gregg.sporar

    >How does the HREF in your HTML block reference the dynamic metadata values?

    The href in the HTML code does not directly reference the dynamic values. Instead, it just has two placeholder values ([p_value] and [cidd_value]):

    href="https://www.surveymonkey.com/r/mark-as-shipped?p=[p_value]&cidd=[cidd_value]"

     The JavaScript code reads the hidden metadata values:

    var AccountValue = document.getElementsByClassName("_pendo-hidden-account_")[0].innerHTML;
    var PlanValue = document.getElementsByClassName("_pendo-hidden-plan_")[0].innerHTML;

    and stores the values it found locally (AccountValue and PlanValue).

    It then uses those values to dynamically rewrite the href value:

    linkElement.href = "https://www.surveymonkey.com/r/mark-as-shipped?p=" + PlanValue + "&ccid=" + AccountValue;
    console.log("hrefString: " + linkElement.href);

    The idea is: Pendo provides access to the metadata in the HTML. So let's hide that metadata in HTML elements that are not displayed. Even though they are not displayed, the values can be accessed from JavaScript, where we have the flexibility to then modify a different part of the HTML (in this case, the href) so that it contains the metadata values.

     

     

    0
    Comment actions Permalink
  • Avatar
    James Hartley

    Thanks gregg.sporar!  This approach works for us!  So my next question then is, since we are creating a new button outside of the standard designer we lose some of the default button tracking in the Guide Metrics.  Is there a way to somehow attach this logic to the standard button building block?

    0
    Comment actions Permalink
  • Avatar
    gregg.sporar

    James Hartley Unfortunately, I don't know of a way to add back in the additional logic that Pendo includes on its standard buttons. The folks from Pendo might have some suggestions.

    0
    Comment actions Permalink
  • Avatar
    James Hartley

    HI gregg.sporar

    I was able to link my functions to the standard OOTB buttons by declaring the function in the JS Editor then referencing the function an in eventListener based on the ID of the button (also in the editor). So far everything is working.  

    function navExtensions()

    {

    //do stuff ;

    }

    var myElem = document.getElementById("pendo-button-5cc9f0e6");
    myElem.addEventListener('click',navExtensions);

     

     

    1
    Comment actions Permalink
  • Avatar
    Damian

    James Hartley - where did you find the button ID of the button? I can't seem to locate this in the editor anywhere.

    0
    Comment actions Permalink
  • Avatar
    James Hartley

    Damian once you create the guide and add the button Pendo will assign an ID to it.  So you can either inspect the element or use the pendo tagging aid for example and get the ID.

    0
    Comment actions Permalink
  • Avatar
    Damian

    Thanks James Hartley

    I kinda got this working, but it's such a hack-and-whack workaround. I'm not a web expert to re-generate the button look and feel via javascript. I'm so disappointed Pendo doesn't have a way to solve this out of the box.

    2
    Comment actions Permalink
  • Avatar
    Damian

    I just wanted to update. What I was looking for was a dynamic way to handle different hostnames, as our application could be web1.company.com/feature or web2.company.com/feature

    Turns out after speaking with our technical CSM that pendo does support relative URLs from guides, using say /feature as the URL. It wasnt clear from the docs that this was possible - so our issue is solved!

    1
    Comment actions Permalink
  • Avatar
    James Hartley

    Damian thats good to know thanks for sharing.  So I understand you are putting the name of the feature in the url path? 

    0
    Comment actions Permalink

Please sign in to leave a comment.