Not every Showit business owner wants to pay a monthly subscription just to let clients book a call. TidyCal solves that problem with a one-time payment model and a genuinely useful free plan, and it connects to your Showit website through a simple embed code that takes about 15 minutes to set up.
This guide walks you through exactly how to connect TidyCal to your Showit site, including how to create booking types, get the embed code, place it on your Showit canvas, and configure it to match your brand.
Why TidyCal Makes Sense for Showit Users
TidyCal is a scheduling tool built by AppSumo, launched in 2021, and designed specifically for solopreneurs, coaches, freelancers, and consultants who want reliable booking without recurring monthly costs. Since its launch, TidyCal has facilitated over 3.7 million bookings across more than 200,000 users, which speaks to its reliability as a day-to-day scheduling tool.
The free plan covers unlimited bookings and one calendar connection, which is enough to get started and test the integration on your Showit site. The paid Individual plan is available as a one-time lifetime payment rather than a monthly subscription, a pricing structure that sets TidyCal apart from every major competitor.
For Showit users who want a professional booking page embedded directly on their website without paying ongoing fees, TidyCal offers strong value. It syncs with Google Calendar, Outlook, and Apple Calendar, integrates with Zoom and Google Meet for automatic video links, and collects payments via Stripe and PayPal. According to TidyCal’s official FAQ, website embedding is available on all plans including the free plan, which means there is no paywall between you and the embed functionality.
For a broader overview of scheduling tools and other integrations that work with Showit, the Showit integrations and functionality guide covers the full range.
Understanding TidyCal’s Embed System
TidyCal uses a single inline embed method. The booking calendar displays directly on your Showit page as a permanent, always-visible element. There is no built-in pop-up option in TidyCal, but the inline embed works cleanly within Showit’s canvas as long as the embed container is sized correctly.
TidyCal’s embed code consists of two parts: a div element that determines where the calendar appears on the page, and a JavaScript script tag that loads the calendar. The script tag only needs to appear once per page, even if you embed multiple booking types. Each individual booking type div needs a unique data-path value corresponding to your username and booking type slug.
You can embed a single specific booking type or your entire booking page showing all public booking types. Both use the same basic code structure with slight differences in the data-path value.
Step 1: Create Your TidyCal Account
Go to tidycal.com and sign up for a free account. No credit card is required. Once you are inside the dashboard, connect your calendar under Settings. TidyCal supports Google Calendar, Microsoft Outlook, and Apple Calendar. Connecting your calendar enables automatic conflict checking, so only genuinely available time slots appear on your booking page.
If you plan to accept paid bookings, connect your Stripe or PayPal account through the Integrations section before building any paid booking types. Payments must be connected before you publish a paid booking type, not after.
Step 2: Build Your Booking Types
Inside TidyCal, go to Booking Types and create a new booking type. Give it a clear name such as “30-Minute Discovery Call” or “60-Minute Consultation.” Set the duration, description, and meeting location. If the meeting is online, select your video conferencing tool from the integrated options and TidyCal will generate a unique link for each booking automatically.
Configure your availability windows for this booking type. You can set specific days and time ranges, add buffer time before and after each meeting, set a minimum notice period so people cannot book last-minute slots, and limit the maximum number of bookings per day.
Add any custom questions you want clients to answer before booking. This is where you capture project details, budget range, or other information you need before the call. TidyCal lets you add multiple custom fields to the booking form, and this information is included in the booking confirmation email you receive.
If you are offering a paid session, enable pricing under the booking type settings and enter the amount. TidyCal supports Stripe and PayPal, and the client completes payment during the booking process before the appointment is confirmed.
Repeat this process for each type of meeting or session you offer. On the free plan, you can connect one calendar and create unlimited booking types. The paid Individual plan allows up to 10 calendar connections and adds Zoom, Google Meet, and Zapier integrations.
Step 3: Get Your TidyCal Embed Code
To get the embed code for a specific booking type, go to your TidyCal dashboard and find the booking type you want to embed. Click the three-dot menu or look for the “Embed on your website” option associated with that booking type.
TidyCal will display the embed code, which looks like this:
<div class=”tidycal-embed” data-path=”yourusername/booking-type-slug”></div>
<script src=”https://tidycal.com/js/embed.js” async></script>
Replace yourusername with your TidyCal username and booking-type-slug with the URL slug for your specific booking type. Copy the entire code block.
To embed your full booking page showing all public booking types rather than a single event, use only your username in the data-path without a booking type slug:
<div class=”tidycal-embed” data-path=”yourusername”></div>
<script src=”https://tidycal.com/js/embed.js” async></script>
According to TidyCal’s official embed documentation, the script tag only needs to appear once per page. If you embed multiple booking types on the same page, include only one script tag and use separate div elements with unique data-path values for each booking type.
Step 4: Embed TidyCal on Your Showit Canvas
Open your Showit editor and navigate to the page where you want the TidyCal calendar to appear. This is typically a dedicated booking page, your Contact page, your Services page, or a section within your homepage.
In the Showit design app, hover over the Element icon in the bottom toolbar and select the Embed Code option. An embed box will appear on your canvas. Drag and position it where you want the calendar to sit within your page layout.
Double-click the embed box to open the code editor. Paste your complete TidyCal embed code into the field and save.
A critical sizing note: TidyCal’s embed is designed to expand to the full height it needs based on its content. The embed container in Showit should not have a fixed CSS height that could cut off the calendar. In the Showit canvas, size the embed box generously, approximately 800 to 1000 pixels tall on the desktop canvas, and set the width to match your design column. On the mobile canvas, set the width to 100% and give it ample height.
The calendar will not display inside the Showit editor. Always use Preview mode or check the published page to confirm it renders correctly. If you see empty space where the calendar should be, the embed container height in Showit is likely restricting it.
For more detail on placing and sizing embed code elements correctly within Showit’s canvas, the Showit custom code snippets guide covers all the common sizing and placement issues in detail.
Step 5: Embed Multiple TidyCal Booking Types on One Page
If you offer multiple services with different session lengths, you can display all of them on a single Showit page using TidyCal’s full booking page embed, or you can place individual booking types in different sections of the same page.
To show all your public booking types at once, use the full booking page embed code with just your username as the data-path. This presents visitors with a list of all available booking types and lets them choose the one that fits their needs.
To embed two separate booking types on the same page, create two separate Showit Embed Code widgets with a different data-path in each. Include only one TidyCal script tag across both widgets. The cleanest approach is to include the script tag in the first embed widget and omit it from the second, since the script needs to load only once per page.
Each embed widget should be sized independently to accommodate the content of its specific booking type.
Best Pages on Your Showit Website for TidyCal
Strategic placement of your TidyCal embed is what drives consistent bookings. Embedding a calendar on a rarely visited page and expecting results is not a strategy. These are the placements that work best for Showit-based businesses.
Dedicated Booking Page
A standalone Showit page built around the booking experience is the highest-converting placement. The page should include a short introduction explaining what the call or session covers, who it is for, and what happens after booking. Position the TidyCal calendar as the primary action below that copy.
For help building effective booking and conversion pages in Showit, the guide to adding a sales page in Showit covers the content structure and design elements that convert.
Services or Work With Me Page
A TidyCal booking type embedded on your Services page, placed directly after the relevant service description, gives visitors an immediate path to act on their interest. For businesses with multiple services, embed the corresponding booking type beneath each individual service section rather than pointing everyone to a generic calendar.
Contact Page
Many Showit users replace or supplement their contact form with a TidyCal embed. Visitors who are ready to book rather than just ask a question get a direct, frictionless path. For best practices on how contact forms and booking tools can work together on the same Showit page, the embed contact forms guide for Showit covers complementary placement approaches.
Homepage
A homepage CTA button linking to your dedicated booking page, or a secondary section on the homepage with a TidyCal embed, converts visitors who arrive already knowing they want to work with you. Keep the homepage placement clean: a short headline, two or three lines of context, and the calendar. For guidance on building conversion-focused homepage sections without disrupting visual flow, the high-converting Showit homepage guide is a practical reference.
After Blog Posts
Embedding a TidyCal calendar at the bottom of relevant blog posts converts readers at peak engagement. Position the embed below a contextual CTA that connects the post’s topic to the booking offer: “If you want personalised help with this, book a free strategy call below.”
Customising TidyCal to Match Your Showit Brand
TidyCal’s default appearance is clean and functional. The Individual plan adds custom branding options including the ability to remove TidyCal’s logo and add your own, which creates a more seamless experience when the calendar is embedded on a premium Showit design.
On both the free and paid plans, the colour customisation options within TidyCal let you adjust the accent colour of the booking page to align with your brand palette. Matching your brand colour in TidyCal to the button and accent colours used throughout your Showit site reduces the visual disconnect between your site design and the embedded scheduler.
The most effective approach for Showit users is to handle all the surrounding design context inside Showit: headlines, subheadlines, photography, testimonials, and brand copy. Keep the TidyCal embed itself minimal and functional. The Showit design does the trust-building, the TidyCal calendar does the conversion work.
If you need to update brand colours and fonts across your Showit site to align with any embedded tools, the guide to changing colours and fonts in a Showit template makes that process clear.
Testing Your TidyCal Integration on Showit
Before promoting your booking page to clients or running any advertising to it, test the complete booking experience from start to finish.
Publish the relevant Showit page and visit it in a live browser. Go through the full booking flow: select a date and time, fill in the booking form, and complete the booking. Then verify three things: the booking confirmation email arrives correctly, the appointment appears in your connected calendar, and any payment process you have configured works as expected.
Also test the experience on a real mobile device. TidyCal’s embed is responsive and adapts to the width of its container, but if the embed box in Showit is too narrow on the mobile canvas, the calendar may feel cramped. Adjust the mobile canvas embed container width to 100% and check the result on an actual phone screen.
For a comprehensive guide to mobile testing your Showit pages, the Showit mobile optimisation and screen size testing guide covers what to check and how to resolve common display issues.
Troubleshooting TidyCal on Showit
The Calendar Is Not Showing on the Published Page
The most common cause is that the embed code was pasted into a standard Showit text element rather than an Embed Code widget. Delete the text element, add a dedicated Embed Code widget from the Showit toolbar, and paste the TidyCal code into that widget instead.
The Calendar Appears Partially or Is Cut Off
The Showit embed container has a fixed height that is too small for the calendar content. TidyCal’s embed needs to expand freely based on its content. Increase the height of the Embed Code widget on the Showit canvas and avoid setting a maximum height that could clip the calendar.
Multiple Booking Types Are Not Displaying Correctly
If you have placed two TidyCal booking types on the same Showit page using separate embed widgets, check that only one script tag is included across both widgets. Duplicate script tags can cause display conflicts. Remove the script tag from all but the first embed widget.
Bookings Are Not Appearing in My Calendar
Go to TidyCal settings and confirm your calendar connection is active and authorised. Also check that the correct calendar is selected as the destination for new bookings within the booking type settings. Calendar connections occasionally need reauthorisation after password or security changes.
TidyCal Pricing: The One-Time Model Explained
TidyCal offers two options: a free plan and a paid Individual plan.
The free plan includes unlimited bookings, unlimited booking types, one calendar connection, basic booking confirmation emails, and website embedding on all pages. It is completely functional for Showit users who are just getting started or who only need one calendar connected.
The Individual plan is a one-time lifetime payment, not a monthly subscription. This plan adds up to ten calendar connections, Zoom and Google Meet integrations for automatic video link generation, Stripe and PayPal payment collection, Zapier integration, and the ability to remove TidyCal branding. At $29 as a one-time purchase, the Individual plan pays for itself within two to three months compared to the monthly cost of competing tools.
There is also an Agency plan for team scheduling needs, which enables collective meetings, round-robin booking types, and team member management.
Frequently Asked Questions
Does TidyCal work with Showit?
Yes. TidyCal embeds on Showit using the Embed Code widget on the canvas. Paste the TidyCal HTML embed code into a Showit Embed Code element and the booking calendar appears on your published page.
Is TidyCal free to use on my Showit website?
Yes. TidyCal’s free plan includes website embedding with no restrictions. You can embed TidyCal on your Showit pages without paying anything.
Does TidyCal have a pop-up option for Showit?
TidyCal does not have a built-in pop-up embed option. Its embed displays inline on the page. For a pop-up experience, you would need to place the embed code inside a Showit pop-up box. TheShowit pop-up guide covers how to create pop-up containers in Showit that can house embedded content.
Can I embed multiple TidyCal booking types on one Showit page?
Yes. Use separate Embed Code widgets with different data-path values for each booking type. Include the TidyCal script tag in only one of the widgets to avoid duplicate loading.
Can I accept payments through TidyCal on my Showit booking page?
Yes, on the paid Individual plan. TidyCal integrates with Stripe and PayPal, and the client completes payment during the booking process before the appointment is confirmed.
TidyCal removes the monthly fee obstacle that prevents many Showit users from adding professional scheduling to their websites. A one-time investment covers everything you need to create a polished booking experience embedded directly on your Showit pages.
Set up your booking types, embed the calendar on your most-visited pages, and let TidyCal handle the scheduling work while your Showit site continues building the impression that brings clients to you in the first place.
