{"id":6211,"date":"2025-06-03T23:20:51","date_gmt":"2025-06-04T06:20:51","guid":{"rendered":"https:\/\/www.ultimatewb.com\/blog\/?p=6211"},"modified":"2025-06-03T23:20:52","modified_gmt":"2025-06-04T06:20:52","slug":"how-to-embed-a-google-calendar-or-booking-system-on-your-website-custom-code-or-ultimatewb","status":"publish","type":"post","link":"https:\/\/www.ultimatewb.com\/blog\/6211\/how-to-embed-a-google-calendar-or-booking-system-on-your-website-custom-code-or-ultimatewb\/","title":{"rendered":"How to Embed a Google Calendar or Booking System on Your Website (Custom Code or UltimateWB)"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/embed-google-calendar-page-editor-ultimatewb.jpg\">    <picture>\n                <source type=\"image\/webp\" srcset=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/embed-google-calendar-page-editor-ultimatewb-150x130.webp 150w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/embed-google-calendar-page-editor-ultimatewb-500x432.webp 500w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/embed-google-calendar-page-editor-ultimatewb-610x527.webp 610w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/embed-google-calendar-page-editor-ultimatewb-800x691.webp 800w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/embed-google-calendar-page-editor-ultimatewb.webp 1005w\" sizes=\"(max-width: 767px) 100vw, 1005px\">\n                <img src=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/embed-google-calendar-page-editor-ultimatewb.jpg\" \n             srcset=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/embed-google-calendar-page-editor-ultimatewb-150x130.jpg 150w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/embed-google-calendar-page-editor-ultimatewb-500x432.jpg 500w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/embed-google-calendar-page-editor-ultimatewb-610x527.jpg 610w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/embed-google-calendar-page-editor-ultimatewb-768x663.jpg 768w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/embed-google-calendar-page-editor-ultimatewb-800x691.jpg 800w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/embed-google-calendar-page-editor-ultimatewb.jpg 1005w\" \n             sizes=\"(max-width: 767px) 100vw, 1005px\" \n             width=\"1005\" \n             height=\"868\" \n             alt=\"Embed Google Calendar via the UltimaetWB Page Editor\" \n             loading=\"lazy\" \n              \n             decoding=\"async\" \n             class=\"wp-image-6372\" >\n    <\/picture>\n    <\/a><\/figure>\n\n\n\n<p>\ud83d\uddd3\ufe0f Want to let visitors view your availability or book appointments directly from your website? Whether you&#8217;re using a custom-coded site or the UltimateWB website builder, embedding a <strong>Google Calendar<\/strong> or a <strong>third-party booking system<\/strong> is simple &#8211; and in this tutorial, we\u2019ll show you exactly how to do it, step-by-step. <em>(If you&#8217;re using UltimateWB, you can also use the built-in <a href=\"https:\/\/www.ultimatewb.com\/calendar-events-app\">Calendar app<\/a> as an alternative.)<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u2705 <strong>Why Add a Calendar or Booking System?<\/strong><\/h2>\n\n\n\n<p>Integrating a calendar or booking tool improves your website by:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Letting users <strong>see your availability instantly<\/strong><\/li>\n\n\n\n<li>Allowing visitors to <strong>book appointments without email back-and-forth<\/strong><\/li>\n\n\n\n<li>Increasing engagement and <strong>saving you time<\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\udd47<strong> Option 1: Embed a Google Calendar on Your Website<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Get Your Embed Code<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open <a href=\"https:\/\/calendar.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Calendar<\/a>.<\/li>\n\n\n\n<li>On the left under <strong>My Calendars<\/strong>, hover over the calendar you want to embed.<\/li>\n\n\n\n<li>Click the <strong>three-dot menu \u2192 Settings and sharing<\/strong>.<\/li>\n\n\n\n<li>Under <strong>Access permissions<\/strong>, check <strong>Make available to public<\/strong> (so anyone can view it).<\/li>\n\n\n\n<li>Scroll to <strong>Integrate calendar<\/strong> \u2192 copy the <strong>iframe embed code<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p>Here\u2019s what the embed code looks like:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;iframe src=\"https:\/\/calendar.google.com\/calendar\/embed?src=your_calendar_id&amp;ctz=Your_Timezone\"<br> style=\"border: 0\" width=\"800\" height=\"600\" frameborder=\"0\" scrolling=\"no\"&gt;&lt;\/iframe&gt;<br><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Add It to Your Website<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>On a Custom Website:<\/strong><\/h4>\n\n\n\n<p>Paste the embed code wherever you want the calendar to appear in your HTML.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>On UltimateWB:<\/strong><\/h4>\n\n\n\n<p>UltimateWB makes it easy with the <strong>Ad(d)s App<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Log in to your UltimateWB Admin Panel.<\/li>\n\n\n\n<li>Go to <strong>Ad(d)s App \u2192 Add New Ad(d)<\/strong>.<\/li>\n\n\n\n<li>Paste your Google Calendar embed code into the <strong>Code<\/strong> box and save.<\/li>\n\n\n\n<li>Insert it on your page using the generated Placeholder Text.<\/li>\n<\/ol>\n\n\n\n<p>Check out the UltimateWB User Manual topic: <a href=\"https:\/\/www.ultimatewb.com\/adds-app\/adding-google-ads-media-plugins-analytics\">Adding Google Ads, You Tube Videos, Gym Chat Videos\/Media Feeds, Google Analytics, and other Plugins<\/a><\/p>\n\n\n\n<p>\u2714 Tip: You can also paste it directly into the custom code section of a page or content block. But the Ad(d)s app is recommended for simplicity.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Make the Calendar <a href=\"https:\/\/www.ultimatewb.com\/blog\/?s=responsive\">Responsive<\/a><\/strong><\/h3>\n\n\n\n<p>To make the calendar <a href=\"https:\/\/www.ultimatewb.com\/blog\/?s=mobile-friendly\">mobile-friendly<\/a>, wrap the iframe in a responsive container:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;div style=\"position:relative;padding-bottom:75%;height:0;overflow:hidden;\"&gt;<br>  &lt;iframe src=\"...\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" frameborder=\"0\"&gt;&lt;\/iframe&gt;<br>&lt;\/div&gt;<br><\/code><\/pre>\n\n\n\n<p>\ud83d\udccf Adjust <code>padding-bottom<\/code> based on your desired aspect ratio (e.g., 56.25% for 16:9).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\udd48 <strong>Option 2: Add a Custom Booking System (e.g., Calendly, SimplyBook)<\/strong><\/h2>\n\n\n\n<p>Want to use a full-featured booking service? Here\u2019s how:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Popular Booking Tools:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/calendly.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Calendly<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/simplybook.me\/\" target=\"_blank\" rel=\"noreferrer noopener\">SimplyBook.me<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/tidycal.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">TidyCal<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How to Embed It:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Sign up and create your availability.<\/li>\n\n\n\n<li>Go to your booking page\u2019s <strong>Share or Embed<\/strong> options.<\/li>\n\n\n\n<li>Copy the <strong>iframe<\/strong> or <strong>JavaScript widget<\/strong> code.<\/li>\n\n\n\n<li>Paste it into your site:<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>On Custom Sites:<\/strong><\/h4>\n\n\n\n<p>Embed the code directly in your HTML.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>On UltimateWB:<\/strong><\/h4>\n\n\n\n<p>Use the <strong>Ad(d)s App<\/strong> the same way as with Google Calendar. Paste the code and place it using the generated Placeholder Text.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udca1 <strong>Pro Tip: Use Alt Text and SEO Tags<\/strong><\/h2>\n\n\n\n<p>If you add a screenshot of your calendar or booking form, use descriptive alt text like:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;img src=\"calendar-example.jpg\" alt=\"Embedded Google Calendar on a website\"&gt;<br><\/code><\/pre>\n\n\n\n<p>This helps with <a href=\"https:\/\/www.ultimatewb.com\/blog\/?s=accessibility\">accessibility<\/a> and <a href=\"https:\/\/www.ultimatewb.com\/blog\/?s=seo\">SEO<\/a>!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd17 <strong>Related Resources<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.ultimatewb.com\/adds-app\">UltimateWB Ad(d)s App Tutorial<\/a><\/li>\n\n\n\n<li><a class=\"\" href=\"#\">UltimateWB Content Management Tutorials<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.ultimatewb.com\/calendar-events-app\">UltimateWB Events Calendar App Tutorials<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u2753 <strong>Frequently Asked Questions<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Can I embed multiple calendars?<\/strong><\/h3>\n\n\n\n<p>Yes! Just repeat the process for each calendar using a separate embed code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Will this work on mobile?<\/strong><\/h3>\n\n\n\n<p>Yes, as long as you use the responsive iframe technique shown above.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Do I need a plugin to embed a calendar in UltimateWB?<\/strong><\/h3>\n\n\n\n<p>No plugins required &#8211; You can either embed a third-party Google Calendar, for example, or use UltimateWB\u2019s built-in Calendar app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udccc Final Thoughts<\/h2>\n\n\n\n<p>Whether you want to show availability with Google Calendar or enable bookings with tools like Calendly, embedding these features directly into your site enhances usability and professionalism.<\/p>\n\n\n\n<p>UltimateWB\u2019s <strong>Ad(d)s App<\/strong> and flexible code integration options make it easy to customize &#8211; no plugins, no bloat. Or you can just use UltimateWB&#8217;s built-in Calendar app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83c\udfc1 <strong>Ready to Add Yours?<\/strong><\/h3>\n\n\n\n<p>Let us know if you\u2019d like help setting it up, or check out our other <a href=\"https:\/\/www.ultimatewb.com\/blog\/category\/integration-tutorials\/\">website integration tutorials<\/a>.<\/p>\n\n\n\n<p>Are you ready to design &amp; build your own website? Learn more about&nbsp;<a href=\"https:\/\/www.ultimatewb.com\/\">UltimateWB<\/a>! We also offer&nbsp;<a href=\"https:\/\/www.ultimatewb.com\/web-design-packages\">web design packages<\/a>&nbsp;if you would like your website designed and built for you.<\/p>\n\n\n\n<p><em>Got a techy\/website question? Whether it\u2019s about UltimateWB or another website builder, web hosting, or other aspects of websites, just send in your question in the&nbsp;<a href=\"https:\/\/www.ultimatewb.com\/ask-david\">\u201cAsk David!\u201d form<\/a>. We will email you when the answer is posted on the UltimateWB \u201cAsk David!\u201d section.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\uddd3\ufe0f Want to let visitors view your availability or book appointments directly from your website? Whether you&#8217;re using a custom-coded site or the UltimateWB website builder, embedding a Google Calendar or a third-party booking system is simple &#8211; and in &hellip; <a href=\"https:\/\/www.ultimatewb.com\/blog\/6211\/how-to-embed-a-google-calendar-or-booking-system-on-your-website-custom-code-or-ultimatewb\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4512],"tags":[2304,4445,4448,4444,4441,4450,4449,4442,4447,4443,4452,4446,4451],"class_list":["post-6211","post","type-post","status-publish","format-standard","hentry","category-integration-tutorials","tag-adds-app-2","tag-booking-system-integration","tag-calendar-integration","tag-calendly-embed","tag-custom-booking-system","tag-embed-google-calendar","tag-google-calendar-iframe","tag-online-booking-widget","tag-responsive-iframe","tag-website-appointments","tag-website-booking-setup","tag-website-calendar-embed","tag-website-scheduling"],"_links":{"self":[{"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/posts\/6211"}],"collection":[{"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/comments?post=6211"}],"version-history":[{"count":6,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/posts\/6211\/revisions"}],"predecessor-version":[{"id":6373,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/posts\/6211\/revisions\/6373"}],"wp:attachment":[{"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/media?parent=6211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/categories?post=6211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/tags?post=6211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}