Learn how to get leads from Native 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 Native forms and show the meeting calendar from Outplay.
Step 1: Create an Outplay Form
On Outplay Scheduler Forms, create a form with fields similar to the Native form and map it to a meeting type. Click here to read more.
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
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
Embed the below script to collect the form data and display the meeting slots. Copy the below script and paste it in the page below the form.
<script>
document.querySelector("#myForm").addEventListener("submit", function(e){
e.preventDefault(); //stops further actions on formsubmit
const myform = e.target;
outplayhq.addEmbeddedForm({
meetingSlug: 'xxx-xxxxx-xxx',
containerId: 'nativeformdiv',
width: '670',
height: '600',
skipFormDisplay: true,
formFields: {
l_first_name: myform.elements['firstName'].value,
l_last_name: myform.elements['lastName'].value,
l_email: myform.elements['email'].value,
l_phone: myform.elements['phone'].value,
l_company: myform.elements['company'].value
}
});
//hide the form after submitting
myform.style.display = "none";
});
</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 red. Remove those which are not part of the form.
- Changes highlighted in cyan are related to your Native form and the containers
- The first line of the script contains the Form Id myForm. This has to be replaced with your form id.
- Next you have to provide the container id for the containerid option. Replace nativeformdiv with the target DIV id to display slots (Eg: DIV id)
- Replace the respective form elements names (firstName). The names change according to the form configured.
With the successful connection between the Native 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.