Pre-populate Embedded Calendly invitee information with Leadshook Information

One of the great things about Leadshook is it’s ability to store and pass information between itself and other systems. Only issue with this is the other system needs to have a way to accept that data.

When it comes to setting calendly integrations the ideal circumstance is you don’t make your visitors have to enter the information they just entered in your leadshook form again, leadshook handles this very well for calendlys that are embedded within its own quiz.

But when you want to pass that information to a custom scheduling page with additional information it’s unable to pick up the url parameters without a bit of customisation to the calendly embed code.

Before setting up the page make sure to have your redirect url set up in your leadshook results node.

In this example I want to pass the following information

• First name
• Last name
• Company
• Email

Resulting in a link that should look like this, replace your domain with your own thank you page url off course.

yourdomain.com/?firstname={first_name}&lastname={last_name}&company={company_name}&email={email}

Below is the code you’ll need to use on your page to pick up the url parameters to use in your own calendly. Replace the yourcalendlylink line with your own calendly link.

<script>
$(document).ready(function(){

  function getSearchParams(k){
     var p={};
     location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){p[k]=v})
     return k?p[k]:p;
  }
  
  //define base url
  var base_url = "https://calendly.com/yourcalendlylink?hide_gdpr_banner=1";
 
  // define base html string
  var js_str = '<div class="calendly-inline-widget" data-url="###" style="min-width:320px;height:630px;"></div><scripttt type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></scripttt>';

  //name
  var fname = "&full_name=" + getSearchParams("firstname");
  var lname = "%20" + getSearchParams("lastname");
  var name = fname+lname;
  console.log(name);
  
  //email
  var email = "&email=" + getSearchParams("email");
  
  // company
  var company = "&company=" + getSearchParams("company");
  
  var new_url = base_url + name + email + company;
  
  var js_strb = js_str.replace("###", new_url);
  var js_strb = js_strb.replace("ttt", "t");
  
  $("#candle_holder").html(js_strb);
});
</script>
<div id="candle_holder"></div>

The end result being a fully custom thank you and scheduling page that looks like this and has pre-filled the user information in calendly, should they choose to schedule straight away. As you can see I’ve used some of the parameters to dynamically customise info on the page as well as the calendly embed.