How do I add the booking function to my website?
In this tutorial we will show you how easy it is to add online booking functionality for meetings, appointments or any event you schedule with TuCalendi to your website.
There are several ways to integrate the TuCalendi functionality into your website:
- Include a link on your website to the booking page.
This is the simplest option, linking any element of your website to your personal TuCalendi online booking page.
- Include a booking button on a page of your website.
This option consists of adding a button in a position on your contact page or on any other page within your website.
- Include a booking button on every page of your website.
In this case, the booking button is placed as a "floating button" in the same place on all pages (bottom right).
The advantage of this option is that your page visitors see the booking button immediately and can make their booking from any page.
- Display the booking page as an inline calendar on your website.
In this case, the TuCalendi online booking function is displayed as a window in a fixed position on a page of your website.
Option 1: Link to the booking page
From your website's content management system, create any item or in any word or phrase in the content add a link to your TuCalendi booking page.
To find the link to your calendars or any event you have created in TuCalendi follow the steps below.
Log in to your TuCalendi account with your username and password. Go to the "Calendars" option.
Click on "Copy link" and then paste via your content manager, into the element of your website that you want to link to the event.
Option 2: Button on a page of your website
You can install a button linking to the TuCalendi online booking system anywhere on one or more pages of your website. For example, you could include the button on the "Contact" page of your website.
To place a button linking to your calendars or any of your events you have created in TuCalendi follow the steps below.
Log into your TuCalendi account with your username and password and go to the "Calendars" option.
Click on the three dots in the block of the event for which you want to create the button:
Click on the "Integration Code" option:
In the "Button" block click on "Select":
You don't need to know programming, just configure how you want the button to be displayed. Copy the code shown in the "Embed code" block, paste it in the place and page of your website where you want to have it. For this you need to use the content manager of your website.
Option 3: Floating button on all pages of your website
With the option of a floating button on all pages of your website, you will get that the button is always displayed at the bottom right of all pages of your website, so that your visitors and customers can make a reservation with you or your team from any page.
The process is the same as described in Option 2, but in this case you must do the following:
When you have entered the button configuration option. Go to the "Button settings" block and under "Button type" choose "Floating button". The code will be changed so that this type of button is created.
Then copy the code found in the "Embed code" block.
Finally, you will need to paste the code, using your website's content manager, into the head of your website's source code, i.e. just before the </head> tag.
Option 4: As an inline calendar on a page of your website
With this option, the TuCalendi solution is integrated as a window in a fixed and specific position on the page of your choice on your website.
This process is also very simple. We have made it so that it can be done without any technical knowledge.
Log in to your TuCalendi account with your username and password and go to the "Calendars" option.
Click on the three dots in the block of the event for which you want to create an inline calendar:
Click on the "Integration Code" option:
In the "Inline Calendar" block click "Select":
Copy the code shown in the "Embed code" block, paste it in the exact place and page of your website where you want to have it. For this you need to use the content manager of your website although it is not necessary to know programming.