Open the scheduler from a form submit

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

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

<form id="schedule-service-form">
  <input name="name"    placeholder="Name"    />
  <input name="phone"   placeholder="Phone"   />
  <input name="email"   placeholder="Email"   />
  <input name="address" placeholder="Address" />
  <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,
        email:            form.email.value,
        address:          form.address.value,
        serviceable_type: 'Water Heater',
        service_type:     'Estimate',
        context:          form.message.value,
      },
    }));
  });
</script>

Replace schedule-service-form with whatever your form is called. OnePath only listens for the onepath:webscheduler:open event; the field names in your form are up to you.

On submit, the scheduler opens with the fields pre-filled. The visitor continues from the request step. All fields are optional: dispatching with an empty detail simply opens the modal. See the event reference for each field's behavior.

Field behavior

• phone is applied only when it has at least 10 digits; shorter values are ignored. A valid phone number is looked up immediately, the same as when a visitor types it.
• name must be a full name (first and last, Jane Doe).
• address seeds the address field; the visitor still picks the matching suggestion to confirm it.
• context is free text saved verbatim on the booking. There is no notes field; put anything you want your team to read in context.

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 and addresses on file, not the ones your form collected. Names from your form only apply when there is no matching customer.

Pre-selecting a service

Pass serviceable_type and service_type to open with the matching service already selected. The values must exactly match a service configured on the account; read them off the Services page at app.onepath.ai/settings/account/service_details (for example Water Heater + Estimate). If nothing matches, the values are ignored and the visitor selects the service themselves. The same values can be set with attributes on a button instead of JavaScript: see Buttons, links & context.

Listening for the result

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

• onepath:webscheduler:appointment_created: an appointment was booked
• onepath:webscheduler:task_created: the visitor asked for a call back instead

Both fire only after a service address was captured, so a visitor who leaves on step 1 produces neither.