Home ยป Blog ยป Lead Generation ยป
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
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.
Ready to Grow Your Business?
Jos Aguiar is a father, entrepreneur and traveler. He’s been building brands and helping businesses grow since 2010. Since founding leadshunt in 2021 he’s been on a mission to help create a new standard of excellence within the industry combining expertise in traffic generation and education of clientele through our content and learning materials. His aim is to not merely sell you leads, but to leave you permanently better.