5 Minuten
Schnellstart
Integrieren Sie das Buchungs-Widget in weniger als 5 Minuten auf Ihrer Website.
1
Ihren API-Schlüssel erhalten
Greifen Sie auf Ihr Dashboard zu, um einen API-Schlüssel zu generieren.
- Melden Sie sich an bei SalonBookIt Dashboard
- Gehen Sie zu Konfiguration → Integrationen
- Im Abschnitt API-Schlüssel, klicken Sie auf Neu generieren
- Kopieren Sie Ihren API-Schlüssel (beginnt mit
hh_pub_oderhh_sec_)
Halten Sie Ihren API-Schlüssel sicher
Ihr API-Schlüssel identifiziert Ihr Geschäft. Teilen Sie ihn nicht öffentlich und fügen Sie ihn nicht in öffentliche Repositories ein.
2
Widget zu Ihrer Website hinzufügen
Kopieren Sie den folgenden Code in Ihre HTML-Seite.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Termin buchen</title>
</head>
<body>
<h1>Buchen Sie Ihren Termin</h1>
<!-- Widget-Container -->
<div id="salonbookit-widget"></div>
<!-- Widget-Skript -->
<script src="https://app.salonbookit.com/static/widget/v1/salonbookit-widget.min.js"></script>
<script>
SalonBookIt.init({
apiKey: 'IHR_API_SCHLUESSEL_HIER',
container: '#salonbookit-widget',
theme: 'light',
locale: 'es'
});
</script>
</body>
</html>Ersetzen Sie IHR_API_SCHLUESSEL_HIER mit dem API-Schlüssel aus Schritt 1.
3
Widget anpassen
Passen Sie Farben und Verhalten an Ihre Marke an.
JavaScript
SalonBookIt.init({
apiKey: 'hh_pub_live_abc123...',
container: '#salonbookit-widget',
// Aussehen
theme: 'light', // 'light' | 'dark' | 'auto'
primaryColor: '#1a365d', // Hauptfarbe Ihrer Marke
locale: 'es', // 'es' | 'en' | 'ar'
// Anzeigemodus
mode: 'inline', // 'inline' | 'modal' | 'button'
// Service oder Fachkraft vorauswählen
serviceId: null, // ID des vorzuwählenden Services
staffId: null, // ID des vorzuwählenden Fachmanns
// Callbacks
onReady: function(business) {
console.log('Widget bereit:', business.nombre);
},
onBookingComplete: function(booking) {
console.log('Buchung erstellt:', booking);
// Hier können Sie weiterleiten oder Bestätigung anzeigen
},
onError: function(error) {
console.error('Error:', error.message);
}
});
4
Integration testen
Überprüfen Sie, ob alles richtig funktioniert.
- Öffnen Sie Ihre Seite im Browser
- Sie sollten das Widget mit Ihren Dienstleistungen sehen
- Wählen Sie einen Service, Fachkraft, Datum und Uhrzeit
- Führen Sie eine Testbuchung durch
- Überprüfen Sie, ob sie in Ihrem Dashboard erscheint
Fertig!
Sie haben jetzt das Buchungs-Widget auf Ihrer Website. Weitere Optionen finden Sie in der Konfigurationsdokumentation für weitere Optionen.