🗓️ Want to let visitors view your availability or book appointments directly from your website? Whether you’re using a custom-coded site or the UltimateWB website builder, embedding a Google Calendar or a third-party booking system is simple – and in this tutorial, we’ll show you exactly how to do it, step-by-step. (If you’re using UltimateWB, you can also use the built-in Calendar app as an alternative.)
✅ Why Add a Calendar or Booking System?
Integrating a calendar or booking tool improves your website by:
- Letting users see your availability instantly
- Allowing visitors to book appointments without email back-and-forth
- Increasing engagement and saving you time
🥇 Option 1: Embed a Google Calendar on Your Website
Step 1: Get Your Embed Code
- Open Google Calendar.
- On the left under My Calendars, hover over the calendar you want to embed.
- Click the three-dot menu → Settings and sharing.
- Under Access permissions, check Make available to public (so anyone can view it).
- Scroll to Integrate calendar → copy the iframe embed code.
Here’s what the embed code looks like:
<iframe src="https://calendar.google.com/calendar/embed?src=your_calendar_id&ctz=Your_Timezone"
style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
Step 2: Add It to Your Website
On a Custom Website:
Paste the embed code wherever you want the calendar to appear in your HTML.
On UltimateWB:
UltimateWB makes it easy with the Ad(d)s App:
- Log in to your UltimateWB Admin Panel.
- Go to Ad(d)s App → Add New Ad(d).
- Paste your Google Calendar embed code into the Code box and save.
- Insert it on your page using the generated Placeholder Text.
Check out the UltimateWB User Manual topic: Adding Google Ads, You Tube Videos, Gym Chat Videos/Media Feeds, Google Analytics, and other Plugins
✔ 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.
Step 3: Make the Calendar Responsive
To make the calendar mobile-friendly, wrap the iframe in a responsive container:
<div style="position:relative;padding-bottom:75%;height:0;overflow:hidden;">
<iframe src="..." style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0"></iframe>
</div>
📏 Adjust padding-bottom based on your desired aspect ratio (e.g., 56.25% for 16:9).
🥈 Option 2: Add a Custom Booking System (e.g., Calendly, SimplyBook)
Want to use a full-featured booking service? Here’s how:
Popular Booking Tools:
How to Embed It:
- Sign up and create your availability.
- Go to your booking page’s Share or Embed options.
- Copy the iframe or JavaScript widget code.
- Paste it into your site:
On Custom Sites:
Embed the code directly in your HTML.
On UltimateWB:
Use the Ad(d)s App the same way as with Google Calendar. Paste the code and place it using the generated Placeholder Text.
💡 Pro Tip: Use Alt Text and SEO Tags
If you add a screenshot of your calendar or booking form, use descriptive alt text like:
<img src="calendar-example.jpg" alt="Embedded Google Calendar on a website">
This helps with accessibility and SEO!
🔗 Related Resources
- UltimateWB Ad(d)s App Tutorial
- UltimateWB Content Management Tutorials
- UltimateWB Events Calendar App Tutorials
❓ Frequently Asked Questions
Can I embed multiple calendars?
Yes! Just repeat the process for each calendar using a separate embed code.
Will this work on mobile?
Yes, as long as you use the responsive iframe technique shown above.
Do I need a plugin to embed a calendar in UltimateWB?
No plugins required – You can either embed a third-party Google Calendar, for example, or use UltimateWB’s built-in Calendar app.
📌 Final Thoughts
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.
UltimateWB’s Ad(d)s App and flexible code integration options make it easy to customize – no plugins, no bloat. Or you can just use UltimateWB’s built-in Calendar app.
🏁 Ready to Add Yours?
Let us know if you’d like help setting it up, or check out our other website integration tutorials.
Are you ready to design & build your own website? Learn more about UltimateWB! We also offer web design packages if you would like your website designed and built for you.
Got a techy/website question? Whether it’s about UltimateWB or another website builder, web hosting, or other aspects of websites, just send in your question in the “Ask David!” form. We will email you when the answer is posted on the UltimateWB “Ask David!” section.