Embeddable booking widget

Install

Drop this anywhere you'd like a booking flow to appear — your homepage, a programs page, a per-coach bio page. Replace your-slug with your facility's slug.

<script
  src="https://app.swingops.ai/widget.js"
  data-org="your-slug"
  defer
></script>
<div id="swingops-book"></div>

Pin to a coach or lesson type

Add these attributes to scope the widget — ideal when it lives on a per-coach bio page or a specific program page. Put them on the <script> tag (they apply to every widget on the page) or on an individual data-swingops-widget container (which wins over the script-level default).

<script
  src="https://app.swingops.ai/widget.js"
  data-org="your-slug"
  data-staff="<staff-id>"
  data-lesson-type="<lesson-type-id>"
  defer
></script>
<div id="swingops-book"></div>

• data-staff — a staff member's id; pins the widget to that coach and pre-selects them. Grab the id from the end of the coach's admin page URL.
• data-lesson-type — a lesson type's id; shows only that lesson type.
• data-location — reserved for multi-location facilities; v1 books into your first location.
• data-promo — surfaces a promo code on the booking page for the customer to enter when they pay.

An unknown id is ignored — the widget falls back to your full menu rather than showing an empty picker.

Styling

The widget loads inside an isolated iframe so your site's CSS never collides with ours. The iframe's color tokens follow your facility's theme (set in /settings/branding). The host page only needs the container div; sizing adjusts to the content.

Attribution

If you arrive at the widget via a SwingOps tracking link (e.g. /{slug}/r/spring-camp-ig), the bookings made from the widget back-fill the originating link automatically. The campaign attribution revenue report joins them so you can see which promotions actually paid out.