Cal.com has quickly become one of the most popular Calendly alternatives for independent professionals and creative businesses, and for good reason. It gives you unlimited event types, multiple calendar connections, automated workflows, and payment collection entirely on the free plan. If you have been looking for a powerful scheduling tool that works beautifully with your Showit website without a monthly fee, Cal.com is worth your full attention.
This guide walks you through every method for embedding Cal.com on your Showit site, from an inline calendar on a dedicated booking page to a floating button that follows visitors across every page, all done through copy-and-paste with no coding needed.
Why Cal.com Is a Strong Choice for Showit Users
Cal.com is an open-source scheduling platform built around the principle that scheduling infrastructure should be accessible, flexible, and free to start. Its free individual plan includes unlimited event types, multiple calendar connections, automated reminders and follow-up workflows, Stripe payment integration, and all embed options. Most scheduling tools reserve automation and payment features for paid tiers, but Cal.com offers them on the free plan.
For Showit users running photography, coaching, consulting, or design businesses, this means you can create multiple event types (a 15-minute discovery call, a 60-minute strategy session, a 90-minute onboarding) and embed each one on the relevant Showit page without paying anything extra until you need team features.
The Teams plan is available at $15 per user per month for collaborative scheduling needs, but the vast majority of solo Showit business owners will find the free individual plan covers everything they need.
Cal.com connects directly with Google Calendar, Microsoft Outlook, and Apple iCloud to prevent double bookings, and integrates with Zoom and Google Meet for automatic video call link generation. Its embed system generates clean, responsive code that places directly on your Showit canvas using the same copy-and-paste process as any other third-party widget. For a broader overview of how tools like this connect to Showit, the Showit integrations and functionality guide covers the full landscape.
Cal.com’s Four Embed Options: What Each One Does
Cal.com provides four distinct embed formats, giving you more flexibility than most scheduling tools.
Inline embed displays the full Cal.com booking calendar directly within your Showit page body. The visitor sees available time slots without clicking anything. This is the most direct and highest-converting format for dedicated booking pages because there is zero friction between the visitor and the scheduler.
Floating pop-up button adds a persistent button that stays visible in the corner of your page as visitors scroll. When clicked, it opens the Cal.com scheduler in a pop-up overlay. This format is useful on pages where you want booking accessible without a full calendar taking up canvas space.
Pop-up via element click lets any existing button, image, or text link on your Showit page trigger the Cal.com scheduler in a pop-up. The visitor sees your custom Showit design and when they click the button you designate, the booking modal opens. This is the most design-controlled option because your Showit button handles all the visual work.
Email embed generates a pre-filled booking link for use in email signatures and automated sequences. While not technically a website embed, it extends the same booking experience into your email communications.
Step 1: Create Your Cal.com Account
Go to cal.com and sign up for a free account. No credit card is required. Once your account is created, go to Settings and connect your calendar. Cal.com supports Google Calendar, Microsoft Outlook, and Apple iCloud. Connecting your calendar enables real-time availability checking, which prevents double bookings automatically.
Also connect your preferred video conferencing tool if you conduct calls online. Cal.com integrates natively with Zoom and Google Meet, and generates unique video links for each booking automatically once the integration is enabled.
Step 2: Create Your Event Types
Inside Cal.com, navigate to Event Types and create your first event. Give it a clear name like “30-Minute Discovery Call” or “60-Minute Strategy Session.” Set the duration, add a short description, configure the meeting location, and set your availability schedule.
Cal.com lets you create as many event types as you need on the free plan. This is one of its clearest advantages over Calendly’s free tier, which limits you to a single active event type. You can have separate events for every service offering or meeting type and embed each one on the relevant Showit page.
For each event, configure the questions you want to ask before booking. Cal.com lets you add custom intake fields directly to the booking form, so you can collect project details, budget range, or other relevant information before the meeting happens.
Step 3: Get Your Cal.com Embed Code
To access the embed code for any event type, go to your Cal.com event and look for the embed or share options. In your account dashboard, navigate to the event type settings, click the three-dot menu, and find the embed or share option. This opens Cal.com’s Embed Snippet Generator.
Inside the generator, you can choose your embed format: inline, floating pop-up button, or pop-up via element click. For each format, Cal.com shows you a live preview alongside the generated code. You can customise the brand colour, theme (light or dark), and layout before copying the code.
Select your preferred format, make any adjustments, and click Copy Code. Cal.com generates both HTML and React versions of the code. For Showit, you will use the HTML version.
Step 4: Embed Cal.com Inline on Your Showit Canvas
The inline embed is the most effective format for a dedicated booking page on your Showit site. Here is the step-by-step process.
Open your Showit editor and navigate to the page where you want the Cal.com scheduler to appear. This could be a dedicated “Book a Call” page, a section on your Services page, or your Contact page.
In the Showit design app, hover over the Element icon in the bottom toolbar and select Embed Code. An embed box appears on your canvas. Drag it to the position where you want the calendar to sit within your layout.
Double-click the embed box to open the code editor. Paste your Cal.com inline embed code into the field and save. The calendar will not be visible inside the Showit editor. Use Preview mode to confirm it renders correctly on the live page before publishing.
Size the Showit embed container generously. The Cal.com inline embed is responsive by design and adapts to the width of its container. Set the container to at least 700 to 800 pixels in height on the desktop canvas to ensure the full calendar, time slots, and booking form are visible without scrolling inside the embed area. On the mobile canvas, set the width to 100% and adjust the height as needed.
For a detailed walkthrough of working with Showit’s embed code widget, the Showit custom code snippets guide covers sizing, placement, and common container issues in full.
Step 5: Add the Cal.com Floating Button to Your Showit Site
The floating pop-up button places a persistent booking trigger on your page that stays visible as visitors scroll. It is ideal for pages like your homepage or blog where you want scheduling accessible at all times without disrupting the visual design.
Go back to Cal.com and generate the floating pop-up button embed code for your event type. Copy the HTML version.
In Showit, open the page where you want the button to appear. In the Page Properties panel on the right side, click the Advanced Settings tab and locate the Custom Head HTML field. Paste the Cal.com floating button code here and save.
The button will appear on the published page in the bottom corner of the screen. You can adjust the button label and colour inside Cal.com’s embed generator before copying the code. The button position and styling can be further customised by adding a small CSS override inside the same Custom Head HTML field.
For more detail on using Showit’s page head settings, the guide to adding head HTML in Showit covers exactly which settings affect which parts of your page.
Step 6: Trigger Cal.com from a Button Using Pop-Up via Element Click
This is the most design-friendly embedding method for Showit users who want full visual control over how the booking trigger looks.
In Cal.com, generate the “pop-up via element click” embed code. This code includes a JavaScript snippet and a set of attributes that you add to the element that should trigger the scheduler.
Paste the JavaScript portion into the Custom Head HTML field of your Showit page through the Advanced Settings tab. This initialises Cal.com’s embed system on the page.
For the trigger element itself, create an Embed Code widget on your Showit canvas and paste the trigger HTML into it. This creates a clickable element that opens the Cal.com scheduler when a visitor clicks it. You can then layer this embed widget over or near your Showit-designed button to visually match the rest of your page design.
Alternatively, copy just your Cal.com event link directly from your account and paste it into any Showit button’s link field. This opens the Cal.com booking page in a new browser tab rather than a pop-up overlay, which is the simplest method and requires no code at all.
Best Pages on Your Showit Website to Use Cal.com
Booking frequency is directly tied to how visible and accessible your Cal.com embed is across your site. Embedding it on one page and leaving it there will generate far fewer bookings than a strategic, multi-placement approach.
Dedicated Book a Call Page
A standalone page built around the booking experience is the highest-converting placement for an inline Cal.com embed. The page should explain what the call covers, what to prepare, and what happens next, then present the calendar as the primary action. Link to this page from your navigation, your homepage, and your services pages.
For guidance on building clean, purposeful pages in Showit, the guide to adding a booking or sales page in Showit covers the layout structure and conversion elements that work best.
Services and Work With Me Pages
Visitors reading your Services page are evaluating whether to work with you. Placing a Cal.com booking option at the end of each service description, or in a sidebar, gives them the ability to act immediately once they have made their decision. The floating button also works well here as a secondary always-visible option.
Contact Page
Many Showit businesses embed a Cal.com scheduler directly on their Contact page, either replacing the traditional form entirely or running both side by side. Visitors who prefer to go straight to booking get an immediate path forward.
For approaches to embedding contact and booking tools in Showit, the embed contact forms in Showit guide covers how to blend multiple tools on the same page effectively.
Homepage CTA
A prominent “Book a Free Call” CTA on your homepage that triggers a Cal.com pop-up via a button click creates an immediate path from first impression to booked meeting. This works best for businesses with a clear entry-point call, such as a complimentary consultation or a discovery session.
After Blog Content
A Cal.com booking section placed at the end of blog posts reaches readers who are already engaged and in a learning mindset. A contextual call to action after a post, such as “Want to talk through how this applies to your project?” followed by an inline embed or pop-up text, converts significantly better at that point in the content than a static banner.
Customising Cal.com to Match Your Showit Brand
One of Cal.com’s notable strengths for design-focused Showit users is its embed customisation options. Through the no-code Embed Snippet Generator, you can set a custom brand colour that affects the calendar’s button and accent colours, choose between light and dark themes, and adjust the layout style.
Using your exact brand hex colour in the Cal.com embed generator creates a significantly more cohesive experience than leaving the default colours in place. Your Showit design establishes the overall visual context, and the Cal.com calendar sits within it rather than standing out as a foreign element.
For team and paid plans, Cal.com allows full white-labelling, removing Cal.com branding from booking pages and adding your own logo. For solo Showit users on the free plan, the Cal.com branding is present but subtle, and most visitors will not notice it within the context of a well-designed booking page.
If you want to align brand colours and fonts across your entire Showit site, the guide to changing colours and fonts in a Showit template covers that process from end to end.
Setting Up Cal.com Workflows for Showit Bookings
Cal.com’s workflow system lets you automate email and SMS communications before and after meetings, all included on the free plan. This is one of the features that sets Cal.com apart from most free scheduling tools.
Inside Cal.com, go to Workflows and create a new workflow. Set a trigger such as “Before event” or “After event” and configure the action, which can be an email or SMS. You can build reminders that send 24 hours before a meeting, confirmation emails immediately after booking, and follow-up messages the day after a call.
Each workflow is attached to specific event types, so the reminder for a free discovery call can be different from the follow-up after a paid strategy session. This level of segmentation is normally a paid feature in competing tools.
For a broader guide to automating the follow-up and communication process from your Showit website, the email integration guide for Showit covers how these workflow touches complement your email marketing sequences.
Testing Your Cal.com Embed on Showit
Before sending any traffic to your booking page, test the complete experience from start to finish on the published version of your Showit site.
Visit the page in a real browser, trigger the booking interface, select a time slot, and complete the booking form. Check that a confirmation email arrives, that the meeting appears in your connected calendar, and that any workflow reminders you configured are queued correctly.
Also test on a real mobile device. The Cal.com inline embed is responsive and adapts to smaller screens, but the container dimensions in your Showit mobile canvas may need adjustment. If the calendar appears scrolled inside the embed container on mobile, increase the embed box height in the Showit mobile canvas view.
For comprehensive guidance on mobile testing your Showit site, the Showit mobile optimisation and screen testing guide walks through the full process.
Troubleshooting Cal.com Embeds on Showit
The Calendar Shows as Raw Code on the Page
The embed code was pasted into a standard Showit text element. Remove it, add a dedicated Embed Code widget from the Showit toolbar, and paste the Cal.com code into that widget instead.
The Calendar Is Cut Off or Missing the Booking Form
The embed container height is too small. Increase the height of the Embed Code widget in Showit to at least 700 to 800 pixels. On mobile, also ensure the container width is set to 100% rather than a fixed pixel value.
The Floating Button Is Not Appearing on the Live Page
The floating button code needs to be in the Custom Head HTML section of the page, not in a canvas embed widget. Check the Advanced Settings tab of the page in Showit’s Properties panel and confirm the code is pasted there correctly.
Bookings Are Going to the Wrong Calendar
Check your Cal.com calendar connection settings and confirm the correct calendar is set as the destination for new bookings. If you have multiple calendars connected, Cal.com lets you configure which calendar receives booked events for each individual event type.
Cal.com Pricing: What You Need to Know
Cal.com’s free individual plan includes unlimited event types, unlimited bookings, multiple calendar connections, automated workflows, routing forms, Stripe payment collection, and all embed formats. There is no subscriber limit, no event limit, and no feature wall on the individual tier.
The only notable limitation on the free plan is that Cal.com branding appears on your booking pages. White-labelling and custom domain use are available on paid plans.
The Teams plan at $15 per user per month adds shared event types, round-robin scheduling, team availability management, and advanced routing. For solo Showit users, the free plan is genuinely sufficient for professional, client-facing scheduling.
This makes Cal.com one of the most cost-effective scheduling tools available for Showit-based businesses, particularly compared to alternatives that require a paid tier to unlock automation or multiple event types.
Frequently Asked Questions
Does Cal.com work with Showit?
Yes. Cal.com embeds on Showit using the Embed Code widget on the canvas for inline embeds and element click triggers, and through the Custom Head HTML section for floating button pop-ups.
Is Cal.com free to use with Showit?
Yes. Cal.com’s free individual plan includes all embed types, unlimited event types, automated workflows, and payment collection. No paid plan is required to use Cal.com on your Showit site.
Can I have multiple Cal.com event types on different Showit pages?
Yes. Generate a separate embed code for each event type and place each one on the relevant Showit page using individual Embed Code widgets.
How is Cal.com different from Calendly for Showit users?
Cal.com’s free plan is significantly more generous than Calendly’s. Calendly’s free tier limits you to one event type and one calendar connection, while Cal.com offers unlimited event types, multiple calendar connections, and automated workflows on the free plan.
Can I collect payment through Cal.com on my Showit booking page?
Yes. Cal.com integrates with Stripe on the free plan, allowing you to charge for bookings directly through the scheduler embedded on your Showit page.
Cal.com offers Showit users everything they need to turn their website into a self-service booking system, completely free for individuals. Set up your event types, embed the inline calendar on your booking page, add a floating button across the rest of your site, and let the system handle your scheduling so you can focus on the work your clients are booking you to do.
