Setup Outplay Scheduler for Native Forms

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

Firstly, get the required script to embed in the page from Scheduler > Meeting Type >  Embed Code . The script contains 2 parts.
Common Script
Form Embed Script



NOTE_: Make sure the common script is copied only once and should not be repeated when adding multiple forms in the page._

Case 1: Integrating only Forms

Copy the required script and paste it in the head section as shown in below image.

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 shown in below image (Marked in red color).



If you have not changed the account key earlier, change the highlighted key “xxxxxxxxxxxxxxxxxxxxxxxx” in the script (Marked in yellow color). Copy your account key which is available in Engagement > Settings >  Chat & Website Tracking

Step 3: Collecting Native 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 Light Red color. Remove those which are not part of the form.


Changes highlighted in Cyan color 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.
Replace the respective form elements names (Ex: firstName). The names change according to the form configured.



With the above changes we can successfully connect 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.

Updated on: 21/10/2024