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

How to embed Booking Calendar on your iFrame website for FREE?

Simplify bookings with our Booking Calendar widget, allowing visitors to easily view availability and schedule appointments or reservations directly on your website.

Create your widget
Free forever plan No credit card Cancel any time
How to embed Booking Calendar on your iFrame 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 Booking Calendar on iFrame website — live in 3 steps

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

  1. Create in 60 seconds

    Pick Booking 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 iFrame website. No dev team needed.

Create your widget
  • Free forever plan
  • No credit card
  • Cancel any time
Full walkthrough

Embed Booking Calendar with SociableKIT — step by step

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

Complete Guide

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

Create and customize your Booking Calendar widget

The first part is creating your Booking 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 Booking Calendar on your iFrame website for FREE?
  2. Select "Booking 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 "Booking Calendar" on the dropdown - How to embed Booking Calendar on your iFrame website for FREE?


  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 Booking Calendar on your iFrame 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 Booking Calendar on your iFrame website for FREE?
  5. Paste the embed code and save your iFrame website page. Please follow the second part below to add Booking Calendar widget to your iFrame website .

Add Booking Calendar widget to your iFrame website

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

  1. Copy your free Booking 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. Go to the widget you like to embed, click the Embed on Website button, and choose the Website option.
  3. On the code section, choose the Link option.
  4. Copy the Link code.
  5. In any of your editor/builder to be used, create an iFrame tag.
  6. Add an "src" attribute in the iFrame and paste the copied link.
  7. Add width="100%", height=1000 (depends on your desired height), frameborder=0 (to have no border).
  8. Done! Save and check your website.

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 Booking Calendar on your iFrame site, follow the steps below after you have your SociableKIT embed code.

  1. Sign up free to SociableKIT and create your Booking Calendar widget.
  2. Customize your widget and copy the embed code from the dashboard.
  3. Go to the widget you like to embed, click the Embed on Website button, and choose the Website option.
  4. On the code section, choose the Link option.
  5. Copy the Link code.
  6. In any of your editor/builder to be used, create an iFrame tag.
  7. Add an "src" attribute in the iFrame and paste the copied link.
  8. Add width="100%", height=1000 (depends on your desired height), frameborder=0 (to have no border).
  9. Done! Save and check your website.
Full iFrame tutorial →

To embed Booking 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 Booking 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 Booking 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 Booking 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 Booking 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 Booking 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 Booking 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 Booking 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 Booking 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 Booking 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 Booking 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 Booking 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 Booking 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 Booking 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 →

Common questions

Frequently asked questions

Everything you need to know about embedding Booking Calendar on your iFrame website.

What is a Booking Calendar widget?

A Booking Calendar widget places your connected availability and scheduling experience directly on your website. It helps visitors find an open time and take the next step without sending messages back and forth.

How do I add a booking calendar to my website without coding?

Create the widget in SociableKIT, connect your booking calendar source, customize the design, and copy the generated embed code. Paste it into an HTML, custom code, iframe, or embed block on your website.

What do I need to connect my booking calendar?

You need a published and working booking page or calendar source that SociableKIT supports. Confirm that its services, availability, time zone, and booking rules are correct before embedding it.

Can visitors book directly from my website?

Yes, the widget can place the connected booking experience inside your website so visitors can view available times and schedule more easily. The connected booking platform remains responsible for creating and managing the final reservation.

Do I need an API key or a developer to install the widget?

No custom API development is required for the standard SociableKIT setup. You receive a reusable embed code that can be added to any supported website builder.

Will availability changes update automatically?

Yes, paid SociableKIT plans include automatic syncing, so you can keep the same embed code when eligible source information changes. The free plan lets you request a manual sync when you want to refresh the widget.

How quickly will a calendar change appear on my website?

The change must first be saved and available in the connected booking source. It can then appear after the next SociableKIT sync, so website updates may not be instant.

Can the widget prevent double bookings?

Double-booking protection depends on the connected booking system checking its calendars and availability before confirming a time. SociableKIT displays the booking experience but does not replace the source system that reserves and blocks each slot.

Can I offer different services, durations, or appointment types?

Yes, when those options are already configured in the connected booking source. SociableKIT can present the resulting booking experience, while service names, durations, prices, and availability remain managed at the source.

Can customers choose a staff member, room, or resource?

They can when the connected booking system supports staff or resource selection and you have configured it correctly. SociableKIT does not create those assignments by itself but keeps the booking flow accessible from your website.

Can I set buffer time, minimum notice, or daily booking limits?

These scheduling rules should be configured in the connected booking source. When the source uses them to calculate availability, the website booking experience can reflect the resulting open time slots.

Will customers receive booking confirmations and reminders?

Confirmations, reminders, and follow-up messages depend on the features and settings of the connected booking platform. SociableKIT embeds the booking flow but does not send appointment emails or text messages independently.

Can customers cancel or reschedule their bookings?

They can when the connected booking system provides cancellation or rescheduling controls. Set your notice periods and policies at the source so customers receive the correct options after booking.

Can I accept payments or deposits through the widget?

Payment collection depends on the connected booking platform or a separate approved checkout process. SociableKIT does not independently process appointment payments, deposits, refunds, or transaction fees.

How does the Booking Calendar widget handle time zones?

Time-zone behavior comes from the connected booking source and the settings used for the business and customer view. Check the published widget from another device or location to confirm that visitors see the correct appointment times.

Can I collect custom questions or customer consent?

Custom fields, required questions, and consent messages must be configured in the connected booking system when it supports them. Customer and appointment records remain managed by that source rather than being stored as booking records inside SociableKIT.

Can I accept group, class, or capacity-based bookings?

Yes, when the connected booking platform supports several attendees reserving the same time slot. Set the capacity and service rules at the source so the remaining availability stays accurate.

Can I display multiple calendars, locations, or booking pages?

Yes, additional booking calendars can be connected as separate sources and used in their own widgets. Choose a SociableKIT plan with enough sources for the teams, services, branches, or locations you want to feature.

Is the Booking Calendar widget mobile responsive and customizable?

Yes, the widget adjusts to desktop, tablet, and mobile screens and can be styled with your colors, fonts, layout, spacing, and calls to action. SociableKIT works with major website builders and other platforms that accept HTML, JavaScript, an iframe, or custom embed code.

Is there a free plan, unlimited views, and customer support?

SociableKIT offers a free plan with one source, one widget, 2,000 monthly views, full design customization, branding, and sync requests. Paid plans add automatic syncing and unlimited widget views, with human chat and email support available 24/7.

Add your Booking 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 Booking Calendar widget page →