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.

Updated Sep 30, 2026

An inline embed renders the form where you place it. Use it on a dedicated booking page, a homepage section, or a service page.

Markup

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

Copy both snippets from Integrations → Embed. The inline one is under Inline.

The script mounts the form inside every element with class sr-booking-inline. Elements added to the page later, for example after a route change in a single-page app, are picked up automatically. The form's height grows with its content, so there are no scrollbars.

Attributes

Name

Type

Description

classrequired

string

Must include `sr-booking-inline`.

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 mount. 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`.

Width

With the default Fixed body layout, the form is a centered card up to 440px wide. A wider container doesn't make the card wider. To fill the container, open the form's Appearance tab and set Branding → Advanced → Body layout to Fluid. See Branding.

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.

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.