The booking widget

The widget renders the organisation's booking flow in an iframe, sized to its content, on your own page. It is the supported way to put OPS25 booking on a site we do not host.

Add it to a page

<script src="https://book.ops25.com/widget.js" data-organisation="harbour" async></script>

The iframe is inserted where the <script> tag sits, so put the tag exactly where the form should appear. data-organisation is the organisation's booking slug.

Modes

data-mode	What renders
(omitted)	The lead-in: a short "find your bin" step that hands off to the full flow. Best on a landing or service page.
full	The complete booking form, from bin selection through to payment. Best on a dedicated Book a bin page.

<script
  src="https://book.ops25.com/widget.js"
  data-organisation="harbour"
  data-mode="full"
  async
></script>

Sizing

The iframe starts at 640px tall and then resizes itself as the customer moves through the flow. It posts a message to the parent window on every height change:

{ type: 'ops25:resize', height: 1240 }

The widget script handles this for you and clamps the result between 200px and 10000px. You do not need to listen for it — but if you are wrapping the widget in your own layout, do not put it inside a fixed-height container, or the flow will scroll inside your page instead of growing.

Campaign tracking

If the page hosting the widget has any of utm_source, utm_medium, utm_campaign, utm_term or utm_content in its query string, the widget forwards them to the booking flow, and they land on the resulting order. Nothing else is forwarded, and each value is truncated to 200 characters.

Content Security Policy

If your site sets a CSP, the widget needs:

script-src https://book.ops25.com;
frame-src  https://book.ops25.com;

What it does not do

The widget does not expose an API to the host page — you cannot prefill it, read the order back, or be notified when a booking completes. If you need any of those, say so at developers@ops25.com; they are the most likely additions.