Google Calendar Integration

Step 1: Google Developers Console ↑ Back to top

To use this integration, go to the Google Developers Console.

Step 2: Create Project ↑ Back to top

Go to: Projects > Create Project button. A popup should appear and ask for Project Name and Project ID. Enter your preferences.

Step 3: Enable the Calendar API ↑ Back to top

Once the project has been created, select your project from the top left dropdown. Choose the Google Calendar API.

Then click on Enable.

Step 4: Create Credentials ↑ Back to top

This will prompt you to first create credentials. Select Go to Credentials.

 

Alternate Method: Go directly to the API Manager > Project > Credentials page. There, select Create credentials and click on OAuth Client ID.

googlecalbookings-credentialcreation

Step 5: Set Up New Credentials ↑ Back to top

  • Under “Which API are you using?” select “Google Calendar API”.
  • Under “Where will you be calling the API from ?” select “Web browser (Javascript)”
  • Under “What data will you be accessing?” select “User data”
  • Then click on the button that says “What credentials do I need?”
  • Add a name for the project
  • Under “Authorized JavaScript Origins” leave that blank.
  • Enter http://example.com/wc-api/wc_bookings_google_calendar/ as the Authorized Redirect URI with example.com being the URL of your web store
  • Finally click on “Create oAuth Client ID” button


Step 6: Set up your OAuth 2.0 Consent screen ↑ Back to top

  • Your email address is already selected
  • Enter a Product name shown to users
  • You can also enter extra customization options
  • Click “Save”

Step 7: Add Credentials to your website ↑ Back to top

You access these by going to the API > Credentials page after having created them.

  1. Click on the name of the credentials to open them.
  2. Copy the Client ID and Client Secret.
  3. Enter each of these in your store under Bookings > Settings > Calendar Connection.

Alternate Method: Download the credentials and open the .json file to access them. In the file, you’ll find several things, but these two are needed for the Bookings integration:

  • client_id
  • client_secret

Step 8: Get Calender ID ↑ Back to top

Create the calendar you will use in Google Calendar, if you haven’t already.

Then navigate to My Calendars on the left, hover over the calendar name to reveal the Options menu.

Hover over title to reveal calendar options menu

Select Settings and Sharing

Select Settings and Sharing from the calendar Options menu

In Settings and Sharing, scroll down to the section called Integrate calendar.

Copy the Calendar ID (which should look something like this 6oxscoxxxxxxiiuxxs@group.calendar.google.com).

 

Copy the Calendar ID from the Integrate calendar section

 

Go to: Bookings > Settings > Calendar Connection, and enter the Calendar ID.

Finally, select Save changes.

Step 9: Authorize with Google ↑ Back to top

Once you’ve entered your credentials and saved your settings, click the “Connect” button to authorize your account and calendar with Google. You should see a message saying “Successfully authenticated”.

Set Sync Preference ↑ Back to top

Calendar synchronization can be set up to sync one way or to sync two ways between the store and Google calendar.

To manage this setting go to Bookings > Settings > Calendar Connection and select a Sync Preference from the dropdown, and select Save changes.

With  Sync one way selected:

  • Bookings created in the store will be pushed to the connected Google calendar where they can be viewed.

With Sync both ways selected:

  • Bookings created in the store will be pushed to the connected Google calendar where they can be viewed (just as they are with Sync one way selected).
  • Events created in the connected Google calendar will be pulled into the store’s Global Availability rules, where they will block the availability for all bookable products for the duration of the events. This is useful for when a store owner will not be available during an event (e.g. a dentist appointment) and wishes to create such an event on the connected Google calendar so that no bookings can be created during the event.

See Bookings in your Google Calendar ↑ Back to top

Now that you’ve finished the configuration, you will be able to see new Bookings in your Google calendar.

googlecalbookings-calview

The individual booking will show the duration and the order ID.

googlecalbookings-eventview

Troubleshooting ↑ Back to top

Error: invalid_client – no application name ↑ Back to top

google-calendar-401-error

This error can happen when trying to connect to the Google API at 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.

404 Error ↑ Back to top

Double check your Calendar ID (Calendar Address) has been entered correctly. You need to copy everything between the brackets after Calendar ID: xxxxxxxxxxxxxxxx@xxx.calendar.google.com and enter it exactly into the Calendar ID field on the Integration page of your website at Bookings > Settings > Calendar Connection

FAQ ↑ Back to top

What information about a booking is sent to the Google Calendar? ↑ Back to top

When a new booking has been made on your site, the booking ID and the title of the bookable product are listed as the appointment’s name on the Google Calendar. Information about the customer who made the booking remains confidential and is not sent. However, information about the booking (e.g. number of people and resource) is sent and saved in the appointment’s description.

WooCommerce Bookings - Calendar Integration Appointment

Are appointments added to the Google Calendar automatically synched to the calendar on my site? ↑ Back to top

Yes! With Sync Preference set to Sync both ways, any appointments created in the connected Google calendar will be pulled into the store’s Global Availability rules, so no bookings can be created for the duration of the appointment. The store will periodically check the connected Google calendar for updates: Any newly created appointments should appear in the store after a few minutes.

How can I modify appointments that have been synched from my Google Calendar? ↑ Back to top

Since the appointments were created in Google Calendar, any necessary changes must be made from Google Calendar. After changes are made, the updates will be reflected in the store’s Global Availability within a few minutes.

Can I use Google Calendar to edit synched bookings?

Since bookings originate from the store, they cannot be edited from the Google Calendar. Bookings are pushed to the Google calendar for viewing purposes only. Any changes made to the associated events in the Google Calendar will not be synched back to the store. Bookings must be added, modified or deleted from the store’s admin interface so billing and availability can be managed correctly. This functionality is the same no matter if the store is set to sync one or both ways.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top