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

Featured

Comments

8 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

Please sign in to leave a comment.