How to add an online booking system to your website?


They are a few ways to add Calendesk Online Booking System to your website.

Go to the draft list
First, please go to the list of your website drafts and select the website/calendar you would like to integrate:
https://admin.calendesk.com/en/panel/tools/websites

Click on the install button
Then, please tap on the “Install on your website” button at the builder’s top in the website builder. This will open a popup with three integrations possibilities.

Select the element that you want to add to your website
Inline Embed
Your calendar as a permanent element of the website (a frame). Your customers will see the calendar right away.
Popup Widget
A floating button at the bottom of your page that launches your booking site as a popup.
Popup Link
A text link on your website in places you want to launch your booking site as a popup.

Click “Next” and copy the code
Place the code from the popup into your HTML on your website where you want your calendar to appear.
Notice: If you want to add an Inline Embed or a Popup Link to your website in multiple places, there is no need to paste multiple times the code from the head section
If you want to have a button/link with your calendar in multiple places (a Popup Link), feel free to multiply this line:
<a href="" onclick="Calendesk.openModal({ url: 'https://your-calendar-url.calendesk.net/' });return false;">Make an appointment</a>

Selected services in your calendar
You can select which services will be visible in your calendar. Click on your calendar and from the left menu choose the “Services” option.

Another way of selecting services is by passing the parameter “services” in the calendar URL. For example, if your calendar URL is https://my-calendar.calendesk.net/
, you can replace it with the URL https://my-calendar.calendesk.net/?services=1
, where 1 is the id of the service you would like to show in your calendar. You can use multiple service ids separating them by comma, for example, https://my-calendar.calendesk.net/?services=1,2,3
.
In the same way, you can pass employee ids or a default booking date:
https://my-calendar.calendesk.net/?services=1&employees=1,2,3&date=2023-01-20
You can find service ids in the services list in the Calendesk Admin Panel. Go to the list and click the edit button.

Install your online booking system on WordPress.
If you are using WordPress, check out this article: How to add an online booking system to WordPress?, to learn how to install your calendar on WordPress.