Featured Image: How to Embed a Google Calendar on Your Website Easily for Free

How to Embed a Google Calendar on Your Website Easily for Free

Google Calendar is one of the most popular calendar apps, with over 500 million users, and for good reasons.

As a business owner or event manager, it serves as an excellent tool for creating and promoting your events. Additionally, embedding Google Calendar on your website is a practical way to streamline scheduling, promote events, and improve customer engagement.

You can enable your audience to stay informed, book services, and plan their interactions with your brand more effectively.

In this blog, we’ll walk you through the steps to embed Google Calendar seamlessly on your website, offering tips to customize its appearance and functionality to match your brand’s unique needs.

TL;DR – Add Google Calendar to Your Website 

There are two ways to embed Google Calendar on your website.

  • The first method is using a website widget.
  • The second method is using the embed or link option.

I will show you the steps for each of those methods so you can decide which one is the best for you.

Need a quick solution for embedding a Google Calendar on your site?

Thousands of website owners and event organizers use our SociableKIT widget to display Google Calendars on their web pages. They rate our widget highly for being easy to set up and personalize.

Create a SociableKIT widget and update site visitors about upcoming webinars and events.

Close-up of hands typing on a laptop with a Cyrillic keyboard layout, showcasing online browsing.

Method 1: Use Google Calendar Widget for Website

To quickly embed Google Calendar to your website, follow the steps below.

  1. Create your Google Calendar widget here.
  2. Customize your Google Calendar widget.
  3. Copy the Google Calendar widget embed code.
  4. Login to your website admin panel and create or edit a page.
  5. Paste the embed code where you want the Google Calendar widget to appear.
  6. Save and view your page. Done!

That’s easy! Embedding Google Calendar widget on your website will take only 2 minutes. If you need a more detailed guide, scroll down to follow our complete guide or watch our video guide.

Looking to purchase our premium features? Please check the details on our pricing page here.

Method 2: Use Embed Code for Google Calendar

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.
Google Calendar screenshot showing August 2024 schedule with highlighted settings icon.
  1. Select the Settings option.
Google Calendar screenshot for August 2024 with an arrow pointing to the settings dropdown menu.
  1. Scroll down and select a calendar you want to embed.
Google Calendar settings page with 'Demo - google calendar' highlighted in red.
  1. On the dropdown of options, select the Integrate calendar button.
Screenshot of Google Calendar with August events and highlighted settings option.
  1. Copy the embed code of your Google calendar.
Google Calendar settings page showing embed code for 'Demo - google calendar' highlighted.
  1. Login to your website admin panel.
  2. Create or update a page where you want to put your Google calendar.
  3. Put an image or text on your page that encourages the visitor to view your Google calendar.
  4. Highlight the image or text.
  5. Use the embed option of your website builder and paste the embed code you copied earlier.
  6. 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.

What It Means to Embed Google Calendar

Google created Google Calendar and it is used to manage time and schedule events for personal or business use and you can find your Google Calendar by clicking the calendar icon at the top right menu of your Google account.

This Google Calendar feed can help business owners to organize their events and programs that their customers can join and attend to. This gives a heads up to your customers who wanted to participate on the upcoming events.

Embedding a Google Calendar on your website using our widget makes sharing your schedule effortless. Google created this platform to streamline scheduling and improve communication. By integrating it into your site, you provide a convenient way for visitors to stay updated, enhancing their experience and your engagement.

Two people working on laptops in a modern, relaxed coworking space with lush greenery.

Reason to Embed Google Calendar on Your Website

There are several reasons why you might want to customize and embed Google Calendar on your website:

  1. Easy scheduling: By embedding a Google Calendar on your website, you can make it easy for your visitors to schedule appointments or events with you. This can save you time and effort in managing your schedule, as visitors can see your availability and book a time that works for both of you.
  2. Integration with other Google services: If you use other Google services such as Gmail, Google Drive, or Google Meet, integrating Google Calendar on your website can help you streamline your workflow and keep all your Google tools in one place.
  3. Customization options: Google Calendar offers a variety of customization options, including the ability to change the color scheme, add your own branding, and adjust the layout to fit your website’s design. This can help you create a seamless user experience and maintain a consistent brand image across your website and other online platforms.
  4. Mobile-friendly: Google Calendar is optimized for mobile devices, which means that visitors can easily access and book appointments or events from their smartphones or tablets. This can help increase engagement and conversion rates, especially if your target audience is primarily mobile users.

Overall, customizing and embedding Google Calendar on your website can help you improve your scheduling process, streamline your workflow, and create a seamless user experience for your visitors.

Smiling couple looking at a mobile phone together while sitting on a couch.

Impact of Embedding Google Calendar to Your Website

Embedding a Google Calendar on your website offers numerous incentives for your business, events, and visitors. 

Below, let’s highlight the most significant benefits:

Better Event Visibility

Adding a Google Calendar to your website increases the visibility of the events to your target audience. You can embed the Google Calendar on your home page, so anyone who visits your website is drawn to the calendar.

Alternatively, you can place it on the site’s header or footer to appear on all your web pages. This increased visibility will likely translate to more event reservations and higher attendance.

Enhanced Visitor Engagement

Embedding a Google Calendar on your site entices visitors to interact with your site as they seek details or updates on upcoming events.

This keeps them on the web page longer, boosting your site’s engagement.

By including call-to-action (CTA) buttons, which prompt site visitors to confirm attendance, you can also increase the chances of converting potential leads.

Improved Communication

Communication is an integral aspect of effective customer service.

One way to keep your customers happy is by informing them about your availability. For example, you can mark the days you’ll be present or out of the office on your Google Calendar.

This reduces cases of canceled appointments.

Real-Time Updates

A huge challenge when organizing an event is updating guests about changes to the venue, date, or program.

Embedding a Google Calendar on your site allows you to provide real-time event updates to site visitors.

Any changes to the Google Calendar appear on the feed when the embed refreshes.

Diverse group of colleagues collaborating on a project with laptop and tablet in modern office.

How to Embed a Google Calendar Step by Step

Follow our complete guide below to embed Google Calendar on your 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.
A split-screen image showing customer testimonials for SociableKIT on the left and a sign-up page on the right.

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.

Screenshot of a dropdown menu for creating a social media solution, featuring options like Google Reviews and Facebook Page.
  1. 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.
Screenshot of a social feed customization interface with layout options and a preview pane.

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.

A screenshot showing a code.
  1. Paste the embed code and save your website page. Please follow the second part below to add Google Calendar widget to your website.

Add Google Calendar Widget to Your Website

The second part is adding your Google Calendar widget to your website. After you customize your Google Calendar widget and copied the embed code, it is time to add it to your 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. Create a new web page or edit your existing web page where you want the widget to appear.
Screenshot of a WordPress dashboard with a 'Welcome to WordPress' message and version 6.3.1 notice.

3. Open your webpage. You might use a code editor, a rich text editor, or a code block.

Screenshot of a WordPress editor interface with an 'Add title' prompt and a block inserter menu.

4. Paste the embed code you copied from SociableKIT earlier.

Screenshot of a WordPress editor interface with an 'HTML' prompt and a block inserter menu.

5. Save and publish your web page.

WordPress editor open with a YouTube channel embed and 'Publish' button highlighted by arrows.

6. View your web page with the widget. Done!

Video Guide: Embed Google Calendar on Your Website

Watch our YouTube video below to learn how to embed Google Calendar on your website for free.

Live Demo

Below, you can see a live demo of our Google Calendar widget. You can click on different
layouts such as Masonry layout, Grid, and Carousel if available.

Common Integration Issues and How to Solve Them

Embedding a Google Calendar is straightforward, especially when using our SociableKIT widget. However, you might encounter some integration issues, resulting in a defective embed.

Below are common reasons your embed could malfunction. We also highlight effective ways to troubleshoot the issues:

  • Incorrect Data Source: Embedding the wrong Google Calendar link or providing an incorrect data source when setting up a widget can result in a defective feed. Learn how to get Google Calendar ID when creating your widget to link to the correct calendar.
  • Wrong Time Zone: Setting the wrong time zone can distort how events appear on the embed, misleading your visitors. Our SociableKIT widget prompts you to specify your time zone when configuring your embed to help site visitors convert the timing to their local times.
  • Embed Does Not Reflect New Events: Sometimes, new events or updates might not reflect on the embed. A common reason is that the embedded feed has not synced. Wait for the scheduled updates or request a manual sync to refresh the feed.
  • Visitors Cannot Access the Calendar: Setting your Google Calendar to ‘Private’ limits accessibility to people signed in using the linked Gmail account. Change privacy settings to Public or Default, allowing all site visitors to see and interact with the embedded calendar.
  • Customization Issues: Embedding a Google Calendar using the link method offers limited customization options unless you are proficient in CSS and HTML. However, you can bypass these limitations by embedding using our SociableKIT widget. It lets you specify your preferred embed theme and font styles.
  • Responsiveness: You might notice that your Google Calendar does not fit on smaller devices like smartphones. Embedding using a widget helps make the calendar responsive as it adjusts to screen size, giving site visitors a consistent viewing experience.
Person multitasking with smartphone and laptop, managing technology seamlessly.

Reviews on SociableKIT Widgets

Thousands of creators and business owners have already embedded Google Calendar on their website using SociableKIT. They love our service! Here’s what they tell us.

Why Integrate Google Calendar According to Statistics

We have listed a few online statistics that will convince you to embed your Google Calendar on your website. 

Google Calendar Has Over 500 Million Users

With more than 500 million active users, Google Calendar has proven to be widely used and trusted. With our widget, you can easily integrate a product that millions of people are already acquainted with.

Source

70% of Consumers Prefer Online Calendars

An amazing 70% of customers say that using an online calendar is more handy than using a paper one. This demand can be satisfied by including a Google Calendar on your website, which will help your visitors remember significant occasions.

Source

67% of People Use Digital Tools for Scheduling

Online calendar usage is on the rise, with 67% of people using electronic devices to manage their schedules. This trend is supported by using our Google Calendar widget, which gives your audience a simple and effective approach to keep organized.

Source

Over 30% Increase in Productivity

Businesses that use online scheduling programs like Google Calendar estimate productivity increases of more than 30%. By adding Google Calendar to your website, you may assist your users in better time management, which will increase their pleasure and productivity.

Source

Digital Calendar Usage Grows Annually by 20%

The growing dependence on electronic instruments for organization is shown in the 20% yearly growth rate of digital calendar use. You are offering a relevant tool that is in line with current trends by including a Google Calendar.

Source

Adding your Google Calendar to your website is a wise move to enhance your website’s user engagement. Our Google Calendar widget makes this integration easy and effective.

Web browser address bar displaying "https://www" with an arrow cursor hovering.

Examples of Embedded Google Calendar on Website

“How will the embedded Google Calendar appear on my website?”

This is a common question among first-time users looking to add a calendar to their sites. To answer the question, we have highlighted a few examples of clients who use our SociableKIT widget to embed Google Calendars on their websites.

Check them below:

Sketchbook Brewing Company Google Calendar

A webpage for a brewery with a calendar showing events, a beer can labeled 'No Parking,' and beer taps.

Sketchbook Brewing Company is a brand that serves brewed beers. They use the SociableKIT Google Calendar widget to host their frequent live music and concert events at both our breweries and taprooms in Evanston & Skokie on their website.

Dede Alder Google Calendar

Website page detailing upcoming performances with dates, times, and event descriptions.

Dede Alder is a professional singer, songwriter, and marimba player where she leads a band, Dede and the Dreamers, and plays and records in a freelance setting. She uses the SociableKIT Google Calendar widget to promote her drumming, Arabic percussion, and songwriting workshops internationally and locally on her website.

Cycology Bicycles Google Calendar

Digital calendar for May 2023 with cycling events and presentations highlighted in blue.

Cycology Bicycles is a family-owned local business committed to providing friendly, personalized, and knowledgeable service. They use the SociableKIT Google Calendar widget to offer bikes that cover all bike types and categories from Trek and Electra to get you out on the road or trail on their website.

The Serrene Goddess Healing Center Google Calendar

Screenshot of 'Serene Goddess' website's events calendar page with a sunset header, showing scheduled activities.

The Serrene Goddess Healing Center is an intuitive and transformational mentor, spiritual teacher, Reiki Practitioner & Akashic Records reader. They use the SociableKIT Google Calendar widget to promote their powerful tools that can help you tap into your innermost desires and guide you towards the path that is aligned with your highest good. on their website.

Southold Yacht Club Google Calendar

Screen capture of Southold Yacht Club's event calendar for May 2023 with highlighted events.

Southold Yacht Club is a small family-oriented club open to all who have a love of sailing. They use the SociableKIT Google Calendar widget to promote a love of sailing in their beautiful waterways for over 80 years on their website.

Tips on Customizing Your Google Calendar Widget

Customizing a Google Calendar helps enhance its appearance and functionality. 

Let’s discuss some practical tips for styling your Google Calendar widget:

  • Match the Widget to Your Brand Style: Pick the right background colors to blend the widget with your site. Our SociableKIT widget lets you personalize the widget theme and font colors to align with your brand image.
  • Make It Mobile-Friendly: Internet users spend about 56% of their online time on smartphones, highlighting the significance of a responsive site. Embed your Google Calendar using our SociableKIT widget to make it responsive to mobile phones, tablets, and PCs.
  • Optimize for Accessibility: Ensure your Google Calendar is accessible to people with disability (PWDs). Utilize high-contrast colors, keyboard navigation, and alt texts to enhance PWDs’ user experience.
  • Include CTA Statements: Use CTA statements to encourage visitors to take the target action. For example, you can include a CTA button to confirm attendance or a link to the event tickets.
  • Optimize Widget Placement: Embed the widget on a web page section that guarantees maximum visibility. Our SociableKIT widget lets you place the Google Calendar anywhere on your site, including the header, footer, and sidebar sections.
  • Utilize Color Coding: Use colors to distinguish different events or schedules and make your calendar easy to understand. For example, you can use green to mark your availability and blue to mark your out-of-office days.
Close-up of hands using a smartphone, browsing through content.

Frequently Asked Questions (FAQs)

Let’s address common questions users ask about embedding Google Calendar on a site.

Does Embedding a Google Calendar Affect Website Loading Speed?

Yes. Integrating a Google Calendar can affect website loading speed.

As a first-time user embedding a calendar using the link method, you might paste bloated code (with excess CSS and Javascript lines), affecting your site’s performance.

We recommend using our SociableKIT widget to generate an optimized script and reduce the loading time.

Is it Possible to Embed a Specific Calendar View (e.g., Week, Month, Agenda)?

Yes. You can embed a pre-defined calendar view, such as a specific week, month, or agenda.

Go to your customization settings on your Google Calendar and specify your preferred calendar view. 

Alternatively, you can use our SociableKIT widget and select a layout that matches your preferred view. For example, the Month Layout displays the full month with the event days highlighted.

What Permissions Are Needed to Share and Embed a Google Calendar?

You only need to set your Google Calendar to public to make it accessible to visitors when you embed it on your website.

On your Google Calendar app, go to Settings and open the calendar you want to embed. Click on Access Permission for events and enable Make Available to the Public.

How Do I Update or Change My Embedded Google Calendar Once It’s Live?

Embedding a Google Calendar doesn’t impact how you edit or update it. You need to only modify the calendar, and the changes will be reflected in the embed.

You can wait for the scheduled sync or refresh the feed manually to update the calendar details.

Embed Google Calendar on Your Website in 2 Minutes

Ready to integrate a Google Calendar on your site? Use our SociableKIT widget.

Our widget prompts you to provide the correct calendar ID and time zone, resulting in the correct embed. You can also personalize the widget to your preference and include CTA buttons to maximize conversions.

Create a SociableKIT widget today and promote your events on your site!

A person with crossed arms against a blue background with text "How To Embed Google Calendar On Your Website For FREE?"

How to Add Google Calendar Widget to Your Website Builder

Are you using a specific website builder or content management system (CMS)? SociableKIT can work with any website builder. The following sections will show you how to use the Google Calendar widget code on commonly used website builders.

How to Embed Google Calendar on Your Squarespace Website

To embed Google Calendar on your Squarespace website, follow the steps below.

  1. Sign up free to SociableKIT. Sign up for a free account on SociableKIT or login if you already have an account.
  2. Create and customize your Google Calendar widget. Create a Google Calendar widget and customize the colors, fonts, and other elements to match your Squarespace website.
  3. Copy the Google Calendar widget embed code. Click the ‘Embed on website’ button on the upper right and copy the embed code.
  4. 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.
Squarespace login page with options to login.

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

Screenshot of a website's navigation menu with options to create a new page, highlighting the 'Blank' page template.

6. Add a Code Block. On your Squarespace page, click the ‘Edit’ button. Find the ‘Code’ block and click it.

Screenshot of a website editor interface showing SociableKIT and Squarespace integration options.

7. Paste the embed code from SociableKIT. On the ‘Content’ of the ‘Code’ block, paste the JavaScript embed code you have copied from your widget.

A screenshot of a webpage integration tool "SociableKIT + Squarespace" with an arrow pointing to a code input area.

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

Screenshot showing SociableKIT and Squarespace interface with options, a red arrow pointing to a 'Save' button.

9. View your page. Refresh your Squarespace page and check your SociableKIT widget. Done!

Webpage screenshot of SociableKIT integration with Squarespace, showing event listings with images.

How to Embed Google Calendar on Your WordPress Website

To embed Google Calendar on your WordPress website, follow the steps below.

  1. Sign up free to SociableKIT. Sign up for a free account on SociableKIT or login if you already have an account.
  2. Create and customize your Google Calendar widget. Create a Google Calendar widget and customize the colors, fonts, and other elements to match your Squarespace website.
  3. Copy the Google Calendar widget embed code. Click the ‘Embed on website’ button on the upper right and copy the embed code.
  4. Login to your WordPress site. 
WordPress login screen with fields for username or email and password, with a "Log In" button.

5. On your WordPress, go to the “Pages” section then click the “Add new page”.

Screenshot of a WordPress dashboard highlighting the 'Pages' menu with an 'Add new page' button.

6. Pick a pre-defined layout or start with a blank page by clicking the “Blank page” button.

Screenshot of a website builder interface showing templates for adding a new page.

7. On the body of your page, click the “+” icon and click the “Custom HTML”.

Screenshot of a WordPress editor interface with an 'Add title' prompt and an open 'Custom HTML' block.

8. Paste the code in the text area.

A website editor screen showing HTML code snippet for a LinkedIn widget.

9. To preview, click the preview tab.

Screenshot of a WordPress editor interface with an 'Add title' text and three user profile snippets visible.

10. Click the Publish or Update button on your WordPress page.

A screenshot of a WordPress blog post editor with a title section and some text and images.

11. Click the view page. Done!

How to Embed Google Calendar on Your Squarespace Website

To embed Google Calendar on your Weebly website, follow the steps below.

  1. Sign up free to SociableKIT. Sign up for a free account on SociableKIT or login if you already have an account.
  2. Create and customize your Google Calendar widget. Create a Google Calendar widget and customize the colors, fonts, and other elements to match your Squarespace website.
  3. Copy the Google Calendar widget embed code. Click the ‘Embed on website’ button on the upper right and copy the embed code.
  4. Log in to Weebly
Weebly login page with fields for email and password, and options to log in with Facebook, Google, or Square.

5. On your existing website on Weebly, click the “Pages” section on the upper left then click the “+”.

Screenshot of a website builder interface with a blue abstract background and text "Hi, I'm Sarah Smith. A creative"

6. Select what type of page you want to add.

Screenshot of a website editing interface with a blue smoke design and text "Hi, I'm Sarah Smith. A creative".

7. Add a name to your page and then click “Done”.

Screenshot of a website editor interface with a toolbar on the left and a "Click here to edit" prompt.

8. On the top menu, click “Build” then on the sidebar, drag the “Embed Code” option on your page. 

A screenshot of a website editing platform with a blue smoke design and text "Hi, I'm Sarah Smith. A creative".

9. Click the “Click to set custom HTML” then click “Edit Custom HTML”.

Screenshot of a website editor interface with a focus on text box editing.

10. Paste the code you copied from SociableKIT then in the upper right corner, click the “Publish” button.

A screenshot of a website editing interface with an error message overlaid on the text section.

11. Click the link to your site. Done!

How to Embed Google Calendar on Your Wix Website

To embed Google Calendar on your Wix website, follow the steps below.

  1. Sign up free to SociableKIT. Sign up for a free account on SociableKIT or login if you already have an account.
  2. Create and customize your Google Calendar widget. Create a Google Calendar widget and customize the colors, fonts, and other elements to match your Squarespace website.
  3. Copy the Google Calendar widget embed code. Click the ‘Embed on website’ button on the upper right and copy the embed code.
  4. Login to Wix.
A Wix login screen with options to continue with Google, Facebook, or Apple, and fields for email and password.

5. On your existing website click the “+” button beside the “Main pages” section.

Screenshot of a Wix website editor interface with an open side menu and blank page.

6. Then click the “Add page” button.

Screenshot of Wix website editor interface highlighting the "Add Page" option.

7. Name your page then hit enter.

Screenshot of Wix website editor interface highlighting the "Add Page" option.

8. On the left, click “Add element”. Find and click “Embed code”. Click and drag “Embed a site” on your page then resize the container.

Screenshot of a Wix website editor interface highlighting the "Add Elements" and "Embed a Site" features.

9. Click “Change website address”.

A screenshot of the Wix website editor interface with a highlighted 'Enter Website Address' field.

10. Paste the link you copied from SociableKIT then click “Apply”.

Wix website editor screen with an open HTML settings dialog box.

11. Click “Publish” on the upper right. 

Website editor interface displaying three profile cards with images and text descriptions.

12. Click “View site”. Done!

A Wix website editor screen showing a 'Congratulations' pop-up for a published site.

How to Embed Google Calendar on Your Webflow Website

To embed Google Calendar on your Webflow website, follow the steps below.

  1. Sign up free to SociableKIT. Sign up for a free account on SociableKIT or login if you already have an account.
  2. Create and customize your Google Calendar widget. Create a Google Calendar widget and customize the colors, fonts, and other elements to match your Squarespace website.
  3. Copy the Google Calendar widget embed code. Click the ‘Embed on website’ button on the upper right and copy the embed code.
  4. Login to Webflow
A login screen with options to sign in with Google or enter email and password.

5. On your existing website, click the “Page: ….” in the upper left corner then click the “Create new page” icon.

A screenshot of a computer interface with a white canvas and menu options on the left.

6. Once done add a name for your new page then click “Save”.

Screenshot of a website builder's "New Page Settings" with "test-page" entered as the page name.

7. On the left, click “Add Element”. Drag “Embed” to your page.

Screenshot of a web design interface with a sidebar highlighting the 'Embed' component.

8. Paste the JavaScript code you copied from SociableKIT.

Screenshot of an HTML embed code editor within a web design interface with a warning about custom code validation.

9. On the upper right, click “Publish” > “Publish to Selected Domains”. 

Screenshot of a web design interface with a "Publish to Selected Domains" button highlighted.

10. View your page. Done!

How to Embed Google Calendar on Your Squarespace Website

To embed Google Calendar on your Shopify website, follow the steps below.

  1. Sign up free to SociableKIT. Sign up for a free account on SociableKIT or login if you already have an account.
  2. Create and customize your Google Calendar widget. Create a Google Calendar widget and customize the colors, fonts, and other elements to match your Squarespace website.
  3. Copy the Google Calendar widget embed code. Click the ‘Embed on website’ button on the upper right and copy the embed code.
  4. Login to Shopify
A login screen for Spotify on a gradient teal background.

5. On the left side, click Online Store.

A screenshot of a Shopify admin panel with settings highlighted and an arrow pointing to "Store status".

6. Click Pages. Add a new page or edit your existing page.

Screenshot of Shopify admin panel highlighting the "Pages" section and "Add page" button.

7. On the Page details, click Show HTML icon (<>). 

Screenshot of a webpage editing interface with an arrow pointing to the 'Insert image' icon in the toolbar.

8. Paste the embed code and click the Save button.

Screenshot of a Shopify page editor with HTML code for a Facebook widget highlighted.

9. Click the View page button. Done!

Screenshot of a Shopify dashboard with an arrow pointing to a "Save menu" button.

How to Embed Google Calendar on Your HTML Website

To embed Google Calendar on your HTML website, follow the steps below.

  1. Sign up free to SociableKIT. Sign up for a free account on SociableKIT or login if you already have an account.
  2. Create and customize your Google Calendar widget. Create a Google Calendar widget and customize the colors, fonts, and other elements to match your Squarespace website.
  3. Copy the Google Calendar widget embed code. Click the ‘Embed on website’ button on the upper right and copy the embed code.
  4. Open your HTML file.
  5. You can create a new HTML page or edit your existing HTML page.
A screenshot of a Notepad document with HTML code on a computer screen.

6. Paste the Javascript code you copied from SociableKIT. Paste it where you want the widget to appear.

Screenshot of a computer interface showing a context menu with options, highlighted by a yellow arrow.

7. Save your HTML page.

A screenshot of a computer's notepad application with written text.

8. You may now upload your HTML page to your web hosting.

How to Embed Google Calendar on Your Squarespace Website

To embed Google Calendar on your Google Sites website, follow the steps below.

  1. Sign up free to SociableKIT. Sign up for a free account on SociableKIT or login if you already have an account.
  2. Create and customize your Google Calendar widget. Create a Google Calendar widget and customize the colors, fonts, and other elements to match your Squarespace website.
  3. Copy the Google Calendar widget embed code. Click the ‘Embed on website’ button on the upper right and copy the embed code.
  4. Login to Google sites. You must have at least a ‘Business Starter’ plan to create and customize your Google sites.
Google Sign In page with an empty email field and a blue "Next" button.

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

A screenshot of the Google Sites homepage with template options and a "Start a new site" prompt.

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

A computer screen displaying "SociableKIT" on a webpage with a user interface panel to the right side.

7. Add the widget. A popup ‘Embed from the web’ will open up. Select the ‘Embed code’ tab on the popup.

A screenshot of a web interface with a pop-up titled "Embed Post from the web," highlighting a URL input box.

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

Embed menu on a screen with a red arrow pointing to an input field for a URL.

9. Save the widget. Once you have pasted your embed code, click the ‘Next’ button.

Screenshot of a pop-up dialog box with error message on a web development platform, with a red arrow pointing to the "Save" button.

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

A screenshot of a social media embed window with the hashtag #SocialBot and a 'Tweet' button highlighted.

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

A screenshot of the SociableKIT website interface, highlighting the brand's name and logo.

12. Publish your page. After publishing the site, click the down ‘Arrow’ button beside the ‘Publish’ button.

Screenshot of SociableKIT web page with the profile info and 'Publish' button highlighted.

13. View your page. A dropdown of buttons will be displayed, click the ‘View published site’ button. Done!

A screenshot of the SociableKIT website interface, displaying social media integration services.

How to Embed Google Calendar on Your SharePoint Website

To embed Google Calendar on your Sharepoint website, follow the steps below.

  1. Sign up free to SociableKIT. Sign up for a free account on SociableKIT or login if you already have an account.
  2. Create and customize your Google Calendar widget. Create a Google Calendar widget and customize the colors, fonts, and other elements to match your Squarespace website.
  3. Copy the Google Calendar widget embed code. Click the ‘Embed on website’ button on the upper right and copy the embed code.
  4. Go to your Sharepoint site and log in with your credentials.
Screenshot of a Microsoft sign-in page with email field on a gradient background.

5. Locate the page that you want to edit or create a new blank page. If you are creating a new page, click the “New” button and select “Page” from the options.

Screenshot of a computer interface highlighting the 'Compose' button in an email application.

6. On the upper right corner of the page, click the “Edit” button. This will enable you to make changes to the page.

Screenshot of a computer interface with a red arrow pointing to the "Create" button.

7. Hover over the area where you want to add the SociableKIT widget, then click the “+” icon that appears. From the list of options, find the “Embed” or “<>” icon and click on it.

Screenshot of a computer interface with an arrow pointing to a "Share" button on a dialog box.

8. Paste the embed code provided by SociableKIT into the box.

Screenshot of a web interface with an arrow pointing to an embed code box.

9. Click the “Publish” or “Republish” button to save your changes and make them live on the site. If necessary, upload the page to your website. You’re done!

Screenshot of a web interface with a prominent "Publish" button indicated by a red arrow.
  • widgets.sociablekit.com
  • data.accentapi.com
  • sociablekit.com
  • images.sociablekit.com

Did not see your website builder? You can find your website builder here: How to embed Google Calendar on any website?.

You may also ask our support team if SociableKIT can integrate with your website builder.

If you want to find out more about embedding social media feed to your website, visit our homepage: Add social media feed to your website for FREE!

This Google Calendar feed is part of our Google feed widget categories.

Related Links

Here are some related links about Google Calendar that might help you:

What is Google Calendar? Google Calendar is a free tool to organize your schedule and share events with others. Knowing what Google Calendar is helps you understand why embedding it on your website is useful.

How to embed Google Calendar on website? Learn how to add a Google Calendar to your website for free, making it easy for visitors to save your events. This guide complements your understanding of embedding Google Reviews by showing you how to add a Google Calendar to your site.

API to read content from Google Calendar? The Google Calendar API lets you access and manage calendar events through HTTP calls or Google Client Libraries. This API can help you embed and manage your Google Calendar events directly on your website.

How to create Google Calendar? Learn how to create a new Google Calendar to keep track of different events. Setting up your own Google Calendar is the first step to embedding it on your website for free.

How to upload a photo or video to Google Calendar? Learn how to easily add photos, videos, and other files to your Google Calendar events. Adding attachments like photos and videos to your Google Calendar events enhances their usefulness, just like embedding the calendar on your website.

Conclusion

Google calendar is a great way to connect with your site visitors by giving them the ability to view your schedule. You don’t need to be a professional developer or designer in order to add Google Calendar to your website, it’s super easy, requires little to no coding knowledge, and is free. If you have the ability, the time, and the desire – then get started!

What’s next?

Discover additional widget types you can embed on your website to enhance your business:

If you integrate these widgets, you can improve user engagement and provide valuable information directly on your website.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *