Integration des Buchungssystems in eine bestehende Website

Es gibt drei Möglichkeiten, das Buchungssystem in eine bestehende Website zu integrieren:

Verwenden des Links zur Buchungsseite – entweder einfach als Link, als Button oder als QR-Code.
Um aus dem Link einen QR-Code zu erstellen, können Sie z.B. das kostenlose
QR Code Monkey verwenden.
Oder Sie können die Buchungsseite als iframe in Ihre eigene Website einbetten, wie hier gezeigt:
Einbetten der Buchungswebsite statt Nutzung des Links
Oder Sie fügen ein kleines JavaScript-Snippet in Ihre Website ein, das zunächst nur einen Button zeigt
und sich automatisch erweitert, wenn der Benutzer auf den Button klickt. Hier ein Beispiel:
```
<div>
   <script type="module" src="https://cdn.booking-system.app/js/v1/booking_de.js"></script>
   <booking-button url="mycompany" />
</div>
```
Und hier können Sie es ausprobieren, indem Sie auf diesen Button klicken. Sie können gerne Buchungen vornehmen – es handelt sich nur um ein Testkonto:

Gestalten der JavaScript-Buchungsseite

Mit einigen Parametern können Sie die JavaScript-Buchungsseite individueller gestalten:
- primary-color: Farbe des Hauptbuttons
- selected-color: Farbe des ausgewählen Buttons
- step-title-color: Farbe der Überschriften derSchritte
- label-color: Farbe der Labels der Eingabefelder
- more-button-text-color: Farbe des “Mehr laden”-Buttons
- more-button-border-color: Farbe der Umrandung des “Mehr laden”-Buttons
- start-expanded: Statt eines Knopfes wird sofort die Auswahl der Tage angezeigt
Also z.B. so:
```
<div>
   <script type="module" src="https://cdn.booking-system.app/js/v1/booking_de.js"></script>
   <booking-button url="mycompany" primary-color="orange" selected-color="#ff6800" start-expanded="true" />
</div>
```
Das sieht dann so aus:

Es ist auch möglich, den Bestätigungsdialog zu personalisieren:
```
<div>
   <script type="module" src="https://cdn.booking-system.app/js/v1/booking_de.js"></script>
   <booking-button url="mycompany">
      <span slot="confirmation-title" style="color: #007bff; font-size: 2em">Buchung bestätigt!</span>
      <div slot="confirmation-message">
         <p>Danke! Ein Team-Mitglied wird sich bei Ihnen melden.</p>
         <p>Wir haben Ihre Buchungsdetails per E-Mail an Sie gesendet. Bitte überprüfen Sie auch Ihren Spam-Ordner, falls Sie die E-Mail nicht finden können.</p>
         <p>Ihre Buchung wurde in unserem System erfasst und Sie erhalten 24 Stunden vor Ihrem Termin eine Erinnerung.</p>
         <small>Für Fragen oder Terminänderungen: <a href="tel:+49123456789">+49 123 456 789</a> oder <a href="mailto:termin@beispiel.de">termin@beispiel.de</a></small>
      </div>
   </booking-button>
</div>
```
Probieren Sie es einfach aus, indem Sie hier eine Testbuchung erstellen:
Buchung bestätigt!

Danke! Ein Team-Mitglied wird sich bei Ihnen melden.

Wir haben Ihre Buchungsdetails per E-Mail an Sie gesendet. Bitte überprüfen Sie auch Ihren Spam-Ordner, falls Sie die E-Mail nicht finden können.

Ihre Buchung wurde in unserem System erfasst und Sie erhalten 24 Stunden vor Ihrem Termin eine Erinnerung.
Für Fragen oder Terminänderungen: +49 123 456 789 oder termin@beispiel.de

Integration des Buchungssystems in eine bestehende Website

Gestalten der JavaScript-Buchungsseite