Web Widgets
One loader script adds OnePath's widgets — the booking scheduler and chat — to your site.
<script src="https://cdn.onepath.ai/loader.js"></script>
<button data-onepath-web-scheduler-trigger>Book a service</button>
Drop the script in the document head, add a button anywhere. The loader picks up every widget enabled on your account — no per-widget scripts, no token.
Your domain must be on the account's website list
The widget loads only on URLs added under Web Scheduler → Websites in OnePath — including your staging domain. If the button does nothing, check this first (or ask whoever manages the account). Where to add it
Using a speed plugin? Safelist cdn.onepath.ai
If your site runs a performance plugin that delays, defers or combines JavaScript — NitroPack, WP Rocket, LiteSpeed Cache, Perfmatters, Flying Scripts or Cloudflare Rocket Loader — safelist the whole cdn.onepath.ai domain in it. In NitroPack that is Excluded Resources → Delayed Scripts; other plugins name the setting similarly.
Safelisting the loader tag alone is not enough. loader.js is only the starting point: while your page loads it fetches the rest of the widget — the scheduler, the chat and their shared runtime — as separate scripts from that same domain. Those are the ones these plugins rewrite or hold back.
When that happens the page looks completely normal and the button appears, but clicking it does nothing, because the scripts behind it never ran. Safelisting the domain covers the loader and everything it fetches.
Chat widget
The same loader serves chat — no extra script. If the chat channel is enabled on your account, add a trigger anywhere:
<button data-onepath-web-chat-trigger>Chat with us</button>
Open the scheduler from a form submit
The scheduler can open from your own form on submit, pre-filled with the visitor's details and the right service pre-selected. One event dispatch wires it up.
Attach context to the booking
Attach the option a visitor picked — a package, a plan, anything — to their booking. It's saved verbatim and travels with the booking: into the job summary your team reads and into the automatic follow-up if they don't finish. Add data-onepath-serviceable-type / data-onepath-service-type to also pre-select the matching service. There are three ways to set the context.
From the visible text
Mark the wrapper with a bare data-onepath-context — its visible text (minus the button label) becomes the context.
<div data-onepath-context
data-onepath-serviceable-type="Water Heater"
data-onepath-service-type="Estimate">
Better Package — 50 Gallon — $2,695
<button data-onepath-web-scheduler-trigger>Book</button>
</div>
From an explicit value
Give data-onepath-context a value to set it exactly, independent of what's on screen.
<div data-onepath-context="Better Package — 50 Gallon — $2,695"
data-onepath-serviceable-type="Water Heater"
data-onepath-service-type="Estimate">
<button data-onepath-web-scheduler-trigger>Book this package</button>
</div>
From JavaScript
Pass a context field on the open event — for buttons you wire up yourself.
document.dispatchEvent(new CustomEvent('onepath:webscheduler:open', {
detail: {
context: 'Better Package — 50 Gallon — $2,695',
serviceable_type: 'Water Heater',
service_type: 'Estimate',
},
}));
→ Full event and fields: Form-Trigger · Events
serviceable_type / service_type are optional and must match a service on the account — find them on the Service Details page. If they don't match, the visitor picks the service themselves.
What it produces
The context travels with the booking — into the job summary your team reads, and into the follow-up sent when a visitor doesn't finish.
Listen for booking events
The scheduler dispatches events when leads and appointments are created. Wire them to analytics, CRM webhooks, or post-booking redirects.
→ Events