Setup Outplay Scheduler for Hubspot forms
Setup Outplay Scheduler for Hubspot Forms
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.
On Outplay Scheduler Forms, create a form with fields similar to the Hubspot form and map it to a meeting type.
Copy the below script and paste it in the head section.
Note: Make sure the below script is copied only once and should not be repeated when adding multiple forms in the page.
<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://us2-cx.outplayhq.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);
</script>
If you are already using Website Tracking or Chat from Engagement. The script might have already been added for all the pages. In that case just update the script by adding addEmbeddedForm as highlighted in light blue color.
Change the highlighted key “xxxxxxxxxxxxxxxxxxxxxxxx” in the script. Copy your account key which is available in Engagement -> Settings -> Chat & Website Tracking
<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://us2-cx.outplayhq.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 },\["init","addEmbeddedForm"\],0);
outplayhq.init("xxxxxxxxxxxxxxxxxxxxxxxx");
</script>
Hubspot provides two options after submitting the form which impacts the behavior of integration.
Add onFormSubmit event highlighted in green color to the Hubspot Embed Code provided for the form. The script will collect the form data and display the meeting slots. Copy the below script and paste it in the page below the form.
<br/><script>
hbspt.forms.create({
region: "na1",
portalId: "14574346",
formId: "4e2f5723-4d4a-4fcd-a14b-71a7911e5dfa",
onFormSubmit: function ($form) {
outplayhq.addEmbeddedForm({
meetingSlug: 'xxx-xxxxx-xxx',
containerId: 'hubspotFormDiv',
width: '670',
height: '600',
skipFormDisplay: true,
formFields: {
lfirstname: $form.elements\['firstname'\].value,
llastname: $form.elements\['lastname'\].value,
lemail: $form.elements\['email'\].value,_
lphone: $form.elements\['phone'\].value_
}
});
},
});
</script>
The script needs changes for every form integrated at the highlighted places.
Replace xxx-xxxxx-xxx with the meeting slug provided for the meeting in the Embed Code section for Meeting Type.
Add or update the required field identifiers highlighted in Light Red Color. Remove those which are not part of the form.
Changes highlighted in Cyan Colour are related to your Hubspot form and the containers
Provide the container id for the containerid option. Replace hubspotFormDiv with the target DIV id to display slots (Eg: DIV id)
Replace the respective form elements names (firstname) with hubspot form field names.
This requires changes in two pages. Follow the below steps to capture Hubspot form data and then display Outplay Scheduler meeting slots in the redirected page.
Add onFormSubmit event highlighted in green color to the Hubspot Embed Code provided for the form. This will get the form data and store it in the sessionStorage which will be later used in the redirected page to display slots. Copy the below script and paste it in the page below the form.
<br/><script>
hbspt.forms.create({
region: "na1",
portalId: "14574346",
formId: "4e2f5723-4d4a-4fcd-a14b-71a7911e5dfa",
onFormSubmit: function ($form) {
sessionStorage.setItem('formdataxxx-xxxxx-xxx',_
JSON.stringify({
lfirstname: $form.elements\['firstname'\].value,
llastname: $form.elements\['lastname'\].value,
lemail: $form.elements\['email'\].value,_
lphone: $form.elements\['phone'\].value_
})
);
},
});
</script>
The script needs changes for every form integrated at the highlighted places.
Replace xxx-xxxxx-xxx with the meeting slug provided for the meeting in the Embed Code section for Meeting Type.
Add or update the required field identifiers highlighted in Light Red Color. Remove those which are not part of the form.
Changes highlighted in Cyan Colour are related to your Hubspot form fields. Replace the respective form elements names (firstname) with hubspot form field names.
Embed the below script to get the form data from sessionStorage and display the meeting slots. Copy the below script and paste it in the target container.
<script>
var formdata = sessionStorage.getItem('formdataxxx-xxxxx-xxx');_
if(formdata) {
outplayhq.addEmbeddedForm({
meetingSlug: 'xxx-xxxxx-xxx',
containerId: 'targetContainerDiv',
width: '670',
height: '600',
skipFormDisplay: true,
formFields: sessionStorage.getItem('formdataxxx-xxxxx-xxx')_
});
}
</script>
The script needs changes with respect to form integrated at the highlighted places.
Replace xxx-xxxxx-xxx with the meeting slug provided for the meeting in the Embed Code section for Meeting Type.
Replace the container id for the containerid option. Replace hubspotFormDiv with the target DIV id to display slots (Eg: DIV id)
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.
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 - Create Outplay Form
On Outplay Scheduler Forms, create a form with fields similar to the Hubspot form and map it to a meeting type.
Step 2 - Copy the Common Script
Copy the below script and paste it in the head section.
Note: Make sure the below script is copied only once and should not be repeated when adding multiple forms in the page.
Case 1: Integrating only Forms
<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://us2-cx.outplayhq.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);
</script>
Case 2: Forms along with Website Tracking or Chat
If you are already using Website Tracking or Chat from Engagement. The script might have already been added for all the pages. In that case just update the script by adding addEmbeddedForm as highlighted in light blue color.
Change the highlighted key “xxxxxxxxxxxxxxxxxxxxxxxx” in the script. Copy your account key which is available in Engagement -> Settings -> Chat & Website Tracking
<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://us2-cx.outplayhq.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 },\["init","addEmbeddedForm"\],0);
outplayhq.init("xxxxxxxxxxxxxxxxxxxxxxxx");
</script>
Step 3 - Collecting Hubspot Form Data
Hubspot provides two options after submitting the form which impacts the behavior of integration.
Case 1: Hubspot Form without Page Redirection after Form submission
Add onFormSubmit event highlighted in green color to the Hubspot Embed Code provided for the form. The script will collect the form data and display the meeting slots. Copy the below script and paste it in the page below the form.
<br/><script>
hbspt.forms.create({
region: "na1",
portalId: "14574346",
formId: "4e2f5723-4d4a-4fcd-a14b-71a7911e5dfa",
onFormSubmit: function ($form) {
outplayhq.addEmbeddedForm({
meetingSlug: 'xxx-xxxxx-xxx',
containerId: 'hubspotFormDiv',
width: '670',
height: '600',
skipFormDisplay: true,
formFields: {
lfirstname: $form.elements\['firstname'\].value,
llastname: $form.elements\['lastname'\].value,
lemail: $form.elements\['email'\].value,_
lphone: $form.elements\['phone'\].value_
}
});
},
});
</script>
The script needs changes for every form integrated at the highlighted places.
Replace xxx-xxxxx-xxx with the meeting slug provided for the meeting in the Embed Code section for Meeting Type.
Add or update the required field identifiers highlighted in Light Red Color. Remove those which are not part of the form.
Changes highlighted in Cyan Colour are related to your Hubspot form and the containers
Provide the container id for the containerid option. Replace hubspotFormDiv with the target DIV id to display slots (Eg: DIV id)
Replace the respective form elements names (firstname) with hubspot form field names.
Case 2: Hubspot Form with Page Redirection after Form submission
This requires changes in two pages. Follow the below steps to capture Hubspot form data and then display Outplay Scheduler meeting slots in the redirected page.
Changes to page with Hubspot Form
Add onFormSubmit event highlighted in green color to the Hubspot Embed Code provided for the form. This will get the form data and store it in the sessionStorage which will be later used in the redirected page to display slots. Copy the below script and paste it in the page below the form.
<br/><script>
hbspt.forms.create({
region: "na1",
portalId: "14574346",
formId: "4e2f5723-4d4a-4fcd-a14b-71a7911e5dfa",
onFormSubmit: function ($form) {
sessionStorage.setItem('formdataxxx-xxxxx-xxx',_
JSON.stringify({
lfirstname: $form.elements\['firstname'\].value,
llastname: $form.elements\['lastname'\].value,
lemail: $form.elements\['email'\].value,_
lphone: $form.elements\['phone'\].value_
})
);
},
});
</script>
The script needs changes for every form integrated at the highlighted places.
Replace xxx-xxxxx-xxx with the meeting slug provided for the meeting in the Embed Code section for Meeting Type.
Add or update the required field identifiers highlighted in Light Red Color. Remove those which are not part of the form.
Changes highlighted in Cyan Colour are related to your Hubspot form fields. Replace the respective form elements names (firstname) with hubspot form field names.
Changes to destination page redirected after Hubspot Form submit
Embed the below script to get the form data from sessionStorage and display the meeting slots. Copy the below script and paste it in the target container.
<script>
var formdata = sessionStorage.getItem('formdataxxx-xxxxx-xxx');_
if(formdata) {
outplayhq.addEmbeddedForm({
meetingSlug: 'xxx-xxxxx-xxx',
containerId: 'targetContainerDiv',
width: '670',
height: '600',
skipFormDisplay: true,
formFields: sessionStorage.getItem('formdataxxx-xxxxx-xxx')_
});
}
</script>
The script needs changes with respect to form integrated at the highlighted places.
Replace xxx-xxxxx-xxx with the meeting slug provided for the meeting in the Embed Code section for Meeting Type.
Replace the container id for the containerid option. Replace hubspotFormDiv with the target DIV id to display slots (Eg: DIV id)
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.
Updated on: 28/06/2024
Thank you!