🇪🇸 Español 🇬🇧 English 🇦🇪 العربية 🇫🇷 Français 🇩🇪 Deutsch
Dashboard

Widget Installation

Different ways to add the SalonBookIt widget to your website.

Via CDN (Recommended)

The simplest way is to load the widget directly from our CDN:

HTML 
<!-- At the end of body -->
<script src="https://app.salonbookit.com/static/widget/v1/salonbookit-widget.min.js"></script>
Versioning

The CDN always serves the latest stable version. To pin a specific version, use /widget/v1.2.3/salonbookit-widget.min.js

Available files

File Size Description
salonbookit-widget.min.js ~25KB Minified script (production)
salonbookit-widget.js ~50KB Unminified script (development)
salonbookit-widget.css ~10KB Styles (already included in JS)

Via NPM Coming soon

In development

The NPM package @salonbookit/widget will be available soon. For now, use the CDN or download the files.

When available, you'll be able to install it like this:

Terminal 
npm install @salonbookit/widget
JavaScript 
import SalonBookIt from '@salonbookit/widget';

SalonBookIt.init({
    apiKey: 'YOUR_API_KEY',
    container: '#salonbookit-widget'
});

Self-hosted

You can download the widget and host it on your own server:

  1. Download the latest version from salonbookit.com/downloads/widget
  2. Extract the files to your assets directory
  3. Reference the script in your HTML
HTML 
<script src="/assets/js/salonbookit-widget.min.js"></script>
Updates

When self-hosting, you're responsible for keeping the widget updated. We recommend checking for updates monthly.

CMS Platforms

WordPress

Add the code in a custom HTML block or in the theme footer:

PHP (functions.php) 
function salonbookit_widget_scripts() {
    wp_enqueue_script(
        'salonbookit-widget',
        'https://app.salonbookit.com/static/widget/v1/salonbookit-widget.min.js',
        array(),
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'salonbookit_widget_scripts');

Wix

  1. Go to Settings → Custom Code
  2. Add a new custom code
  3. Paste the widget code
  4. Selecciona "Body - End"

Squarespace

  1. Go to Settings → Advanced → Code Injection
  2. Pega el código en la sección "Footer"
  3. Add an HTML block where you want to show the widget

Shopify

  1. Go to Online Store → Themes → Edit Code
  2. Open theme.liquid
  3. Add the script before </body>

JavaScript Frameworks

React

JSX 
import { useEffect, useRef } from 'react';

function BookingWidget({ apiKey }) {
    const containerRef = useRef(null);

    useEffect(() => {
        // Load script if it doesn't exist
        if (!window.SalonBookIt) {
            const script = document.createElement('script');
            script.src = 'https://app.salonbookit.com/static/widget/v1/salonbookit-widget.min.js';
            script.async = true;
            script.onload = () => initWidget();
            document.body.appendChild(script);
        } else {
            initWidget();
        }

        function initWidget() {
            window.SalonBookIt.init({
                apiKey: apiKey,
                container: containerRef.current,
                onBookingComplete: (booking) => {
                    console.log('Booking created:', booking);
                }
            });
        }

        return () => {
            // Cleanup if needed
        };
    }, [apiKey]);

    return <div ref={containerRef} />;
}

export default BookingWidget;

Vue.js

Vue 
<template>
  <div ref="widgetContainer"></div>
</template>

<script>
export default {
  name: 'BookingWidget',
  props: {
    apiKey: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.loadWidget();
  },
  methods: {
    loadWidget() {
      if (window.SalonBookIt) {
        this.initWidget();
      } else {
        const script = document.createElement('script');
        script.src = 'https://app.salonbookit.com/static/widget/v1/salonbookit-widget.min.js';
        script.onload = () => this.initWidget();
        document.body.appendChild(script);
      }
    },
    initWidget() {
      window.SalonBookIt.init({
        apiKey: this.apiKey,
        container: this.$refs.widgetContainer,
        onBookingComplete: (booking) => {
          this.$emit('booking-complete', booking);
        }
      });
    }
  }
}
</script>

Troubleshooting

Widget doesn't appear

  • Verify the container exists in the DOM before calling init()
  • Check the browser console for errors
  • Make sure the API Key is correct

CORS Error

Make sure your domain is in your API Key's allowed origins list in the Dashboard.

Script doesn't load

  • Verify the CDN URL
  • Check there are no script blockers
  • Check the Network tab in DevTools