Booking Widget Embed Demo

1. Inline Embed Recommended

The booking widget loads directly inside a container on your page. Perfect for dedicated booking pages or sidebars.

        <!-- Add this where you want the booking widget -->

        <div data-booking-inline="daves-garage" style="min-height:600px;"></div>

        <script src="/embed/embed.js" async></script>

Live Demo

2. Popup Widget

A floating button that opens the booking widget in a modal. Great for adding quick booking access without changing your page layout.

        <script>

          window.BookingWidget = {

            slug: 'daves-garage',

            type: 'popup-widget',

            buttonText: 'Book Now',

            buttonColor: '#3B82F6',

            position: 'bottom-right'

          };

        </script>

        <script src="/embed/embed.js" async></script>

Live Demo

Look for the floating "Book Now" button in the bottom-right corner of this page!

3. Popup Text Link

Turn any text link into a booking popup trigger. Perfect for embedding in blog posts, navigation menus, or CTAs.

        <a href="#" data-booking-popup-text="daves-garage">

          Book an appointment

        </a>

        <script src="/embed/embed.js" async></script>

Live Demo

Need to get your car serviced? Book an appointment with Dave's Garage and we'll take care of everything!

Features

Fully Responsive

Works seamlessly on desktop, tablet, and mobile devices.

Auto-Height

Inline embeds automatically adjust height based on content.

Event Callbacks

Listen for booking completion and navigation events.

Customizable

Match your brand colors and pre-select services.

JavaScript Events

Listen for booking events to integrate with your own analytics or workflows.

        // Listen for booking completion

        window.addEventListener('bookingComplete', function(e) {

          console.log('Booking confirmed!', e.detail);

          // e.detail.bookingId

          // e.detail.confirmationNumber

        });

        // Listen for navigation

        window.addEventListener('bookingNavigate', function(e) {

          console.log('Step:', e.detail.step);

          // 'services', 'time', 'details', 'confirmation'

        });

Event log (complete a booking to see events):