How to add an online booking system to your website?

Read time: 2 minutes

Share:
How to add an online booking system to your website?How to add an online booking system to your website?

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

Integrate Calendesk - popup

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

Integrate Calendesk - website drafts

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.

Integrate Calendesk - button

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.

Integrate Calendesk - 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>

Integrate Calendesk - code

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.

Integrate Calendesk - selecting services

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.

ID-service


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.

Share: