Popup trigger

Open the ServiceReserve booking form in a modal from any button or link on your website, with attributes to pick the form and style the trigger.

Updated Sep 30, 2026

A popup trigger turns any clickable element into a launcher for the booking form. Use your existing "Book online" button, a nav link, or anything else.

Markup

<button class="sr-booking-trigger" data-form-id="3bf957f4-4249-4662-a7e0-51e0da73313d">
  Book online
</button>
 
<script
  src="https://book.servicereserve.com/embed.js"
  defer
></script>

Integrations → Embed → Popup button has a ready-made snippet with your form's ID.

Any element with class sr-booking-trigger opens the modal on click, not just <button>. Clicks on a trigger don't follow its href, so an <a> tag works too.

Attributes

Name

Type

Description

classrequired

string

Must include `sr-booking-trigger`.

data-form-id

uuid

Form to load. Falls back to the script's `data-form-id`.

data-source

string

Source recorded on bookings from this trigger. A `?source=` parameter on the page URL overrides it.

data-profile-id

uuid

Business profile to attribute bookings to. Falls back to the script's `data-profile-id`.

Style your trigger

The script doesn't change how your trigger looks. Keep your existing styles.

The form inside the modal uses your form's branding. The modal closes when the customer clicks the close button, presses Escape, or clicks outside the form. On phones it opens full width.

Embed script

Add one script tag to your website and show the booking form inline, as a popup trigger, or as a floating button — with source attribution.

Inline embed

Render the ServiceReserve booking form directly in your page flow with a single div, and control which form loads and how wide it is.

Floating button

A corner button, like a chat widget, that opens the booking form in a modal.