Integrating the booking system into an existing website

There are three ways to integrate the booking system into an existing website:

Using the link to the booking system website either just as a link or a button or as a QR code. To create a QR code from your link you can use e.g. the free QR Code Monkey.
Or you can embed the booking system website into your own website as an iframe as shown here: Embedding the booking website instead of using the link
Or you can insert a small JavaScript snippet into your website that will start with a button and automatically extend when the user clicks the button. Here is an example:
```
<div>
   <script type="module" src="https://cdn.booking-system.app/js/v1/booking_en.js"></script>
   <booking-button url="mycompany" />
</div>
```
And here you can try it out by clicking this button. You can make bookings if you like, it is just a test account:

Styling the JavaScript booking page

The JavaScript booking page is available in multiple languages, English (booking_en.js), German (booking_de.js), French (booking_fr.js), Spanish (booking_es.js), Italian (booking_it.js), Dutch (booking_nl.js), Polish (booking_pl.js) and Turkish (booking_tr.js).

You can customize the JavaScript booking page with several parameters:
- primary-color: Color of the main button
- selected-color: Color of the selected button
- step-title-color: Color of the step headings
- label-color: Color of the input field labels
- more-button-text-color: Color of the “Load more” button
- more-button-border-color: Border color of the “Load more” button
- start-expanded: Shows the day selection immediately instead of a button
For example:
```
<div>
   <script type="module" src="https://cdn.booking-system.app/js/v1/booking_en.js"></script>
   <booking-button url="mycompany" primary-color="orange" selected-color="#ff6800" start-expanded="true" />
</div>
```
This would look like this:

It’s also possible to personalize the confirmation dialog:
```
<div>
   <script type="module" src="https://cdn.booking-system.app/js/v1/booking_en.js"></script>
   <booking-button url="mycompany">
      <span slot="confirmation-title" style="color: #007bff; font-size: 2em">Booking confirmed!</span>
      <div slot="confirmation-message">
         <p>Thank you! A team member will contact you.</p>
         <p>We have sent your booking details to your email. Please check your spam folder if you cannot find the email.</p>
         <p>Your booking has been registered in our system and you will receive a reminder 24 hours before your appointment.</p>
         <small>For questions or appointment changes: <a href="tel:+49123456789">+49 123 456 789</a> or <a href="mailto:appointment@example.com">appointment@example.com</a></small>
      </div>
   </booking-button>
</div>
```
Just try it out by making a test booking here:

Booking confirmed!

Thank you! A team member will contact you.

We have sent your booking details to your email. Please check your spam folder if you cannot find the email.

Your booking has been registered in our system and you will receive a reminder 24 hours before your appointment.
For questions or appointment changes: +49 123 456 789 or appointment@example.com

Integrating the booking system into an existing website

Styling the JavaScript booking page