Back-and-forth emails to schedule a single call are one of the biggest time drains in a client-based business. Calendly eliminates that entirely by letting visitors book time with you directly from your Showit website, without leaving the page, without the ping-pong, and without any manual effort on your end.
This guide walks you through all three ways to embed Calendly on your Showit site, how to set up and customise your booking page, and the best pages to place your scheduler for maximum bookings.
Why Calendly Works So Well with Showit
Calendly is one of the most widely used scheduling tools in the world, and it connects to Showit through a simple copy-and-paste embed process that requires no developer. Visitors can see your real-time availability, pick a slot, and get a confirmation without you ever opening your calendar manually.
For Showit users running service-based businesses like photography, coaching, design, or consulting, embedding Calendly means discovery calls, consultations, and project kick-off meetings book themselves while you focus on delivering the work. Automated reminders sent by Calendly also reduce no-shows without any follow-up effort from you.
Calendly offers a free plan that allows you to create one event type with unlimited meetings, connect a single calendar, and access basic integrations. For Showit users who need multiple event types, such as a 15-minute discovery call and a 60-minute strategy session, the Standard plan starts at $10 per month billed annually. All embed options, including inline and pop-up, are available across all plan tiers.
For a broader look at how scheduling tools and other third-party widgets connect to your Showit site, the Showit integrations and functionality guide covers the full range of options.
Understanding Calendly’s Three Embed Options for Showit
Calendly offers three distinct ways to embed its scheduler on your website. Each serves a different purpose, and choosing the right one for each page makes a meaningful difference in booking conversion.
Inline embed displays your Calendly scheduling page directly within the body of your Showit canvas. Visitors see the full calendar without any clicks. This is the most direct and highest-converting option for dedicated booking pages because there is zero friction between the visitor and the calendar.
Pop-up widget adds a floating button that sits in the corner of the page and opens your scheduling page in a pop-up window when clicked. This option is useful for pages where you want scheduling available but do not want a full calendar taking up canvas space, such as your homepage or blog.
Pop-up text attaches your scheduling page to any button or text link on your page. When a visitor clicks the text, a Calendly pop-up opens. This is ideal for embedding a booking CTA within a services description, a pricing page, or a button in your navigation area.
All three options are generated directly inside your Calendly account and embedded on your Showit pages through the same copy-and-paste process.
Step 1: Set Up Your Calendly Account and Event Types
Head to calendly.com and create a free account. Once inside, connect your Google Calendar, Outlook, or other calendar service. Calendly checks this calendar in real time to prevent double bookings, so connection accuracy is important.
From your Calendly Scheduling page, create your first event type. Click Create and choose the type of event you want to offer, such as a one-on-one meeting. Set the duration, title, description, and location (a video link, phone call, or in-person address). Configure your availability windows so only times you are genuinely free appear on the booking page.
If you are on the free plan, you can have one active event type at a time. If you need multiple event types for different meeting lengths or purposes, upgrade to the Standard plan at $10 per month billed annually, which unlocks unlimited event types and connects up to six calendars.
Step 2: Customise Your Calendly Booking Page
Before generating any embed code, take a few minutes to make your Calendly booking page look as close to your Showit brand as possible.
In your Calendly account, go to Account Settings and then Profile. Upload your logo and update your profile name to match how your business is presented on your Showit site. On paid plans, you can also adjust background colour, text colour, and button colour directly when generating the embed code to align with your brand palette.
You can hide event details such as your photo, name, event duration, and description from the embedded view by selecting Hide Event Details when generating your embed code. This is helpful when the same information is already displayed in the Showit design surrounding the calendar, avoiding visual repetition.
Step 3: Generate Your Calendly Embed Code
To get the embed code for any event type or your full booking page, go to your Calendly Scheduling page. Find the event type you want to embed, click the three dots on the event card, and select Add to website.
A menu will appear with three options: Inline embed, Popup widget, and Popup text. Select the option that fits your intended placement and click Continue. You can preview how the embed will look before copying the code. Make any colour or display adjustments you want on this screen, then click Copy code.
You can repeat this process for different event types and different embed types. Each will generate a unique code snippet that you place on the relevant Showit page.
Step 4: Embed Calendly Inline on Your Showit Canvas
The inline embed is the most powerful placement for a dedicated booking page. Here is exactly how to place it in Showit.
Open your Showit editor and navigate to the page where you want the calendar to appear. This is typically a “Book a Call” or “Schedule a Discovery Call” page, but it could also be a services page or a dedicated section within your contact page.
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 it to the position where you want the calendar to sit within the page layout.
Double-click the embed box to open the code editor and paste your Calendly inline embed code. Save and close the editor.
Calendly’s inline embed has a default minimum width of 320px and a default height of 630px, which is specified inside the embed code itself. Size your Showit embed container to at least these dimensions. A generous container of approximately 800px wide and 700px tall displays the calendar cleanly on most screen sizes without any content being cut off.
The calendar will not be visible inside the Showit editor. Switch to Preview mode to confirm the calendar renders correctly before publishing.
Step 5: Add the Calendly Pop-Up Widget to Your Showit Site
The pop-up widget places a floating button on your page that visitors can click at any time to open your Calendly calendar. It is particularly effective for pages where you want scheduling accessible but do not want a full calendar taking up space in the design.
To add the pop-up widget to a Showit page, go back to Calendly and generate the pop-up widget embed code for your event type. Copy the full code snippet.
In Showit, open the page where you want the widget 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 Calendly pop-up widget code here and save.
The floating button will appear on the published page in the bottom right corner by default. On paid Calendly plans, you can adjust the button label and colour in the embed settings. If you want to move the button to the left side of the page, add a short CSS override to the same Custom Head HTML field that adjusts the button’s left and right positioning values.
For more detail on adding custom code to Showit page head sections for third-party tools and widgets, the Showit custom code snippets guide walks through every placement method.
Step 6: Use Pop-Up Text to Attach Calendly to a Button in Showit
The pop-up text option lets you turn any existing Showit button, image, or text link into a Calendly booking trigger. This approach keeps your design entirely in Showit’s hands and uses Calendly only for the scheduling functionality.
Generate the pop-up text embed code from your Calendly event settings. The code includes a JavaScript snippet and a short HTML element that acts as the clickable trigger.
Paste the JavaScript portion of the code into the Custom Head HTML section of the relevant Showit page. Then paste the HTML trigger element into a Showit Embed Code widget on the canvas, positioned over or near the button you want it to replace.
Alternatively, you can copy just your Calendly event link and paste it directly into Showit’s button link field. This will open Calendly in a new browser tab rather than a pop-up, which is a perfectly functional solution that does not require any code at all.
Best Pages on Your Showit Site to Place Calendly
Where you embed your Calendly scheduler has a direct effect on how many bookings you receive. A calendar buried on a page visitors rarely land on will generate far fewer bookings than one placed strategically on high-traffic, high-intent pages.
Dedicated Book a Call Page
A standalone page built entirely around the booking experience is the highest-converting placement for an inline Calendly embed. The page should include a short description of what the call covers, what the visitor should prepare, and what happens next. Then embed the calendar as the primary action on the page.
Link this page from your main navigation, your homepage CTA, and your services pages. For guidance on building polished dedicated pages in Showit, the guide to adding a sales or booking page in Showit covers the layout and content elements that work best.
Services and Work With Me Pages
Visitors on your Services page already have intent. A Calendly embed or a button linking to your booking page gives them the immediate ability to act on that intent. Placing it near the end of a service description creates a natural conversion moment after the visitor has read about what you offer.
Contact Page
Many Showit users replace their traditional contact form with an inline Calendly embed on the contact page, or add the scheduler as a secondary option below the form. For visitors who prefer to go straight to booking over filling out a form, the calendar accommodates that preference directly. For best practices on contact forms and embedding options in Showit, the embed contact forms guide covers the complementary approach.
Homepage Call to Action
A homepage CTA button that says “Book a Free Discovery Call” and uses the Calendly pop-up text trigger creates an immediate path from first impression to booked meeting. This works well when your service has a defined entry point, such as a complimentary consultation or a strategy call.
After Blog Posts
Embedding a short Calendly booking section at the end of blog posts captures readers who have just consumed a full article and are in a receptive, engaged mindset. A contextual call to action like “Ready to talk about your project?” with a short inline calendar or a pop-up text link converts well at this stage of the visitor journey.
Customising the Calendly Experience to Match Your Showit Brand
One of the most common concerns Showit users have about embedding scheduling tools is the visual disruption they create within a carefully designed page. Calendly gives you enough control to minimise that disruption significantly.
Use the colour customisation options in Calendly’s embed settings to match your button colour, background colour, and text colour to your Showit brand palette. On paid plans, you can remove the Calendly branding from the booking page, creating a more seamless experience.
For the inline embed in particular, design the section around the calendar in Showit using your own fonts, headlines, and any supporting imagery. The Showit design establishes the visual context, and the Calendly embed handles the functional scheduling layer. Used this way, the calendar feels like a natural part of your page rather than a foreign element dropped in.
If you need to align brand colours and fonts consistently across your entire Showit site alongside your embedded tools, the guide to changing colours and fonts in a Showit template makes the process clear and efficient.
Testing Your Calendly Integration on Showit
Always test the full booking experience on your published Showit page before sending traffic to it.
Visit the page in a real browser, not just Showit’s preview tool, and go through the complete booking flow. Select a time, fill in the booking details, and confirm the appointment. Check that the confirmation email arrives correctly, that the event appears in your connected calendar, and that any reminder emails Calendly is configured to send are set up correctly.
Also test on a mobile device. Calendly’s embed is designed to be responsive, but the embed container in Showit may need height or width adjustments for the mobile canvas view to prevent the calendar from appearing cramped or cut off on smaller screens.
For a comprehensive guide to testing your Showit site across screen sizes and devices, the Showit mobile optimisation and screen size testing guide covers what to check before and after publishing.
Troubleshooting Calendly on Showit
The Calendar Is Not Displaying on the Published Page
The most common cause is that the embed code was pasted into a standard Showit text element rather than a dedicated Embed Code widget. Delete the text element, add an Embed Code element from the Showit toolbar, and paste the Calendly code into that widget instead.
The Calendar Is Cut Off or Partially Visible
The embed container in Showit is too small. Increase the height of the Embed Code widget on the canvas to at least 700px. On the mobile canvas, set the width to 100% and increase the height as needed to display the full calendar.
The Pop-Up Widget Is Not Appearing
Check that the pop-up widget code is in the Custom Head HTML field of the Showit page, not in a canvas embed widget. The floating button is entirely JavaScript-driven and must be in the page head rather than the canvas body.
Bookings Are Not Showing in Your Calendar
Confirm that your calendar connection is active and authorised inside Calendly. Google Calendar and Outlook connections occasionally require reauthorisation, especially after password changes or security updates. Go to Calendly’s Integrations settings to check the connection status.
Calendly Pricing: What to Know
Calendly’s free plan allows one event type with unlimited meetings, one calendar connection, and basic integrations. It is sufficient to test the integration and handle a single meeting type.
The Standard plan at $10 per month billed annually adds unlimited event types, multiple calendar connections, reminders and follow-up emails, and integrations with PayPal and Stripe for paid bookings. This is the most practical tier for most Showit service businesses that offer more than one type of call or meeting.
The Teams plan at $16 per month per user billed annually adds round-robin scheduling, Salesforce integration, and advanced team routing. Most solo creative business owners will not need this tier.
Annual billing provides a 20% discount across all paid plans compared to monthly billing.
Frequently Asked Questions
Does Calendly work with Showit?
Yes. Calendly embeds on Showit through the Embed Code widget for inline embeds, and through the Custom Head HTML section for pop-up widgets. All three Calendly embed types work on Showit.
Do I need a paid Calendly plan to embed it on Showit?
No. The free Calendly plan supports all embed types including inline, pop-up widget, and pop-up text. The embed functionality is available on all plan tiers.
Can I have multiple Calendly event types on different Showit pages?
Yes. Generate a separate embed code for each event type and place it on the relevant Showit page using individual Embed Code widgets. Each code is unique to its event type.
Will Calendly look branded on my Showit website?
You can customise Calendly’s button colour, background colour, and text colour when generating the embed code. Removing Calendly branding entirely is available on paid plans.
Can I replace my Showit contact form with Calendly?
You can either replace your contact form entirely with a Calendly embed or add it as a complementary option. Many Showit businesses offer both: a contact form for general inquiries and a Calendly embed for visitors who are ready to book.
Once Calendly is embedded on your Showit website, discovery calls and consultations start booking themselves. Visitors who arrive on your site ready to take action get an immediate path forward, and you spend zero time chasing availability or managing back-and-forth messages.
Set up your first event type, embed it on your Book a Call page, and link to it from every high-intent section of your Showit site. The fewer clicks between a visitor’s interest and a booked meeting, the more meetings you will have.
