Floating button

The floating button stays pinned to a bottom corner of the screen while the customer scrolls. Clicking it opens the booking form in a modal.

It's a popup trigger with fixed-position styles: a <button class="sr-booking-trigger"> that you paste into your page. The embed script doesn't draw it for you.

Create the button

1. 1

   Open the Embed page

   In the sidebar, under Integrations, click Embed. Pick your form in the Form dropdown.

2. 2

   Install the script

   Under Step 1 — Install the widget, click Copy snippet and paste the script into your site's <head>.

3. 3

   Customize the button

   Scroll to Floating button and set the options. The preview and the code update as you type.

   

4. 4

   Paste the button

   Click Copy snippet under the preview and paste the button into your page template, so it shows on every page.

Options

• Position: Bottom-right (default) or Bottom-left.
• Label: the button text. The default is "Book Now".
• Radius (px): corner rounding, from 0 to 40.
• Background color and Text color: the defaults are blue and white.

The options are baked into the snippet as inline styles. They aren't saved in your account. To change the button later, set the options again, copy the new snippet, and replace the old one on your site.

Example

<button class="sr-booking-trigger"
  data-form-id="3bf957f4-4249-4662-a7e0-51e0da73313d"
  style="position:fixed;bottom:20px;right: 20px;z-index:9999;background:#2563eb;color:#ffffff;padding:14px 22px;border:0;border-radius:10px;font-size:15px;font-weight:500;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.18);">
  Book Now
</button>