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, you are in the project folder. Go to the Library link on the left-hand menu. Choose the 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.

google-calendar-bookings-goto

  • Choose Web Browser (JavaScript) as the source
  • Select User data as the data type

 

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: Add new Credentials ↑ Back to top

  • Choose “Web application” as application type.
  • Give your Credentials a Name
  • Leave the Authorized JavaScript origins 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

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 WooCommerce > Settings > Integration.

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: WooCommerce > Settings > Integrations, and enter the Calendar ID.

Finally, select Save changes.

google-calendar-bookings-integration

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”.

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 WooCommerce >> Settings >> Integration >> Google Calendar

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

There is no 2-way synchronization between Bookings and Google Calendar at the moment. The integration only synchronizes bookings made on your site to the calendar on Google.

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

Back to the top