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

Installation du Widget

Différentes façons d'ajouter le widget SalonBookIt à votre site web.

Via CDN (Recommandé)

La façon la plus simple est de charger le widget directement depuis notre CDN :

HTML 
<!-- À la fin du body -->
<script src="https://app.salonbookit.com/static/widget/v1/salonbookit-widget.min.js"></script>
Versionnage

Le CDN sert toujours la dernière version stable. Pour fixer une version spécifique, utilisez /widget/v1.2.3/salonbookit-widget.min.js

Fichiers disponibles

Fichier Taille Description
salonbookit-widget.min.js ~25KB Script minifié (production)
salonbookit-widget.js ~50KB Script non minifié (développement)
salonbookit-widget.css ~10KB Styles (déjà inclus dans le JS)

Via NPM Prochainement

En développement

Le paquet NPM @salonbookit/widget sera disponible prochainement. Pour l'instant, utilisez le CDN ou téléchargez les fichiers.

Quand il sera disponible, vous pourrez l'installer ainsi :

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

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

Auto-hébergé

Vous pouvez télécharger le widget et l'héberger sur votre propre serveur :

  1. Téléchargez la dernière version depuis salonbookit.com/downloads/widget
  2. Extrayez les fichiers dans votre répertoire d'assets
  3. Référencez le script dans votre HTML
HTML 
<script src="/assets/js/salonbookit-widget.min.js"></script>
Mises à jour

En auto-hébergeant, vous êtes responsable de maintenir le widget à jour. Nous recommandons de vérifier les mises à jour mensuellement.

Plateformes CMS

WordPress

Ajoutez le code dans un bloc HTML personnalisé ou dans le footer du thème :

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. Allez à Settings → Custom Code
  2. Ajoutez un nouveau code personnalisé
  3. Collez le code du widget
  4. Selecciona "Body - End"

Squarespace

  1. Allez à Settings → Advanced → Code Injection
  2. Pega el código en la sección "Footer"
  3. Ajoutez un bloc HTML où vous voulez afficher le widget

Shopify

  1. Allez à Online Store → Themes → Edit Code
  2. Ouvrez theme.liquid
  3. Ajoutez le script avant </body>

Frameworks JavaScript

React

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

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

    useEffect(() => {
        // Charger le script s'il n'existe pas
        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('Réservation créée :', booking);
                }
            });
        }

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

Résolution de problèmes

Le widget n'apparaît pas

  • Vérifiez que le conteneur existe dans le DOM avant d'appeler init()
  • Vérifiez la console du navigateur pour les erreurs
  • Assurez-vous que la clé API est correcte

Erreur CORS

Assurez-vous que votre domaine est dans la liste des origines autorisées de votre clé API dans le Dashboard.

Le script ne charge pas

  • Vérifiez l'URL du CDN
  • Vérifiez qu'il n'y a pas de bloqueurs de scripts
  • Vérifiez l'onglet Network dans DevTools