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

Widget-Installation

Verschiedene Möglichkeiten, das SalonBookIt-Widget zu Ihrer Website hinzuzufügen.

Via CDN (Empfohlen)

Der einfachste Weg ist, das Widget direkt von unserem CDN zu laden:

HTML 
<!-- Am Ende des Body -->
<script src="https://app.salonbookit.com/static/widget/v1/salonbookit-widget.min.js"></script>
Versionierung

Das CDN liefert immer die neueste stabile Version. Um eine bestimmte Version festzulegen, verwenden Sie /widget/v1.2.3/salonbookit-widget.min.js

Verfügbare Dateien

Datei Größe Beschreibung
salonbookit-widget.min.js ~25KB Minifiziertes Script (Produktion)
salonbookit-widget.js ~50KB Nicht-minifiziertes Script (Entwicklung)
salonbookit-widget.css ~10KB Stile (bereits im JS enthalten)

Via NPM Demnächst

In Entwicklung

Das NPM-Paket @salonbookit/widget wird in Kürze verfügbar sein. Verwenden Sie vorerst das CDN oder laden Sie die Dateien herunter.

Wenn verfügbar, können Sie es so installieren:

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

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

Selbst gehostet

Sie können das Widget herunterladen und auf Ihrem eigenen Server hosten:

  1. Laden Sie die neueste Version herunter von salonbookit.com/downloads/widget
  2. Extrahieren Sie die Dateien in Ihr Assets-Verzeichnis
  3. Referenzieren Sie das Script in Ihrem HTML
HTML 
<script src="/assets/js/salonbookit-widget.min.js"></script>
Updates

Beim Selbst-Hosten sind Sie dafür verantwortlich, das Widget aktuell zu halten. Wir empfehlen, monatlich nach Updates zu suchen.

CMS-Plattformen

WordPress

Fügen Sie den Code in einem benutzerdefinierten HTML-Block oder im Theme-Footer hinzu:

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. Gehen Sie zu Settings → Custom Code
  2. Fügen Sie einen neuen benutzerdefinierten Code hinzu
  3. Fügen Sie den Widget-Code ein
  4. Selecciona "Body - End"

Squarespace

  1. Gehen Sie zu Settings → Advanced → Code Injection
  2. Pega el código en la sección "Footer"
  3. Fügen Sie einen HTML-Block hinzu, wo Sie das Widget anzeigen möchten

Shopify

  1. Gehen Sie zu Online Store → Themes → Edit Code
  2. Öffnen Sie theme.liquid
  3. Fügen Sie das Script hinzu vor </body>

JavaScript-Frameworks

React

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

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

    useEffect(() => {
        // Script laden, wenn es nicht existiert
        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('Buchung erstellt:', booking);
                }
            });
        }

        return () => {
            // Cleanup falls erforderlich
        };
    }, [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>

Problemlösung

Das Widget erscheint nicht

  • Überprüfen Sie, dass der Container im DOM existiert, bevor Sie aufrufen init()
  • Überprüfen Sie die Browser-Konsole auf Fehler
  • Stellen Sie sicher, dass der API-Schlüssel korrekt ist

CORS-Fehler

Stellen Sie sicher, dass Ihre Domain in der Liste der erlaubten Ursprünge Ihres API-Schlüssels im Dashboard ist.

Das Script lädt nicht

  • Überprüfen Sie die CDN-URL
  • Überprüfen Sie, dass keine Script-Blocker aktiv sind
  • Überprüfen Sie den Network-Tab in DevTools