Kristen Williams Marc Maessen John Janowski Jules Webb ★★★★★ Rated 4.9/5 · 620+ Reviews

How to embed Google Calendar on your Blogger website for FREE?

Embed Google Calendar on your website to keep visitors informed and organized with event updates and easy scheduling access at their fingertips.

Create your widget
Free forever plan No credit card Cancel any time
How to embed Google Calendar on your Blogger website for FREE?
Photo of Mike Dalisay
Mike Dalisay
Co-founder of SociableKIT · Helping small businesses since 2011
July 24, 2026 5 min read Ask ChatGPT
Quick answer

Your Google Calendar on Blogger website — live in 3 steps

SociableKIT syncs your google calendar automatically. Set up once, embed anywhere — free to start, no coding required.

  1. Create in 60 seconds

    Pick Google Calendar in the dashboard and connect your source.

  2. Match your brand

    Colors, fonts, layout — tune it until it feels native to your site.

  3. Paste one line of code

    Drop the embed snippet on your Blogger website. No dev team needed.

Create your widget
  • Free forever plan
  • No credit card
  • Cancel any time
Video tutorial

Watch: embed Google Calendar on Blogger website — step by step

Prefer to watch? Follow along with this short YouTube walkthrough, then use the full written guide below whenever you need it.

Google Calendar video tutorial thumbnail
Full walkthrough

Embed Google Calendar with SociableKIT — step by step

Create your widget in the dashboard, copy the embed code, and paste it on your Blogger website. Screenshots included so you never get stuck.

Complete Guide

Follow our complete guide below to embed Google Calendar on your Blogger website for free. The guide is divided into two parts to make it easier to follow.

Create and customize your Google Calendar widget

The first part is creating your Google Calendar widget using the SociableKIT dashboard. Customize the look and feel to match your brand. Follow the steps below.

  1. Sign up FREE or login to SociableKIT. You can login here if you already have an account. Once you sign up, you will start your 7-day premium trial. After 7 days, you can activate the free plan if you don't need our premium features. Sign up to SociableKIT - How to embed Google Calendar on your Blogger website for FREE?
  2. Select "Google Calendar" on the dropdown. SociableKIT offers several social media feeds widgets. You might need to search it using the highlighted area below. Once found, you can then select it.Select "Google Calendar" on the dropdown - How to embed Google Calendar on your Blogger website for FREE?

    3. Enter your Google calendar ID.

  3. Customize your feed. Click the "NEXT" button to show the customization options of your social feed. You can change the layout, colors, font, and more to match your brand. Click the Save changes button.Customize your feed - How to embed Google Calendar on your Blogger website for FREE?
  4. Copy the embed code. Click the "Embed on website" button on the upper right corner. Select your website builder. On the popup, copy the JavaScript embed code.Copy the embed code. - How to embed Google Calendar on your Blogger website for FREE?
  5. Paste the embed code and save your Blogger website page. Please follow the second part below to add Google Calendar widget to your Blogger website .

Add Google Calendar widget to your Blogger website

The second part is adding your Google Calendar widget to your Blogger website . After you customize your Google Calendar widget and copied the embed code, it is time to add it to your Blogger website . Follow the steps below.

  1. Copy your free Google Calendar widget embed code. Make sure you followed the first part above. It detailed how to you can create and customize your widget to get your free embed code.
  2. Login to Blogger admin panel. 
  3. From your account dashboard "Post" tab, click the existing blog or "+ New Post" where you want your widget to appear.
  4. Click the pencil icon on the upper left corner and click the "HTML view" in the dropdown.
  5. Paste the link you copied from SociableKIT.
  6. Click Publish. Done!
Alternative method

Use the embed or link option

Prefer a manual approach? Follow these steps to link or embed Google Calendar without a third-party widget.

There's another way to get your Google Calendar on your website, although it's a bit more hands-on. Here are the steps:

  1. Open your Google Calendar.
  2. On the upper right, click the Settings icon.
  3. Select the Settings option.
  4. Scroll down and select a calendar you want to embed.
  5. On the dropdown of options, select the Integrate calendar button.
  6. Copy the embed code of your Google calendar.
  7. Login to your website admin panel.
  8. Create or update a page where you want to put your Google calendar.
  9. Put an image or text on your page that encourages the visitor to view your Google calendar.
  10. Highlight the image or text.
  11. Use the embed option of your website builder and paste the embed code you copied earlier.
  12. Save your page. Done!

You may choose method 1 or method 2, it depends on your needs. But in case you choose method 1, you can follow our complete guide below.

Website builders

Paste your embed code on any platform

SociableKIT works with every major website builder. Pick yours below for copy-paste instructions tailored to that platform.

To embed Google Calendar on your Blogger site, follow the steps below after you have your SociableKIT embed code.

  1. Sign up free to SociableKIT and create your Google Calendar widget.
  2. Customize your widget and copy the embed code from the dashboard.
  3. Login to Blogger admin panel. 
  4. From your account dashboard "Post" tab, click the existing blog or "+ New Post" where you want your widget to appear.
  5. Click the pencil icon on the upper left corner and click the "HTML view" in the dropdown.
  6. Paste the link you copied from SociableKIT.
  7. Click Publish. Done!
Full Blogger tutorial →

To embed Google Calendar on your WordPress site, follow the steps below after you have your SociableKIT embed code.

  1. Sign up free to SociableKIT and create your Google Calendar widget.
  2. Customize your widget and copy the embed code from the dashboard.
  3. Login to your WordPress site. 
  4. On your WordPress, go to the "Pages" section then click the "Add new page".
  5. Pick a pre-defined layout or start with a blank page by clicking the "Blank page" button.
  6. On the body of your page, click the "+" icon and click the "Custom HTML".
  7. Paste the code in the text area and click update.
  8. The widget will appear on the WordPress page.
  9. Click the Publish or Update button on your WordPress page. 
  10. Click the view page. Done!
Full WordPress tutorial →

To embed Google Calendar on your Wix site, follow the steps below after you have your SociableKIT embed code.

  1. Sign up free to SociableKIT and create your Google Calendar widget.
  2. Customize your widget and copy the embed code from the dashboard.
  3. Login to Wix. 
  4. On your existing website click the "+" button beside the "Main pages" section.
  5. Then click the "Add page" button.
  6. Name your page then hit enter.
  7. On the left, click "Add element". Find and click "Embed code". Click and drag "Embed a site" on your page then resize the container. 
  8. Click "Change website address". 
  9. Paste the link you copied from SociableKIT then click "Apply".
  10. Click "Publish" on the upper right. 
  11. Click "View site". Done!
Full Wix tutorial →

To embed Google Calendar on your Squarespace site, follow the steps below after you have your SociableKIT embed code.

  1. Sign up free to SociableKIT and create your Google Calendar widget.
  2. Customize your widget and copy the embed code from the dashboard.
  3. Login to Squarespace. You must have a "Business" account in Squarespace to use the widget. The "code block" needed cannot be found if you only have a "Personal" account.
  4. Create a new blank page or edit your existing page. Identify which page you want the widget to appear. You can create a new page on Squarespace, or you can edit your existing page where you want the widget to appear.
  5. Add a Code Block. On your Squarespace page, click the 'Edit' button. Find the 'Code' block and click it.
  6. Paste the embed code from SociableKIT. On the 'Content' of the 'Code' block, paste the JavaScript embed code you have copied from your widget.
  7. Save the changes on the 'Code block'. After pasting your widget's embed code. Click the 'Save' button on the left part of the page.
  8. View your page. Refresh your Squarespace page and check your SociableKIT widget. Done!
Full Squarespace tutorial →

To embed Google Calendar on your Webflow site, follow the steps below after you have your SociableKIT embed code.

  1. Sign up free to SociableKIT and create your Google Calendar widget.
  2. Customize your widget and copy the embed code from the dashboard.
  3. Login to Webflow. 
  4. On your existing website, click the "Page: ...." in the upper left corner then click the "Create new page" icon.
  5. Once done add a name for your new page then click "Save".
  6. On the left, click "Add Element". Drag "Embed" to your page. 
  7. Paste the JavaScript code you copied from SociableKIT.
  8. On the upper right, click "Publish" > "Publish to Selected Domains". 
  9. View your page. Done!
Full Webflow tutorial →

To embed Google Calendar on your Shopify site, follow the steps below after you have your SociableKIT embed code.

  1. Sign up free to SociableKIT and create your Google Calendar widget.
  2. Customize your widget and copy the embed code from the dashboard.
  3. Login to Shopify. 
  4. On the left side, click Online Store. 
  5. Click Pages. Add a new page or edit your existing page.
  6. On the Page details, click Show HTML icon (<>). 
  7. Paste the embed code and click the Save button.
  8. Click the View page button. Done!
Full Shopify tutorial →

To embed Google Calendar on your HTML site, follow the steps below after you have your SociableKIT embed code.

  1. Sign up free to SociableKIT and create your Google Calendar widget.
  2. Customize your widget and copy the embed code from the dashboard.
  3. Open your HTML file.
  4. You can create a new HTML page or edit your existing HTML page.
  5. Paste the Javascript code you copied from SociableKIT. Paste it where you want the widget to appear.
  6. Save your HTML page.
  7. You may now upload your HTML page to your web hosting.
Full HTML tutorial →

To embed Google Calendar on your Google Sites site, follow the steps below after you have your SociableKIT embed code.

  1. Sign up free to SociableKIT and create your Google Calendar widget.
  2. Customize your widget and copy the embed code from the dashboard.
  3. Login to Google sites. You must have at least a 'Business Starter' plan to create and customize your Google sites.
  4. Create or edit an existing website. Click the + 'Blank' button on the 'Start a new site' section to create or find your existing website under the 'Recent sites' section.
  5. Create a new blank page or edit your existing page. Identify which page you want the widget to appear. On the right sidebar, you will see an 'Embed' button. Click the 'Embed' button. 
  6. Add the widget. A popup 'Embed from the web' will open up. Select the 'Embed code' tab on the popup. 
  7. Paste the embed code from SociableKIT. On the 'Embed code' tab, you will see 'HTML code goes here' text. Paste the embed code from your SociableKIT widget.
  8. Save the widget. Once you have pasted your embed code, click the 'Next' button. 
  9. Preview of your SociableKIT widget. After clicking the Next button, a preview of your embed code will be displayed. Click the 'Insert' button to insert the widget to your Google sites page. 
  10. Edit the widget. Once the widget has been inserted, you will have the option to resize the widget. After resizing the widget to your preferences, click the 'Publish' button on the upper right corner of the page. 
  11. Publish your page. After publishing the site, click the down 'Arrow' button beside the 'Publish' button. 
  12. View your page. A dropdown of buttons will be displayed, click the 'View published site' button. Done!
Full Google Sites tutorial →

Live preview

Pick a Google Calendar template — see it live

Choose a starting design on the left and watch the preview update with real data. What you see is exactly what visitors get on your Blogger website.

Widget previewMasonry
Live data

Select a template to start with

Continue with this template

Common questions

Frequently asked questions

Everything you need to know about embedding Google Calendar on your Blogger website.

What is a Google Calendar widget?

A Google Calendar widget displays your calendar events directly on your website. With SociableKIT, visitors can see your schedule in a clean, branded layout without leaving the page. It helps keep everyone informed while reducing manual website updates.

Why should I add a Google Calendar widget to my website?

People act faster when your schedule is easy to see. A Google Calendar widget helps visitors find upcoming events, availability, classes, services, or reservations in one place. It makes your website feel current, useful, and easier to trust.

How do I add a Google Calendar widget to my website?

Create your widget in SociableKIT, connect your Google Calendar, customize the look, then copy and paste the embed code into your website. You do not need to code. Most users can add it in minutes.

Will my website calendar update automatically when I change my Google Calendar?

Yes, paid SociableKIT plans include automatic syncing so your website can stay updated when your Google Calendar changes. On the free plan, you can keep the widget current with sync requests. This helps prevent outdated dates and schedule mistakes.

Does the Google Calendar widget work with my website builder?

Yes. SociableKIT works with major website builders including WordPress, Shopify, Wix, Squarespace, Webflow, Weebly, Google Sites, SharePoint, and custom HTML websites. You only need a place where you can add embed code.

Do I need coding skills to use the Google Calendar widget?

No. SociableKIT gives you a simple embed code you can paste into your website editor. You can create, customize, preview, and publish the widget without touching code.

Does my Google Calendar need to be public?

Your calendar must be available for display before website visitors can see its events. If your calendar is private or restricted, some details may not appear. SociableKIT can help you check the right setup so your visitors see only what you want to show.

Can I hide private events from my website calendar?

Yes. Control your event visibility from Google Calendar before displaying it on your site. Keep private details out of your public calendar, then let SociableKIT show the version that is safe for visitors.

Can I control which events appear in the widget?

Yes. Your Google Calendar remains the source of truth. Add, edit, hide, or remove events in your calendar, and SociableKIT follows the events available to display.

Can I show more than one Google Calendar?

Yes, you can use additional sources when your setup needs more than one calendar. This is useful for schools, venues, churches, teams, clinics, and businesses with separate departments or locations. SociableKIT pricing scales by source, so you only pay for what you use.

Can I customize the design of my Google Calendar widget?

Yes. You can customize colors, fonts, layouts, and calls to action so the widget feels native to your website. The goal is simple: your calendar should look like part of your brand, not a pasted-on block.

What layouts can I use for my Google Calendar widget?

SociableKIT offers flexible layouts such as calendar, list, grid, masonry, carousel, and dark mode templates. You can start with a template, preview it with live data, then adjust the design before publishing.

Is the Google Calendar widget mobile-friendly?

Yes. SociableKIT widgets are designed to look good across desktop, tablet, and mobile screens. This matters because many visitors check events and availability from their phones.

Can visitors book appointments or reservations from the widget?

The Google Calendar widget helps visitors see your schedule, events, and availability clearly. If you use a separate booking or reservation flow, you can place it near the calendar so visitors can act right after checking the schedule. This keeps the path from interest to action simple.

What happens if my website gets a lot of traffic?

Paid SociableKIT plans include unlimited widget views, so your calendar can keep running as more people visit your site. You do not have to worry about traffic caps stopping your schedule from showing. That gives you room to grow without babysitting view limits.

What is the difference between the free and paid Google Calendar widget plans?

The free plan lets you create a working widget and test it on your website. Paid plans are better for long-term use because they include automatic syncing, unlimited views, more flexibility, and the option to remove SociableKIT branding. You can start small and upgrade when your site needs more.

Can I remove SociableKIT branding from the widget?

Yes. SociableKIT branding can be removed on paid plans. This gives your calendar a cleaner, more professional look that matches the rest of your website.

What should I do if my Google Calendar events are not showing?

First, check that the calendar and events are allowed to be displayed publicly or shared correctly. Also check that the calendar has upcoming events and that the correct source is connected. If something still looks wrong, SociableKIT support can help you troubleshoot the setup.

Will the Google Calendar widget slow down my website?

SociableKIT is built to make embedding simple without making your site hard to manage. Like any embedded content, performance can depend on your page, theme, and other scripts. Keep the widget placement clean, and ask support for help if you need guidance.

Can SociableKIT help me set up my Google Calendar widget?

Yes. SociableKIT provides human support, with 24/7 chat and email support on paid plans. If you are stuck with setup, syncing, design, or website-builder placement, you can ask for help instead of figuring it out alone.

Add your Google Calendar widget today

Set up in minutes. Free forever to start.

Create your widget

Free forever · No credit card · Cancel anytime

Just need a free widget? See our free plan → View Google Calendar widget page →