Allow leads to easily schedule a meeting with you
Outplay Scheduler is a scheduling tool that allows prospects to book appointments with your sales team. In this article, we will cover how to get the leads from Hubspot forms and show the meeting calendar from Outplay.
Step 1: Configure the Hubspot form and copy its embed code.
Step 2: Prior to embedding the code from Step 1 onto your website, it's recommended that you first copy and paste the code into a text or code editor. This allows you to easily make any necessary modifications before publishing the form.
Step 3: Implement the function provided below on your website at the desired location where you want the form to appear for your customers.
function getHubspotFormValue(form, fieldName) {
try {
return form.find(`input[name="${fieldName}"]`)[0].value;
} catch (error) {
return null;
}
}
Step 4: Modify the code you copied in Step 1 as shown below:
hbspt.forms.create({
region: 'your-hubspot-region',
portalId: 'your-hubspot-portal-id',
formId: 'your-hubspot-form-id',
onFormSubmit: function ($form) {
const firstName = getOutplayHubspotFormValue($form, 'firstname'),
lastName = getOutplayHubspotFormValue($form, 'lastname'),
email = getOutplayHubspotFormValue($form, 'email'),
phone = getOutplayHubspotFormValue($form, 'mobilephone');
sessionStorage.setItem('outplayHubspotForm_firstName', firstName);
sessionStorage.setItem('outplayHubspotForm_lastName', lastName);
sessionStorage.setItem('outplayHubspotForm_email', email);
sessionStorage.setItem('outplayHubspotForm_phone', phone);
// Link of page where OP meeting type is embedded.
window.location.href = 'https://example.com/book-meeting';
},
});
NOTE: The highlighted content in orange color needs to be modified based on the fields you have added to your form. For example, if your form includes fields such as First Name, Last Name, Email, Company Name, and How Did You Hear About Us, then the script should be modified accordingly as shown below:
onFormSubmit: function ($form) {
const firstName = getOutplayHubspotFormValue($form, 'firstname'),
lastName = getOutplayHubspotFormValue($form, 'lastname'),
email = getOutplayHubspotFormValue($form, 'email'),
phone = getOutplayHubspotFormValue($form, 'mobilephone'),
companyname = getOutplayHubspotFormValue($form, 'company'),
aboutus = getOutplayHubspotFormValue($form, 'how_did_you_hear_about_us__');
NOTE: Pay attention to the values highlighted in blue in the script above and ensure that they match the corresponding fields in your Hubspot form. Additionally, make sure that the variable highlighted in red is accurately reflected in your code.
NOTE: The red-highlighted parts in the code snippet should be adjusted to match the fields in your HubSpot form. For example, if your form includes fields such as First Name, Last Name, Email, Company Name, and How did you hear about us, then you need to update the script accordingly, as shown below:
sessionStorage.setItem('outplayHubspotForm_firstName', firstName);
sessionStorage.setItem('outplayHubspotForm_lastName', lastName);
sessionStorage.setItem('outplayHubspotForm_email', email);
sessionStorage.setItem('outplayHubspotForm_company', companyname);
sessionStorage.setItem('outplayHubspotForm_aboutus', aboutus);
NOTE: The highlighted content in light blue should specify the webpage where you want the meeting calendar slots to be displayed, for example:
window.location.href = 'https://example.com/book-meeting';
With the above changes, Step 4 is now complete.
Step 5: On Outplay Scheduler Forms, create a duplicate of the HubSpot form and map it to a meeting type.
Step 6: Copy the embed code from the Meeting Type and paste it into a text or code editor.
Step 7: Add the Question Identifier to the embed code from the Meeting Type. Once added, the embed code should look like this:
<script>
(function (o, u, t, p, l, a, y, _, h, q) {
if (!o[p] || !o[p]._q) {
for (; _ < y.length;) l(a, y[_++]);
q = u.getElementsByTagName(t)[0]; h = u.createElement(t); h.async = 1;
h.src = "https://martinz.us2-stag.outplayr.com/js/build.min.js"; q.parentNode.insertBefore(h, q); o[p] = a;
}
})(window, document, "script", "outplayhq", function (g, r) {
g[r] = function () {
g._q.push([r, arguments]);
};
}, { _q: [], _v: 1 }, ["addEmbeddedForm"], 0);
outplayhq.addEmbeddedForm({
meetingSlug: '02f-d8430-043',
containerId: 'outplayMeetingContainer',
width: '670',
height: '600',
skipFormDisplay: true,
"l_name": sessionStorage.getItem('outplayHubspotForm_firstName'),
"c_text": sessionStorage.getItem('outplayHubspotForm_lastName'),
"l_email": sessionStorage.getItem('outplayHubspotForm_email'),
"l_company": sessionStorage.getItem('outplayHubspotForm_company'),
"c_text_26": sessionStorage.getItem('outplayHubspotForm_aboutus'),
});
</script>
NOTE: Please refer to the screenshot below to locate the question identifier:
With the successful connection between the Hubspot form and Outplay forms, any leads who fill out the form on your website will now be automatically added to Outplay Inbound leads.
Once a lead fills out the form, Outplay will then display the meeting booking slots, allowing your leads to easily schedule a meeting with you.