Trigger (optional) lead flow to appear on click... and automatically redirect on close/completion
I wanted to share a solution with everyone... , and perhaps my future self, in case I forget why I did this 🙂
Here's our requirement. We have a regular hyperlink on our website that links to page with a valuable resource. It looks something like this:
<a href="/somewhere-else" class="my-btn-link">Click to Download</a>
We would prefer if the visitor gives us their email upon downloading that resource, but we don't want to totally block the resource with a regwall if they don't want to.
Instead, what we want is this:
Clicking on the link will pop-open a form if they meet the supression/inclusion critera
Closing the form (with the "X") will redirect to the destination of the link
Submitting the form will redirect to the destination of the link
// add this to your site's common javascript file
window.__ahHsFormPop = function(a){
// if there are no leadflows attached, normal link behavior
if (!window.leadflows || !window.leadflows.lfConfig || !window.leadflows.lfConfig.leadFlows[0])
return true;
// create, open, and advance form to first state
var myform = window.leadflows.dynoFactory.create(window.leadflows.lfConfig.leadFlows[0]);
myform.open();
myform.moveToFormState();
// hijack the modal's close event to redirect to target page
var close = myform.modal.close;
myform.modal.close = function(){
var ret = close.call(myform.modal,arguments);
window.location = a.href;
return ret;
};
// hijack the submit form button to close modal after submitting
var moveToThanksState = myform.moveToThanksState;
myform.moveToThanksState = function(){
var ret = moveToThanksState.call(myform,arguments);
myform.modal.close();
return ret;
};
// supress the link click
return false;
};
Once you've added that function to your main javascript file, you just need to invoke it. Here is a way to bind with JQuery:
// EXAMPLE: how to bind this to a link using jQuery (useful if you only have the ability to attach classes, such as using word press
jQuery('.downloads-primary .btn').click(function(){ return window.__ahHsFormPop(this); });
You might be able to use onclick, but I didn't test it.
<a href="/somewhere-else" class="my-btn-link" onclick="return window.__ahHsFormPop(this);">Click to Download</a>
Obviously this uses undocumented HubSpot Javascript APIs and can break anytime, so be careful. Hopefully someday hubspot can add features so we can do this w/o code.
Also.. I set a timeout trigger for the maximum possible value (8000+ seconds). I'm sure there's a way to disable that via JavaScript, but i guess if someone is on the page for 2H+ that's probably fine