Back to contents

How to synchronize the JetBooking with the 3rd party services on the example of Google Calendar

This tutorial provides a detailed description of the way how to synchronize the JetBooking plugin with the Google Calendar.

Let’s find out how to perform the synchronization between the JetBooking plugin and the 3rt party services.
In our case, we will use the services which allow us to create a bridge between two different services.
The first one will be the JetBooking plugin itself and the second service to be connected will be the Google Calendar extension.

We are going to create a connection, so that after a user submits the specific date to book the apartment or anything else he/she can find on the website, the booked period can be automatically connected with the Google Calendar extension. It will help your users don’t forget about the forthcoming event.

So, let’s find out more about synchronization with one of the best services: Zapier
and Integromat one.

First of all, ensure you have set up a booking form. To find out how to perform it, follow the steps in our tutorial.

Synchronization with Zapier service

1 Step – Catch hook

Preparation
Proceed to the Zapier website and use your Google or Facebook login data to get access to the possibilities of this app.
If you use Zapier for the first time, choose in the window the Google Calendar option only. Close the other apps that you needn’t for your further work.

Google Calendar option only

Next, you should click on the Make a Zap button to create a new connection.
Here choose please the Webhooks by Zapier option among the other ones in Built-In Apps.

Webhook and Google Calendar relation

Choose App & Event
On the Choose App dropdown menu, you have already chosen Add (the Webhooks one).
On the Choose Trigger Event dropdown menu select the Catch Hook.
Copy the link.

Choose App & Event

Hook Customized
On the following window copy the Custom Webhook URL.
Proceed to WP Dashboard > JetEngine > Forms, find the needed one and click Edit button.
In the Notifications Settings block click the Add Notification button and edit the newly created one. Select the Call a Webhook type and in the Webhook URL field paste the one URL address you have received while creating a Zap. Apply changes and Update your form.

Booking form with a Webhook URL

After that, go to the front-end and try to perform the booking as the user do it.

Test Your Connection
Go back to the Zap settings and click Continue button on the Hook Customized screen. And you will see in the Testing Completed block a zap that you’ve set up. There will be information about pulling in the event.
You will see all the necessary information about the hook (the data will be pulled from the performed booking).

Hook Customized

2 Step – Create Detailed Event Event in Google Calendar

App & Event Selected
On this block, you should choose the Google Calendar App and on the Choose Action Event choose the Quick Add Event one.

App & Event Selected

Account Selected
On the Google Calendar Account, select your current one and click the Continue button.

Account Selected

Detailed Event Customized
On the Calendar select menu choose the current account.
Then it’s optional to fill in the following fields but we recommend to select the Use a Custom Value (advanced) option in the Time Before (Unit) field.
Also in the Start Date & Time field choose the Step 1 – Check-In Date and in the End Date & Time select the Step 1 – Check-Out Date option.

Detailed Event Customized
ATTENTION!
In your calendar the last day of the booked period won’t be displayed. It is supposed that on this day you are moving out up to the midday and the other customers are able to come in at the same day.

Test your connection
Then you will see the created connection between webhook and Google Calendar. Click Send Test button.

Test your connection

After everything is done you will see the notification as on the screen.

Now your Zap is successfully created and is ready for the usage!

Synchronization with Integromat service

Another way to create a synchronization is to use the Integromat service for this purpose.

To create an integration with an Integromat you need to login first and then click on the create a new scenario button.

Create a new scenario in Integromat

1 Step – Webhook customization

Search for the Webhooks service, click on the icon and then on the Continue button.

Webhook search

Click on the Question mark and then choose the Webhooks item and then the Custom Webhook trigger.

Custom Webhook trigger

On the following screen, you need to click on the Add button and enter the name for the Webhook and click the Save button.
After that, you will see the generated link which you should copy to the clipboard.

Webhook data structure with a link

2 Step – Settings in the Forms

Now you need to go back to WP Dashboard and proceed to the JetEngine > Forms and edit the one you need to. In the Notifications Settings you need to add the Call a Webhook notification and then add the link to the Webhook URL field.
Apply changes and Update the form.

Call a Webhook field in the Forms settings

After that, navigate to the front-end page with the form where you need to perform the booking as the clients will do it on your page – fill in all the necessary fields and click the Book now button (the names can differ).
Go back to the Integromat settings.

ATTENTION!
In your calendar the last day of the booked period won’t be displayed. It is supposed that on this day you are moving out up to the midday and the other customers are able to come in at the same day.

3 Step – Google Calendar adding

Add another module, choose the Google Calendar one and the Create an event action.

Create an event in Google Calendar

In the settings, you need to specify your current email from the Google Account in the Calendar select field.
Enter the Event name which will be displayed inside the calendar.

Settings in Google Calendar

Then in the Start date field choose the _check_in_date macros and then the End date field the _check_out_date value.

Settings in Google Calendar

After that, toggle on the scheduling and save the changes.

Ready-to-use integration

That’s it! Now you know how to create an integration with the help of Integromat to add a connection between Webhooks and Google Calendar as well as Zapier one. Choose the service that you want to and/or you are used to work with.