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

Instalación del Widget

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

Vía CDN (Recomendado)

La forma más 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 última versión estable. Para fijar una versión específica, usa /widget/v1.2.3/salonbookit-widget.min.js

Archivos disponibles

Archivo Tamaño Descripción
salonbookit-widget.min.js ~25KB Script minificado (producción)
salonbookit-widget.js ~50KB Script sin minificar (desarrollo)
salonbookit-widget.css ~10KB Estilos (ya incluidos en el JS)

Vía NPM Próximamente

En desarrollo

El paquete NPM @salonbookit/widget estará disponible próximamente. Por ahora, usa el CDN o descarga los archivos.

Cuando esté disponible, podrás instalarlo así:

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

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

Auto-alojado

Puedes descargar el widget y alojarlo en tu propio servidor:

  1. Descarga la última versión 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 código 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 código personalizado
  3. Pega el código del widget
  4. Selecciona "Body - End"

Squarespace

  1. Ve a Settings → Advanced → Code Injection
  2. Pega el código en la sección "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>

Solución 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
  • Asegúrate de que la API Key es correcta

Error de CORS

Asegúrate de que tu dominio está en la lista de orígenes 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