Building custom lead routing with the Calendly embed

Using our advanced embed code and a little bit of Javascript, you can route leads to specific scheduling pages dynamically. Instead of creating multiple pages on your website, you can simply create one page and use a form to load the correct scheduling page via the embed.

You can see a demo of this form working here.

When is lead routing helpful?

Let's say ACME company has a sales team of 10 Account Executives split into 2 teams. Depending on a prospect’s company size, they will book a demo with either the small business team or the enterprise team. A prospect with a company size of ≤ 49 would need to speak with a Small Business Account Executive, and a company size of 50+ would need to speak with an Enterprise Account Executive.

AE_Teams.png

ACME is using Calendly to book these meetings and has set up 2 round robin event types; one for Small Business Account Executives and another for Enterprise Account Executives. By using a form where a prospective customer can select their company’s size, ACME can ensure the prospect books a meeting with the correct team.

Building lead routing on your site

1. Include the Calendly resources

The first step is to include the Calendly Stylesheet and Javascript in the head section of your site. This will load the proper resources onto the page for the Calendly embed to work.

 

<head>
...
<!-- Start: Calendly CSS and JS -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script
src="https://assets.calendly.com/assets/external/widget.js"
type="text/javascript">
</script>
<!-- End: Calendly CSS and JS -->
...
</head>

2. Create a form

Next, create a form on your page and ensure that javascript:showCalendly() is included as the form action. To help prevent autocomplete in the form, you can also choose to add autocomplete="off" onto the form element.

Here is an example of a basic form that includes a name field, email field, and a submit button.

<div id="main-container">
<div id="custom-form-container">
<form action="javascript:showCalendly()" autocomplete="off">
<input type="text" name="name" id="name" placeholder="Name"><br>
<input type="text" name="email" id="email" placeholder="Email"><br>
<input type="submit" value="Submit" id="submit">
</form>
</div>
</div>

3. Include a select field on your form

Right before the submit button element, include the following code to add a select field. In the value attribute for each option, enter your Calendly Event Type slug for that selection. In this case, the value of the first 5 options would be "small-business" since ACME's team round robin event type for small business account executives is https://calendly.com/acme-company-sales-team/small-business. Additionally, the last 5 options would be "enterprise" since ACME's round robin event type for enterprise account executives is https://calendly.com/acme-company-sales-team/enterprise.

<form action="javascript:showCalendly()" autocomplete="off">
...
<!-- Event Type Selection Dropdown -->
Company Size:
<select id="event-type-selection">
<option value="small-business">1-9</option>
<option value="small-business">10–19</option>
<option value="small-business">20–29</option>
<option value="small-business">30–39</option>
<option value="small-business">40–49</option>
<option value="enterprise">50–59</option>
<option value="enterprise">60–69</option>
<option value="enterprise">70–79</option>
<option value="enterprise">80–89</option>
<option value="enterprise">90+</option>
</select>
...
</form>

4. Create the buildURL() and hideForm() functions

Next, create a Javascript function to build the correct URL based on form selections:

/* Builds the correct URL to pass into the Advanced Embed Code */
const buildURL = () => {
var teamPage = 'acme-company-sales-team';
var eventType = document.getElementById('event-type-selection').value;
return generatedURL = 'https://calendly.com/' + teamPage + '/' + eventType;
};

/* Hides the Form */
const hideForm = () => {
document.getElementById('custom-form-container').style.display = "none";
};

5. Create showCalendly() function

The final step is to create the showCalendly() function to load the Calendly Embed on the page.

const showCalendly = () => {
buildURL();
hideForm();

/* Initialize Calendly Embed */
Calendly.initInlineWidget({
url: generatedURL,
prefill: {
name: document.getElementById("name").value,
email: document.getElementById("email").value,
}
});
};
Was this article helpful?
0 out of 2 found this helpful