I wanted to share a solution with everyone... , and perhaps my future self, in case I forget why I did this 🙂

[apxltd]

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:

1. Clicking on the link will pop-open a form if they meet the supression/inclusion critera
2. Closing the form (with the "X") will redirect to the destination of the link
3. Submitting the form will redirect to the destination of the link

Thanks to a pointer from @gamebenchjake  on Trigger lead flow to appear based on link/button click , I was able to hack a JavaScript function to do just this.

// 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

[dennisedson]

Thank you for sharing this!