Open the Scheduler from a Form Submit

Dispatch the onepath:webscheduler:open event to open the OnePath scheduler modal pre-filled with values from a form on your site.

<script src="https://cdn.onepath.ai/loader.js"></script>

<form id="schedule-service-form">
  <input name="name"  placeholder="Name"  />
  <input name="phone" placeholder="Phone" />
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('schedule-service-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const form = e.currentTarget;
    document.dispatchEvent(new CustomEvent('onepath:webscheduler:open', {
      detail: {
        phone: form.phone.value,
        name:  form.name.value,
        notes: form.message.value,
      },
    }));
  });
</script>

Replace schedule-service-form with whatever your form is called — OnePath only listens for the onepath:webscheduler:open event.

On submit, OnePath opens the scheduler with the three fields pre-filled. The customer continues from the request step with one click.

All fields are optional. Dispatching with an empty detail simply opens the modal. See the Events reference for each field's behavior and constraints.

Place loader.js in the document head

The dispatch will be lost if loader.js loads after the form's script. Put the script tag inside the document head, not at the bottom of the body.

<head>
  <script src="https://cdn.onepath.ai/loader.js"></script>
</head>

Existing customer behavior

If the phone you dispatch matches a customer already in OnePath's records, the scheduler loads that customer's data after the modal opens — the address step shows the name on file, not the one your form collected. Names from your form only apply when there is no matching customer.

Listening for the result

After booking, OnePath dispatches one of two events you can wire to analytics or a "thank you" redirect:

Previous
Get started
Next
Events