This guide walks you through adding a fully functional booking widget to your WordPress site that connects directly to your Google Calendar. When a visitor books an appointment, a real Google Calendar event is created instantly. They receive a confirmation email with an ICS file. You receive a notification.
The entire setup takes about 30 minutes, and once it’s done it runs without any maintenance.
What you will need
Before you start, make sure you have the following:
- A WordPress site running WordPress 6.0 or later
- PHP 8.0 or later on your hosting server
- A Google account with a Google Calendar you want to use for bookings
- Access to Google Cloud Console (free — you only need a Google account)
- A CalNative Booking license ($39/year)
Step 1: Create a Google Cloud project
The Google Calendar API requires a Google Cloud project. Think of it as a container for the credentials your plugin will use. You create it once and never need to touch it again.
- Go to console.cloud.google.com and sign in with your Google account
- Click the project selector at the top of the page and choose New Project
- Give it a name — something like
my-booking-plugin— and click Create - Wait a few seconds for the project to be created, then make sure it is selected in the project selector
Step 2: Enable the Google Calendar API
By default, no APIs are enabled on a new project. You need to turn on the Google Calendar API explicitly.
- In the left sidebar, go to APIs & Services → Library
- Search for Google Calendar API
- Click the result, then click Enable
The page will refresh and show the API as enabled. You’re done with this step.
Step 3: Create a service account
A service account is a special type of Google account that belongs to your application, not to a person. It lets the plugin communicate with the Google Calendar API securely, without requiring anyone to log in.
- Go to APIs & Services → Credentials
- Click Create Credentials and choose Service account
- Enter a name — for example,
booking-plugin— and click Create and Continue - Skip the optional role and access settings — just click Done
You will now see the service account listed on the Credentials page. Note the email address — it looks something like booking-plugin@your-project-id.iam.gserviceaccount.com. You will need this in Step 5.
Step 4: Download the JSON key file
The JSON key file is what the plugin uses to authenticate as the service account. You download it once and upload it to the plugin settings.
- On the Credentials page, click the service account email to open its details
- Go to the Keys tab
- Click Add Key → Create new key
- Choose JSON and click Create
A .json file will download to your computer. Keep it safe — treat it like a password. Do not share it publicly or commit it to version control.
Step 5: Share your calendar with the service account
The service account needs permission to read your calendar’s availability and create events. You grant this by sharing the calendar with the service account email address.
- Open Google Calendar in your browser
- In the left sidebar, find the calendar you want to use for bookings and click the three-dot menu next to it
- Choose Settings and sharing
- Scroll to Share with specific people or groups and click Add people and groups
- Paste the service account email address (the one from Step 3)
- Set the permission to Make changes to events — this allows the plugin to both read availability and create events
- Click Send
You also need the Calendar ID from this same settings page. Scroll to the Integrate calendar section — the Calendar ID is listed there. It looks like an email address or a long alphanumeric string. Copy it.
Step 6: Install CalNative Booking
With your Google credentials ready, you can now install the plugin.
- Purchase a license at calnative-booking.com and download the plugin ZIP file from your account
- In your WordPress admin, go to Plugins → Add New → Upload Plugin
- Upload the ZIP file and click Install Now, then Activate
After activation, you will be prompted to enter your license key. Enter the key from your account email and activate it.
Step 7: Configure the plugin settings
Go to Settings → CalNative Booking in your WordPress admin. You will see several tabs. Start with General.
Google Calendar settings:
- Calendar ID — paste the Calendar ID you copied in Step 5
- Service Account JSON — upload the JSON key file you downloaded in Step 4
- Timezone — set this to match your Google Calendar’s timezone
Availability settings:
- Slot duration — how long each appointment is (e.g. 30 or 60 minutes)
- Buffer time — gap between appointments (e.g. 10 minutes to travel or prepare)
- Working hours — which days and hours you are available for bookings
- Minimum notice — how far in advance clients must book (e.g. 2 hours or 1 day)
- Booking window — how many days into the future clients can book
Click Save Changes after completing each tab.
Step 8: Set up email notifications
Go to the Emails tab in the plugin settings. You will find separate templates for the host email (sent to you) and the guest email (sent to the person who booked).
Both templates support tokens — placeholders that are replaced with booking details when the email is sent. Common tokens include:
{name}— client’s first name{date}— appointment date{time}— appointment time{cancel_link}— a secure link the client can use to cancel
The guest email includes an ICS calendar attachment automatically — you don’t need to configure this separately.
Step 9: Embed the booking widget on a page
Create or edit the page where you want the booking widget to appear. In the Gutenberg editor, add a Shortcode block and enter:
[calnative_booking]Save the page and view it in your browser. The booking widget will appear in place of the shortcode, showing the available dates and times pulled directly from your Google Calendar.
If you want to customise the appearance, go to the Appearance tab in the plugin settings. You can set the primary colour, font, border radius, max width, and add custom CSS to match your site’s design exactly.
Testing your setup
Before sharing the page publicly, make a test booking yourself:
- Open the booking page and check that available slots are showing correctly
- Complete a booking with a real email address
- Check that a Google Calendar event was created with your test details in the description
- Confirm you received a host notification email
- Confirm the guest email arrived with an ICS attachment
- Test the cancellation link in the guest email
If a slot you know is busy isn’t being blocked, double-check that the service account email has the correct calendar sharing permission (Step 5) and that you entered the Calendar ID correctly in the plugin settings.
What happens when someone books
Once everything is set up, the flow is fully automatic:
- A visitor opens your booking page — the widget calls the Google Calendar API and shows only genuinely available slots
- They pick a date, pick a time, fill in their details, and confirm
- A Google Calendar event is created in your calendar immediately
- You receive an email notification with the client’s details
- The client receives a confirmation email with an ICS file and a cancellation link
- The booking is logged in your WordPress admin under CalNative Booking → Bookings
If the client needs to cancel, they click the link in their confirmation email. The booking is cancelled in your WordPress database and the Google Calendar event is deleted — no action required from you.
Common questions
Will the plugin show slots from all my calendars, or just one? Just the calendar whose ID you entered in the settings. If you want to block time based on multiple calendars, add those calendars to the Google account that owns your booking calendar — Google’s free/busy check accounts for all calendars on the account.
Can I use it on more than one page? Yes — place the CalNative shortcode on as many pages as you like. All instances use the same settings.
What if I need to block a date? Create an all-day event in your Google Calendar for that date. The plugin will mark the entire day as unavailable automatically.
Does it work on mobile? Yes — the widget is fully responsive and works on all screen sizes.
