Can I use a dynamic URL as the CTA button from a guide?
I have a feature that has a dynamic URL as a part of the inspect elements. Can I use that URL as a part of the call to action button from a badge guide?
3
I have a feature that has a dynamic URL as a part of the inspect elements. Can I use that URL as a part of the call to action button from a badge guide?
コメント
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:
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.
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
I have the same use case as Eric Miller. Interested if there is a solution!
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!
>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]):
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:
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.
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?
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.
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.
James Hartley - where did you find the button ID of the button? I can't seem to locate this in the editor anywhere.
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.
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.
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!
サインインしてコメントを残してください。