Days
Hours
Minutes
Seconds
Spring sale:
20% off

Documentation

This is the documentation for Webba Booking 5. If you are still using Webba 4 – please go to the old documentation.

Google Calendar integration

Premium feature

Quick links:

This is a Webba Booking Premium feature. If you don’t have Webba Premium yet, you can get it here.

Webba’s integration with Google Calendar simplifies booking administration. It allows to automatically add bookings to administrator Google Calendars or include clickable Google Calendar event links in email notifications, making it easy for customers to add events to their calendars. Streamline your scheduling and enhance customer engagement with this powerful integration.

How to integrate Google Calendar with Webba?

VIDEO INSTRUCTIONS:


Part 1. Generating Client ID and Client Secret

Step 1: Access Google Cloud Console

Navigate to the Google Cloud Console: console.cloud.google.com.

Step 2: Create a New Project

In the top-left corner of the console, click on the “Select a project” dropwdown. Select an existing project or press “New project”.

Step 3: Project Configuration 

A new window will appear. If you’re using a free Google account, you’ll see the option for “No Organisation” selected by default. However, if you’re using a business account (G-Suite), choose your organization and its associated location. Then, click “NEW PROJECT.”

Step 4: Project Setup 

Provide a name for your project and click “CREATE.”

Note: While “No Organisation” is preselected for personal accounts, business accounts require you to choose your organization and its location. All subsequent steps remain the same.

Step 5: Select the Project 

In the notification on the top right corner, click “Select Project” on the newly created project.

Step 6: Access the Google Library 

On the left-side menu, locate “APIs and services” and click on “Library” to access Google’s Library.

Step 7: Locate and Enable Google Calendar API 

On the next screen find “Google Calendar API” option and click on it.

Step 8: Enable the API 

Click on the “Enable” button to activate the Google Calendar API for your project.

Step 9: Create Credentials

Once the API is enabled, you’ll be redirected to the “API/Service details” screen. Click on the “Create Credentials” button in the top right corner.

Step 10: Configure Credentials 

In the “Credentials” window, select:

  • Google Calendar API
  • User data

Click “Next.”

Step 11: App Information 

In Step 2, provide the following information:

  • Name of the App
  • Select an email from the “User support mail” dropdown
  • Enter the email of the App developer (typically the same as “User support mail”)

Step 12: Save and Continue 

Click “Save and Continue” below the “Developer contact information.” Then, skip the remaining steps by clicking “OAuth Consent Screen” in the left-hand side menu.

Step 13: App User Type (For Business Accounts) 

If you’re using a business account, the default User Type will be set to “Internal.” To allow your employees to access their Google accounts, change it. Click on the “Make External” button.

Step 14: Set Publishing Status (For Business Accounts) 

In the pop-up that appears, select “In production” and click “Confirm” in the bottom right corner.

Step 15: Verify Publishing Status
Confirm that the publishing status is set to “In Production” and that the user type is “External.”

Step 16: Create Credentials 

Now, access “Credentials” from the left-hand side menu. At the top, click “+ Create Credentials.” A drop-down menu will open; choose “OAuth client ID.”

Step 18: Configure OAuth Client ID 

In the “OAuth client ID” configuration:

  • Select “Web application” from the “Application type”
  • Enter the application name
  • Press “Create”

A popup window with your Client ID and Client Secret should show up.

Step 19: Adding Google API Client ID and Secret

Go to Webba Settings –> Google Calendar and copy and paste the Google API Client ID and Secret you just generated. Press “Save”

Part 2. Adding a New Calendar to Webba

Step 1: Create a New Calendar in your Google Calendar account

Go to: https://calendar.google.com/calendar/u/0/r/settings/createcalendar to create a new Google Calendar. Add “Name” and press “Create calendar”.

Skip this step if you already have a calendar that you want to connect with Webba.

Step 2: Locate the calendar you want to connect to

Go to https://calendar.google.com/ and on the bottom left side find your Google Calendars list.

To get to your calendar settings, hover over the calendar you wish to connect and click the three vertical dots that appear to the right – this will bring up a dropdown menu, click “Settings and sharing”.

Step 3: Retrieve the Calendar ID

Scroll down in the Calendar settings until “Integrate calendar” and Calendar ID section. Copy the Calendar ID.

Step 4. Adding Google Calendar to Webba

Go to Webba Google Calendar page and press “Add Google Calendar +” button.

Fill in the fields:

  • Name: Enter a name to identify the calendar.
  • User: Add email addresses to non-admin users who need to authorize their Google Calendar.
  • Calendar ID: Insert the Calendar ID you just located
  • Mode: Choose between three synchronization modes:
    • One-way (import): This mode will import all unavailable times from your Google Calendar to Webba Schedule. No meeting data is imported, only the time slots.
    • One-way (export): This mode will automatically add Webba bookings to your Google Calendar.
    • Two-way: This mode will both import unavailable times from Google Calendar to Webba Schedule and add Webba bookings to your Google Calendar.

Press “Save”.

Part 3. Authorizing the Calendar

Step 1. Click on the “Manage authorization” link

Step 2. Copy the link under the “IMPORTANT NOTICE”

Step 3. Add the link in the Google Cloud Console

Go to https://console.cloud.google.com/. Locate and click on “APIs and services” –> Credentials and press on the pencil icon next to your OAuth 2.0 Client IDs

Locate the “Authorized redirect URLs and press “+ ADD URL”. Paste in the link and press “Save”.

Step 4. Finalize the authorization

Go back to the Webba Google Calendar page where you started the authorization and press “Authorize”

Follow any on-screen prompts or instructions to complete the Google authorization process. The exact steps may vary depending on the integration and the permissions required. At the end, you should be redirected back to the Webba Calendar authorizations page showing a successful authorization.

Go back to the Google Calendar page and make sure there is a green “authorized” notification next to your calendar.

Now the integration should be set up and ready to synchronize with your Google Calendar. The next step is to select which service bookings will be added to the calendar.

How to connect Google Calendar to a Service?

To enable the creation of Google Calendar events when booking a service, you must establish a connection between Google Calendar and that specific service. Follow these steps to make this connection:

  1. Navigate to the “Services” page.
  2. Locate and select the service you wish to link with Google Calendar, and click to edit it.
  3. In the popup window that appears, look for the “Google Calendar” field within the General tab.
  4. Add the calendar you want to associate with this service.
  5. Click “Save” to confirm your changes.

By completing these steps, you’ve successfully connected Google Calendar to your selected service, allowing events to be seamlessly created when this service is booked.

How to enable customers to add bookings to their Google Calendar?

To allow customers to add their bookings to their Google Calendar, you must incorporate the placeholder #add_event_link into the notification email message that you intend to send to your customers.

Not that all the previously mentioned steps must also be completed for this feature to function correctly.

How to customize the Google Calendar event text?

To set the summary and description of a Google Calendar event, open Settings –> Translation/Wording –> Advanced Settings

How to edit the Google Calendar event summary

To edit the edit Google Calendar event summary, edit the field “Google calendar event / iCal summary”

Available placeholders:

  • #service_name – service name
  • #customer_name – customer’s name
  • #appointment_id – unique appointment id

How to edit the Google Calendar event description

To edit the edit Google Calendar event summary, edit the field “Google calendar event / iCal description”

Available placeholders:

  • #customer_name – customer’s name
  • #customer_phone – customer’s phone
  • #customer_email – customer’s email
  • #customer_comment – customer’s comment
  • #items_count – count of places (items) booked (for services with more than one item per time slot)
  • #appointment_id – unique appointment id
  • #customer_custom – coma separated list of custom fields.
  • #total_amount – total price with tax for appointment / reservation
  • #service_name – name of service

How to delete a Calendar?

To delete a calendar, find the trash bin icon on the right side of the service and click on it.

Confirm the deletion in the popup window to proceed with the removal.