Buchung und Chat in Ihre eigene Website einbinden

Sie haben bereits eine Website mit WordPress, Squarespace, Wix oder einem anderen System? Fügen Sie ein kurzes Skript hinzu, dann öffnet sich Ihr Buchungsablauf direkt über Ihren eigenen Seiten. Kunden buchen, ohne Ihre Website zu verlassen. Ein zweites Skript fügt die Schaltfläche für Ihren Live-Chat hinzu.

Das Buchungs-Widget hinzufügen

1. 1

   Schritt 1 von 3

   Das Skript hinzufügen

   Fügen Sie Folgendes vor dem schließenden body-Tag Ihrer Website ein und verwenden Sie dabei Ihre eigene primäre Adresse:

   <script src="https://hairhaven.onsoftalon.com/embeds/booking.js"></script>
   

   Verwenden Sie in der Skriptadresse Ihre primäre Domain. Ihre anderen Adressen leiten auf die primäre weiter, und das Widget hört nur auf die Adresse, von der es geladen wurde. Stimmen die Adressen nicht überein, schließt sich das Widget nicht richtig und meldet Buchungen nicht korrekt.

2. 2

   Schritt 2 von 3

   Eine Schaltfläche hinzufügen

   Geben Sie einer beliebigen Schaltfläche oder einem Link die Klasse softalon-booking-trigger:

   <button class="softalon-booking-trigger">Book Now</button>
   

   Sie können auch das Attribut data-softalon-booking-trigger oder die ID softalon-booking-trigger verwenden.

3. 3

   Schritt 3 von 3

   Testen

   Veröffentlichen Sie Ihre Seite und klicken Sie auf die Schaltfläche.

   Das sehen Sie:

   Ihr Buchungsablauf gleitet von der rechten Seite herein. Auf Smartphones füllt er den Bildschirm.

Einen Standort, eine Dienstleistung oder einen Mitarbeiter vorab auswählen

Fügen Sie einer Schaltfläche diese Attribute hinzu, um Schritte im Buchungsablauf zu überspringen:

<button class="softalon-booking-trigger" data-service-id="SERVICE_ID">
    Book a haircut
</button>

Um eine ID zu finden, öffnen Sie in Softalon die Teilen-Option der jeweiligen Dienstleistung, des Standorts oder des Mitarbeiters und kopieren Sie den vollständigen Buchungs-Link. Die IDs stehen im Link nach serviceId=, locationId= und memberId=. Siehe Ihren Buchungs-Link teilen.

Festlegen, wie sich das Widget öffnet

Legen Sie die Variante pro Schaltfläche mit data-variant fest oder für die ganze Seite mit data-variant am Script-Tag:

<script src="https://hairhaven.onsoftalon.com/embeds/booking.js" data-variant="dialog"></script>

Kunden können das Widget mit der Escape-Taste schließen. Bei sheet schließt es sich auch durch einen Klick auf den dunklen Hintergrund.

Das Widget mit JavaScript steuern

Wenn Sie eigenen Code schreiben, stellt das Skript window.$softalon.booking bereit:

window.$softalon.booking.init({
    variant: "sheet",
    params: { locationId: "LOCATION_ID", serviceId: "SERVICE_ID" },
});

window.$softalon.booking.onCompleted(function (data) {
    // The client finished booking
});

window.$softalon.booking.open();

Live-Chat hinzufügen

Wenn Ihr Tarif den KI-Assistenten enthält und der Live-Chat aktiviert ist, fügen Sie das Chat-Skript hinzu. Dann erscheint eine Chat-Schaltfläche in der Ecke Ihrer Website:

<script src="https://hairhaven.onsoftalon.com/embeds/chat.js"></script>

• Um die Schaltfläche links anzuzeigen, fügen Sie dem Script-Tag data-position="left" hinzu.
• Um den Chat über eine eigene Schaltfläche zu öffnen, geben Sie ihr die Klasse softalon-chat-trigger oder das Attribut data-softalon-chat-trigger.

Ist der Live-Chat deaktiviert oder in Ihrem Tarif nicht enthalten, zeigt das Chat-Skript nichts an. Siehe Live-Chat auf Ihrer Buchungsseite aktivieren.

Das Chat-Skript stellt außerdem window.$softalon.chat bereit, mit open(), close(), isOpen(), hide(), show(), onSessionStarted(callback) und onMessageReceived(callback).