1. Home
  2. Booking & Appointment Plugin for WooCommerce
  3. Synchronize the Booking Date/s and/or Time with Google Calendar
  4. Global Level Export – Automated/Manual

Global Level Export – Automated/Manual

To setup automated export of the bookings to a Google Calendar, please follow the steps below to setup the integration. Alternatively, you can watch below video to understand how the export of the bookings to google calendar works and how you can setup on your website using Booking & Appointment Plugin for WooCommerce.

Content

  1. Google Developer’s Console
  2. Create Project
  3. Enable the Calendar API
  4. Create Credentials
  5. Create Service Account
  6. Setup the Key File Name
  7. Service Account Email Address
  8. Create Calendar
  9. Enter the Calendar ID
  10. Test the connection
  11. See Bookings in your Google Calendar
  12. Troubleshooting
  13. FAQ

Step 1: Google Developer’s Console

To use the integration to Google Calendar, go to the Google Developers Console to setup a project and enable the settings as needed.

Step 2: Create Project

Create a new project. Click on Projects->Create Project button. A popup will appear asking for Project Name and Project ID. Enter a Project Name of your preference.

Step 3: Enable the Calendar API

Once the project is created, the project folder is loaded. Go to the Library link on the left-hand menu. Choose the Calendar API.

Export Bookings from WooCommerce to Google Calendar - Calendar API
Calendar API

Click on Enable.

Step 4: Create Credentials

A notification will be displayed informing you that you may need to create credentials. Click on the Create credentials button.

Export Bookings from WooCommerce to Google Calendar - Create Credentials
Create Credentials
  • Setup Web Browser (Javascript) as the source.
  • Setup User Data as the data that will be accessed.
Export Bookings from WooCommerce to Google Calendar - Credential Setup
Credential Setup

Alternatively, go to API Manager->Project->Create Credentials. Click on Create Credentials->OAuth Client ID.

Export Bookings from WooCommerce to Google Calendar - Alternate way to create Credentials
Alternate way to create Credentials

Go to OAuth consent screen. Enter a Product Name of your preference (e.g. Bookings) and save. You can enter extra customization options.

Export Bookings from WooCommerce to Google Calendar - OAuth Consent Screen
OAuth Consent Screen

Once saved, go to Create Credentials and set the Application Type as Web Application. Enter a Name of your preference and click on Create.

Export Bookings from WooCommerce to Google Calendar - OAuth Client Creation
OAuth Client Creation

This will generate the OAuth Client.

Step 5: Create Service Account

Click on Create Credentials->Service Account Key. Set the Key Type to P12. Click on Create.

Export Bookings from WooCommerce to Google Calendar - Create Service Account Key
Create Service Account Key File

This will open a pop-up window asking to save the file. Please save the file. This file needs to be uploaded to /plugins/woocommerce-booking/includes/gcal/key/ using the FTP client program. This file is required as you will grant access to your Google Calendar account even if you are not online. So this file serves as a proof of your consent to access your Google calendar account.

Step 6: Setup the Key File Name in Booking Settings

Copy the Key File Name (excluding the .p12 extension) in Booking->Settings->Google Calendar Sync->Key File Name.

Booking Settings Key File Name
Booking Settings Key File Name

Step 7: Service Account Email Address

Go to Create Credentials->Manage Service Accounts. Copy the Service Account ID and save it in Booking->Settings->Google Calendar Sync->Service Account Email Address field.

Booking Settings Service Account Email Address
Booking Settings Service Account Email Address

Step 8: Create Calendar

Go to My Calendars->Create New Calendar. Please try to not use the Primary Calendar. Give the Calendar a name of your preference. Ensure that the Calendar Timezone matches the WordPress Timezone on your site.

In Share with specific people, enter the email address entered in Service Account Email Address field. Set the Permission Settings to Make changes to events. Click Add Person. This will ensure that the application can create new events.

Calendar Share Settings
Calendar Share Settings

Click on Create Calendar.

Step 9: Enter the Calendar ID

Once the calendar is created, copy the Calendar ID from the Calendar Settings to Booking->Settings->Google Calendar Sync->Calendar to be used.

Booking Settings Calendar ID
Booking Settings Calendar ID

Step 10: Test the connection

Save the settings in Booking->Settings->Google Calendar Sync and click the Test Connection link. This should add a current dated event in your calendar.

Export Bookings from WooCommerce to Google Calendar - Test Event
Test Event

In case if you wish to use different calendars for each of your bookable products, the steps 1 through 7 will need to be executed only once. After which you can create individual calendars and save the settings (with the corresponding Calendar ID) for each product in Products->Edit Product page->Booking->Google Calendar Sync Settings.

See Bookings in your Google Calendar

Once the settings are done, the plugin will export the bookings to the calendar as soon as an order is placed.

Export Bookings from WooCommerce to Google Calendar - Exported Booking
Exported Booking

The event will contain the order and client details based on the merge tags inserted in Booking->Settings->Google Calendar Sync->General Settings.

Export Bookings from WooCommerce to Google Calendar - Event Details
Event Details

Troubleshooting

Error: invalid_client – no application name

Export Bookings from WooCommerce to Google Calendar - Client Error
Client Error

This error can happen when trying to connect to the Google API for the first time. To solve this, go to the Google Developer Console and select your project, then go to API & auth->Consent and fill in the PRODUCT NAME field.

FAQ

1. What information about booking is sent to the Google Calendar?

When a new booking has been made on your site, the event summary and event description is created based on the settings in Booking->Settings->Google Calendar Sync->Event Summary (name) and Event Description fields.

A variety of merge tags are available. You can setup the description and summary to best suit your needs. In a scenario where no settings have been saved, the default values for both the fields are used.

2. Are bookings added to the Google Calendar automatically synced to the booking calendar on my site?

Yes, the plugin provides 2 way sync. Settings are required for import. If the import is setup at the global level i.e. Booking->Settings->Google Calendar Sync->Import Events, then the events are imported but not mapped (i.e. orders are not created and availability is not updated). Such events are listed in Booking->Import  Bookings page where they can be mapped to the desired product and the booking calendar is automatically updated.

If the import is setup at the Product level i.e in Products->Edit Product->Booking->Google Calendar Sync Settings and automated mapping is enabled, then the events are imported, orders are created and the booking calendar is updated automatically.

The frequency for import can be setup in Booking->Settings->Google Calendar Sync->Import Bookings->Run Automated Cron after X minutes.

3. Test Connection failed. What should I check first?

If you have followed all the steps above and yet the test connection has failed, the first thing to check for is the bkap-log.txt file.

If it contains a message indicating that the event could not be inserted as the calendar was not found, then the most likely reason for this could extra leading and trailing spaces in Booking->Settings->Google Calendar Sync->Calendar to be used field.

If it contains a message indicating access to the calendar was forbidden, then it could be possible that the Service Account email address permission has defaulted to ‘See all event details’ instead of ‘Manage changes to events’ in the Sharing options for the calendar.

If all of the above is set correctly and yet the events are not being created, please feel free to contact us.

4. Which ICAL feed address should be used for Import?

If the calendar is a private calendar, then please use the ICAL feed from the ‘Private Address’ field in the Calendar Settings.

If the calendar is a public calendar, then please use the ICAL feed from the ‘Calendar Address’ field in the Calendar Settings.

5. Events are imported fine. But the event summary and description on Booking->Import Bookings page is simply displayed as ‘Busy’ and ‘Available’.

This happens for a public calendar when ‘Share only my free/busy information (Hide details)’ is enabled in Calendar Settings->Share this Calendar tab.

The above-mentioned setting should be disabled for a public calendar to ensure that the plugin can import the event details as well.

Updated on June 6, 2017, by Chaitali Mehta:
General Settings & Customer Add To Calendar Button Settings of Google Calendar Sync

Let us study some of the General Settings of Google Calendar Sync that can be customized as per your requirement. These changes will be reflected in the Google Calendar for each event as it is exported whenever a booking comes in.

You need to go to Booking->Settings->Google Calendar Sync. On this page, you will find General Settings with 3 different fields as shown below.

  1. Event Location
  2. Event Summary
  3. Event Description
General Settings of Google Calendar Sync
General Settings of Google Calendar Sync

Note: After making any changes in the General Settings, click on Save Settings button.

Let us discuss how the following fields can be customized as per your requirement and where it gets reflected in the Google Calendar.

Event Location

You can enter text in Event Location field as ADDRESS and CITY placeholders which will be replaced by their real values as locations.

Event Location
Event Location

 

Real values are the values updated as Booking Details on the Checkout page by the customer while placing an order. In our example the real values are updated as shown below:

Real values of the placeholders
Real values of the placeholders

The placeholders added to the Event Location field will be reflected in your calendar as “Where” on the Event details page.

Event Location set as Where in calendar
Event Location set as Where in calendar

If this field is left blank then your website description will be sent to the location.

Event Location left blank
Event Location left blank
Website description sent to the location field
Website description sent to the location field

Event Summary

Next field under General Settings is Event Summary. You can update placeholders like

  • SITE_NAME
  • CLIENT
  • PRODUCT_NAME
  • PRODUCT_WITH_QTY
  • ORDER_DATE_TIME
  • ORDER_DATE
  • ORDER_NUMBER
  • PRICE
  • PHONE
  • NOTE
  • ADDRESS
  • EMAIL (Customer’s email address).

These placeholders will be replaced by its real values and provide you with the summary of your booking/event.

Event Summary
Event Summary

The placeholders added to this field will be reflected in your calendar as Event Title.

Event Summary set as Event Title in the calendar
Event Summary set as Event Title in the calendar

If you are a One-day tour operator operating international tours for Singapore and you have updated the placeholder as PRODUCT_NAME and ORDER_NUMBER in “Event Summary” field. Now if the customer comes to your site and adds multiple tours to his cart to book it as shown below:

Placing order for multiple products
Placing order for multiple products

Then on the same date, 2 events with different product name will be visible on the calendar as below:

2 events with different Product name
2 events with different Product name

Event Description

Lastly, you will find Event Description field under General Settings. Here you can update placeholders like

  • SITE_NAME
  • CLIENT
  • PRODUCT_NAME
  • PRODUCT_WITH_QTY
  • ORDER_DATE_TIME
  • ORDER_DATE
  • ORDER_NUMBER
  • PRICE
  • PHONE
  • NOTE
  • ADDRESS
  • EMAIL (Customer’s email address).

These placeholders will be replaced by its real values and provide you with the description of your booking/event.

Event Description
Event Description

The placeholders added to this field will be reflected in your calendar as “Description” on the Event details page.

Event Description set as Description in the calendar
Event Description set as Description in the calendar

Customer Add to Calendar button Settings

After setting General Settings of Google Calendar Sync next comes Customer Add to Calendar button Settings.

By enabling this setting, you can allow your customer to add that particular event directly to their calendar by clicking on Add to Calendar button provided to them on different pages.

We have learned in our past post how to send ICS file to the customer on Order received page or as an attachment to them in the order notification email. The ICS file can be downloaded and can be imported to their calendar to create the events.

If you don’t want to download the whole ICS file, but want only a particular event to be added directly to your customer’s calendar then the setting Customer Add to Calendar button Settings can be enabled.

To enable Add to Calendar button on different pages, you need to go to Booking->Settings->Google Calendar Sync. On this page, you will find Customer Add to Calendar button Settings where you can set Add to Calendar button to be displayed in the following different pages as shown below:

  1. Show Add to Calendar button on Order received page
  2. Show Add to Calendar button in the customer notification email
  3. Show Add to Calendar button on My account
  4. Open Calendar in the Same Window
Customer Add to Calendar button Settings
Customer Add to Calendar button Settings

Note: After enabling/disabling the above settings, click on Save Settings button.

Let us understand it one by one and see the result in different pages after enabling it.

Show Add to Calendar button on Order received page

This setting can be enabled when you want to provide Add to Calendar button to your customer on the Order received page.

Enable Show Add to Calendar button on Order received page
Enable Show Add to Calendar button on Order received page

Now as the setting is enabled, if a customer books any product from your WooCommerce store he will be provided with Add to Calendar button on the Order received page as shown below.

Add TO CALENDAR button on Order received page
Add TO CALENDAR button on Order received page

When the customer clicks on Add to Calendar button the booking gets directly added to his calendar as an event as shown in the below image.

Calendar with the booking details
Calendar with the booking details

Show Add to Calendar button in the customer notification email 

This setting can be enabled when you want to provide Add to Calendar button to your customer in the Order notification email sent to them after the order is placed.

Enable Show Add to Calendar button in the Customer notification email
Enable Show Add to Calendar button in the Customer notification email

Now as the setting is enabled, if a customer books any product from your WooCommerce store he will be provided with Add To Calendar button in the Order notification email as shown below.

Add to Calendar button in Order notification email
Add to Calendar button in Order notification email

To add the booking directly to their calendar as an event the customer can click on Add to Calendar button.

Show Add to Calendar button on My account

You can also provide Add to Calendar button on the customer’s My account page by enabling this setting as shown below.

Enable Show Add to Calendar button on My account
Enable Show Add to Calendar button on My account

After enabling this setting, if the customer books any product from your WooCommerce store he will be provided with Add To Calendar button on his My account page as shown below.

Add To Calendar button on My account page of the customer
Add To Calendar button on My account page of the customer

By clicking on this Add to Calendar button provided on My account page, he can add the booking details directly to his calendar.

Open Calendar in the Same Window

If you want that after clicking on Add to Calendar button, the calendar should be open on the same page, then you need to enable this setting. If this setting is disabled then the calendar will open in a new window.

Below we have enabled “Show Add to Calendar button in the Customer notification email” along with “Open Calendar in the Same Window”.

enabled "Show Add to Calendar button in the Customer notification email" and "Open Calendar in the Same Window"
enabled “Show Add to Calendar button in the Customer notification email” and “Open Calendar in the Same Window”

As both the setting are enabled, if a customer books any product from your WooCommerce store he will be provided with Add To Calendar button in the Order notification email. As he clicks on that button the calendar will open on the same page as shown below.

Open calendar in the same window
Open calendar in the same window

This is how both the settings of Google Calendar Sync (General Settings and displaying Add to Calendar button after the order is placed on different pages) can be set.

Was this article helpful to you? Yes 2 No 1

How can we help?