Add the widgets to your site

Where to paste the loader tag and how to add booking buttons in WordPress, Webflow, Squarespace, Wix, Google Tag Manager, and hand-coded sites.

The tag is the same everywhere. Paste it once, in the page head:

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

Add every domain you test on

The widget only renders on domains listed under Account settings → Lead Capture → Channels → Web Widgets card → Allowed websites. A root domain entry covers its subdomains, so acme.com also covers staging.acme.com. A separate staging domain, such as acme.webflow.io or acme.wpengine.com, has to be added on its own. Channels

Where to paste the tag

Builder menus move between versions; the paths below are where the head-code field typically lives.

Site builder	Paste the tag in
WordPress	A header/footer scripts plugin (the "header" or `<head>` field), or your theme's custom code area for the head
Webflow	Site settings → Custom code → Head code
Squarespace	Settings → Developer tools → Code injection → Header
Wix	Settings → Custom code → add the code to Head
Google Tag Manager	A Custom HTML tag (see the caveat below)
Plain HTML	Inside `<head>`
React / Next.js	See below

WordPress

Use a header/footer scripts plugin or the theme's own custom head code area. Paste the tag exactly once. If your theme and a plugin both offer a head field, use one of them, not both. If the site runs a caching or speed plugin, safelist cdn.onepath.ai in it: see the speed-plugin callout.

Google Tag Manager

A Custom HTML tag runs after the page has started rendering, later than a head tag would. Trigger buttons still work, because a click that happens before the widget is ready is replayed once it loads. What is lost is an onepath:webscheduler:open event your own code dispatches before the tag has executed. If you use the form trigger, prefer a direct head tag over Tag Manager. If you must stay in Tag Manager, fire the tag on Initialization or Page View, not on a later trigger.

React and Next.js

Add the tag to the HTML head, not inside a component that mounts later. In a plain React app that is typically index.html (public/index.html in Create React App). In Next.js, put it in the root layout's <head>, or use next/script with strategy="beforeInteractive" so it is injected into the head before hydration. Trigger buttons are ordinary elements with the attribute; they work when rendered later, on client-side navigation, or inside portals.

<button data-onepath-web-scheduler-trigger>Book a service</button>

Adding a booking button

Any element becomes a trigger when it carries data-onepath-web-scheduler-trigger (scheduler) or data-onepath-web-chat-trigger (chat). The attribute's value is ignored, so data-onepath-web-scheduler-trigger, ="true" and ="book" all work. Elements added after page load work too.

Site builder	How to add the attribute
Webflow	Select the button → Element settings → Custom attributes → name `data-onepath-web-scheduler-trigger`, any value
WordPress	A Custom HTML block with the `<button>` markup; or use the link method below on a normal button
Squarespace	A Code block with the `<button>` markup, or the link method below
Wix	The editor's buttons cannot carry custom attributes, and the HTML embed renders in a frame, so use the link method below on a normal button

Link method: if your builder cannot add attributes, point a normal button at #book and add this small script right after the loader tag. It opens the scheduler with the same event the form trigger uses.

<script src="https://cdn.onepath.ai/loader.js"></script>
<script>
  document.addEventListener('click', (e) => {
    if (e.target.closest('a[href="#book"]')) {
      e.preventDefault();
      document.dispatchEvent(new CustomEvent('onepath:webscheduler:open'));
    }
  });
</script>

To attach a package or pre-select a service on a button, see Buttons, links & context.

Verify it works

Open the page and open your browser's dev tools. On the Network tab, filter for onepath.
Reload. You should see a request to sdk.onepath.ai/v1/sessions.
- 200: the domain is recognized. Scripts from cdn.onepath.ai/modules/… follow it.
- 403: the domain is not on the Allowed websites list. Clicking your button shows "Onepath is not active for this website. Please contact the website owner."
- No request at all: the tag is missing, or a speed plugin held it back.
In the Console, type window.onepath.config. You should get an object with account and channels; channels.web_scheduler.enabled should be true.
Click your button. The scheduler opens as a modal (full screen on a phone). Chat opens as a panel bottom-right.
Optional: confirm events fire.

document.addEventListener('onepath:config-ready', (e) => console.log('config', e.detail));
document.addEventListener('onepath:webscheduler:appointment_created', (e) => console.log('booked', e.detail));

Complete a test booking on staging and watch for booked in the console. The Events page lists every event and its payload.

Quick Tips

✅ One tag, in the head - one loader per page, as early as possible
✅ Add the staging domain - a separate staging host needs its own Allowed websites entry
✅ Safelist cdn.onepath.ai - in any delay-JS or optimization plugin
❌ Don't add integrity to the tag - the file changes with every release and the hash would break it
❌ Don't put the button in an iframe embed - the trigger must live in the page itself

Still stuck?

Work through Troubleshooting first. Then reach out in your OnePath Slack channel or email your account manager. Include the page URL and the status of the api/public/authentication request so we can help fast.