How to integrate jetappointments with google calendar using integromat

*Disclosure: I only recommend products I would use myself and all opinions expressed here are my own. This post contains affiliate links that at no additional cost to you, I may earn a small commission.

I couldn’t find a tutorial that laid out these steps and as crocoblock does not yet provide a “sync with google calendar” option with their JetAppointment plugin* I thought I’d put a quick tutorial together.

Please bare with me as this is the first tutorial I’ve put online! I used to create processes in my previous office admin jobs and they seemed to work for training purposes so I hope this helps you out.

I’ve chosen to use Integromat for this purpose as I found Zapier’s pricing structure unfair for testing/low use purposes. If you prefer to use Zapier I’m sure there are other tutorials out there that will serve the same purpose.

What you will need

To complete this tutorial you will need the crocoblock JetAppointments plugin*, JetEngine plugin*, a free account with Integromat (cost may be incurred based on how many connections are sent through integromat, however I have only used this on a staging site so I cannot say when that will apply, take a look at their pricing structure for more information), and a google calendar account (I created a calendar specifically for work).

The assumptions I am making in this tutorial are that you have already set up your JetAppointments Plugin and your form with the JetEngine Plugin. If not please complete those steps before following this tutorial, Crocoblock has tutorials on how to set these up:

JetAppointment: Wizard Setup

JetAppointment: How to Set Appointment Booking Forms

Step 1 - Creating a webhook with Integromat

Once you have created your Integromat account go to your dashboard and click on “Create a new scenario

Search for “Webhooks” click on the webhooks button and click continue.

Click on the Webhooks icon – TRIGGERS will appear, click on “Custom Webhook

On the webhooks module that appears, press the “Add” button, give your webhook a name and click “Save“.

After you click save a link will be generated, copy this address to the clipboard.

Step 2 - JetAppointment Form Settings

You now need to navigate to your WordPress dashboard -> JetEngine -> Forms.

Locate the form you are using with the JetAppointment plugin click on “edit” and in the Post-submit Actions / Notifications Settings block, click “Add Notification” and select “Call a Webhook“. Paste the link you copied in Step 1 into the Webhook URL field. Select “Apply Changes” and “Update”.

After you have saved your changes go back to your Integromat webhook and click on “Re-determine Data Structure” this will start to listen for data. Navigate to your forms front end and submit an Appointment, this will send the data structure from the form to Integromat.

If you followed the above steps correctly the webhook should now show “Succesfully Determined”

Step 3 - Connecting your Webhook to Google Calendar

Click “OK” to close your Webhooks window and choose “Add another module” search for Google or Calendar, select “Google Calendar” and then “Create an Event“.

You will need to link your Google account with Integromat you do this by choosing “Add” in the connection box, and then “Continue” where you will get a popup asking you to authorise Integromat.

Further info on this can be found on Integromat’s Connecting to services guide.

Once this is connected you can choose the calendar you want to sync events with (I created one specifically for work) under “Calendar ID

Step 4 - Formatting your Webhook data - Event Name

UPDATED 13/12/2021

Now we are ready to format the data coming through the Webhook, starting with the “Event Name” (in this example the services available through my appointment form are pet sitting services) I want to show the customer name, the name of the Service, and the start and end time on my calendar event.

When you click into the Event Name field you will see the available data from the Custom Webhook. Depending on how you set up your JetAppointments Plugin you may have more or less items than in the example below.

In the Crocoblock knowledge base there is a tutorial to follow using an iterator for this step, but when I added an iterator nothing happened and the data already seems to be available in a readable format so I have not used an iterator. If this tutorial does not work for you, you might need to use the Crocoblock tutorial*.

*Disclaimer: When I originally created this tutorial the crocoblock tutorial did not exist and the data from the webhook came through differently.

Crocoblock have updated the way the data comes through in the webhook which makes this much, much easier than it previously was, previously you needed to use if statements to determine the name of a service based on the post ID for the service – now you just need to choose name (to pull in the customer name) and serviceTitle (to pull in the title of the service they are booking) and friendlyTime (to pull in the start and end time) from under the appointment_date_new drop down.

Step 5 - Formatting your Webhook data - Event Start & End Time

UPDATED 13/12/2021

Again as the way the data comes through has changed since writing this blog post, it is much more simple to input the start and end date.

Simply click into the “Start Date” field and paste the below code. You’ll see that the field chosen (slot) is from the appointment_date_new drop down.

Crocoblock mentions in their tutorial the reason for the X is “X is the Unix timestamp (the date format of the input).

You can read more about tokens for parsing in the integromat Tokens for date/time parsing article.

				
					{{parseDate(1.appointment_date_new.slot; "X")}}
				
			

For the End Date click into the “End Date” field and paste the below code. You’ll see that the field chosen (slotEnd) is from the appointment_date_new drop down.

				
					{{parseDate(1.appointment_date_new.slotEnd; "X")}}
				
			

Finally I add in any details I want to the Description field from the available webhook data. The description will show on the calendar event so I like to include contact details for the customer.

Step 6 - Testing

Once you have set up the fields as above you can test that your scenario works. Click “OK” on the Google Calendar module then click on “Run Once“, navigate to your front end JetAppointment form and submit an appointment. If everything was entered correctly you should see the event appear in your google calendar (sometimes there may be a 5 or 10 minute delay in this appearing so be patient).

You can click on the scheduling button at the bottom left of your screen and choose when you want the scenario to run.

Finally click on the save icon in the “Controls” section at the bottom of the screen.

If anything doesn’t work as expected please feel free to email me or leave a comment below and I’ll see if I can troubleshoot for you.

Just a disclaimer I am not an expert so I might not be able to help with anything too advanced!

*Disclosure: I only recommend products I would use myself and all opinions expressed here are my own. This post contains affiliate links that at no additional cost to you, I may earn a small commission.

6 Comments

  1. Joseph

    June 18, 2021 at 7:44 am

    Thank you for this tutorial. It has helped me great deal.

    Integromat’s time format is quite sensitive. For those who messed around with the time format in WordPress settings > general > date format, June 18, 2021 F j, Y time format > 13:04 H:i worked for me.

    Thanks again.

    Reply
    • Cat

      June 18, 2021 at 10:30 am

      Thank you Joseph, I’m glad it helped!
      I didn’t realise that changing the date format on WordPress changed the data that JetAppointments sent – if you have a different date format you will have to edit the ParseDate formula accordingly. I’ll edit Step 5 to make it clearer, thank you!

      Reply
  2. Mili

    July 6, 2021 at 8:39 pm

    Hi Cat! Are the available appointments reflective of availabilities on google calendar?

    Reply
    • Cat

      July 12, 2021 at 3:01 pm

      Hi Mili, unfortunately not but that is a JetAppointments issue and there are a couple of threads open on their github where this has been requested but I’m not sure if it’s coming any time soon.
      There may be a way to set this up with some advanced knowledge of Integromat and webhooks but it’s not something in my toolbelt!

      Reply
  3. Prabu R

    December 13, 2021 at 12:07 pm

    Hello, does this tutorial operate two way sync with Google calendar and crocoblock?

    Reply
    • Cat

      December 13, 2021 at 4:34 pm

      Hi Prabu,
      Unfortunately not but that is a JetAppointments issue and there are a couple of threads open on their GitHub (specifically issue 3517) where this has been requested but I’m not sure if it’s coming any time soon. With some advanced knowledge of Integromat and webhooks this may be possible but it’s not something in my toolbelt!

      Reply

Leave a Reply

Your email address will not be published.

Table of Contents

Related Posts