Embedding the Booking Widget on Your Website

The Slotsy widget allows you to add a booking form directly to your website. Visitors can book appointments without leaving your site. The widget supports three display modes.

Display Modes

Quick Start — Data Attributes

The simplest way to add the widget is with a single <script> tag:

<script src="https://your-domain.com/widget/widget.js"
        data-company="your-company-slug"
        data-mode="floating"
        data-color="#6366f1"
        data-locale="en">
</script>

No additional JavaScript is needed — the widget initializes automatically.

Inline Mode

Embed the booking form in a container on your page:

<div id="slotsy-booking"></div>
<script src="https://your-domain.com/widget/widget.js"></script>
<script>
  Slotsy.init({
    company: 'your-company-slug',
    mode: 'inline',
    container: '#slotsy-booking',
    locale: 'en',
  });
</script>

Popup Mode

Show the widget in a modal when a button is clicked:

<button id="book-btn">Book Now</button>
<script src="https://your-domain.com/widget/widget.js"></script>
<script>
  Slotsy.init({
    company: 'your-company-slug',
    mode: 'popup',
    triggerSelector: '#book-btn',
  });
</script>

Press Escape or click outside the modal to close it.

Floating Button Mode

A circular button appears in the corner of the page. Clicking it opens a slide-up panel:

<script src="https://your-domain.com/widget/widget.js"></script>
<script>
  Slotsy.init({
    company: 'your-company-slug',
    mode: 'floating',
    position: 'bottom-right',
    buttonColor: '#6366f1',
  });
</script>

Configuration Options

Tracking Events

Listen for widget events to track conversions:

Slotsy.on('booking:created', function(data) {
  console.log('Booking created:', data.bookingId);
});

Tip: Use Slotsy.on('booking:created', ...) to send conversion events to Google Analytics or Facebook Pixel.

Related

• Booking Flow — How the booking process works