Dashboard

Instalacion del Widget

Diferentes formas de añadir el widget de SalonBookIt a tu sitio web.

Via CDN (Recomendado)

La forma mas sencilla es cargar el widget directamente desde nuestro CDN:

HTML 
<!-- Al final del body -->
<script src="https://app.salonbookit.com/static/widget/v1/salonbookit-widget.min.js"></script>
Versionado

El CDN siempre sirve la ultima version estable. Para fijar una version especifica, usa /widget/v1.2.3/salonbookit-widget.min.js

Archivos disponibles

Archivo Tamaño Descripcion
salonbookit-widget.min.js ~45KB Script minificado (produccion)
salonbookit-widget.js ~120KB Script sin minificar (desarrollo)
salonbookit-widget.css ~15KB Estilos (ya incluidos en el JS)

Via NPM

Si usas un bundler como Webpack, Vite o Rollup:

Terminal 
npm install @salonbookit/widget

Luego importalo en tu codigo:

JavaScript 
import SalonBookIt from '@salonbookit/widget';

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

El paquete NPM estara disponible en Q1 2026. Por ahora, usa el CDN.

Auto-alojado

Puedes descargar el widget y alojarlo en tu propio servidor:

  1. Descarga la ultima version desde salonbookit.com/downloads/widget
  2. Extrae los archivos en tu directorio de assets
  3. Referencia el script en tu HTML
HTML 
<script src="/assets/js/salonbookit-widget.min.js"></script>
Actualizaciones

Al auto-alojar, eres responsable de mantener el widget actualizado. Recomendamos revisar las actualizaciones mensualmente.

Plataformas CMS

WordPress

Añade el codigo en un bloque HTML personalizado o en el footer del tema:

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. Ve a Settings → Custom Code
  2. Añade un nuevo codigo personalizado
  3. Pega el codigo del widget
  4. Selecciona "Body - End"

Squarespace

  1. Ve a Settings → Advanced → Code Injection
  2. Pega el codigo en la seccion "Footer"
  3. Añade un bloque HTML donde quieras mostrar el widget

Shopify

  1. Ve a Online Store → Themes → Edit Code
  2. Abre theme.liquid
  3. Añade el script antes de </body>

Frameworks JavaScript

React

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

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

    useEffect(() => {
        // Cargar el script si no existe
        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('Reserva creada:', booking);
                }
            });
        }

        return () => {
            // Cleanup si es necesario
        };
    }, [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>

Solucion de problemas

El widget no aparece

  • Verifica que el contenedor existe en el DOM antes de llamar a init()
  • Comprueba la consola del navegador para errores
  • Asegurate de que la API Key es correcta

Error de CORS

Asegurate de que tu dominio esta en la lista de origenes permitidos de tu API Key en el Dashboard.

El script no carga

  • Verifica la URL del CDN
  • Comprueba que no hay bloqueadores de scripts
  • Revisa la pestaña Network en DevTools