Square Appointments is one of the most capable free scheduling tools available to service businesses, but getting it to display cleanly inside a Showit website is where most setups fall apart.
The default Square booking link sends your clients to a generic Square-hosted page that shares nothing with your brand. According to a 2024 Edelman Trust Barometer report, 81% of consumers say trust is a deciding factor in purchasing decisions, and a jarring visual inconsistency between your website and your booking tool undermines that trust in seconds.
This guide walks through exactly how to embed Square Appointments into your Showit site, how to design the page around it, and how to make the full experience feel like one cohesive brand journey.
What Square Appointments Offers Showit Users
Square Appointments is part of the broader Square ecosystem, which means it connects natively to Square payments, Square POS, and Square’s customer management tools.
For service businesses that already process payments through Square, this integration is particularly valuable because it allows you to collect deposits or full payments at the time of booking without adding a separate payment processor. As of 2024, Square Appointments is free for individual users with a single location, making it one of the most accessible scheduling tools available.
The platform supports service menus, staff scheduling, calendar syncing with Google Calendar and Outlook, automated reminders, and customizable intake forms. All of these features remain fully functional when the scheduler is embedded inside Showit.
What Square Appointments Does Not Do
Square Appointments has some limitations worth knowing before you commit to it as your primary scheduling tool.
It does not natively support multi-location booking on the free plan. It also has limited design customization within its own interface. The hosted booking page Square generates is functional but visually generic. This is precisely why embedding it inside a custom-designed Showit page, rather than linking out to the Square-hosted version, produces a significantly better client experience.
Step-by-Step: Embedding Square Appointments in Showit
Now for the practical side of this. The process is more specific than Square’s own documentation suggests, so follow each step precisely.
Step 1: Generate Your Square Appointments Embed Code
Log into your Square Dashboard at squareup.com.
Navigate to Appointments in the left sidebar, then select Online Booking, and click Share. You will see two options: a direct link and a “Book Now Button” embed. For a full inline scheduler on your Showit page, do not use the button embed. Instead, copy the direct booking URL from this screen. You will use it to construct an iframe embed manually.
Your direct booking URL will follow this format: https://squareup.com/appointments/book/[your-location-id]/[your-business-slug]
Step 2: Construct the Iframe Embed
Square does not offer a native inline widget embed code like Calendly or Acuity.
To embed the Square booking interface directly inside your Showit page, you need to construct a custom iframe. Use the following code structure, replacing the src URL with your own Square booking URL:
<iframe
src=”https://squareup.com/appointments/book/YOUR-LOCATION-ID/YOUR-SLUG”
width=”100%”
height=”800″
frameborder=”0″
scrolling=”no”
style=”border:none; overflow:hidden;”>
</iframe>
Set the height attribute to 800 pixels as a starting point. You will adjust this after testing.
Step 3: Add the Embed to Your Showit Canvas
In Showit, navigate to the booking page you created for this purpose.
Add an HTML widget to your canvas by clicking Add Widget in the right panel. Paste your iframe code into the HTML field. Click save and preview the canvas. The Square booking interface should appear inside the canvas section.
If the booking interface loads but is clipped at the bottom, increase the iframe height attribute in increments of 100 pixels until the full booking flow is visible without internal scrolling.
Step 4: Configure Your Mobile Canvas Separately
Open the mobile view in Showit using the device toggle at the top of the canvas editor.
Square Appointments is mobile-responsive within its own interface, but it needs sufficient canvas space to render correctly. Set your mobile canvas height to at least 900 pixels for the section containing the Square embed. Test by visiting the live page from an actual mobile device to confirm the booking flow is fully accessible.
For a detailed approach to mobile canvas optimization in Showit, the Showit mobile layout design guide covers the specific canvas adjustments that resolve most mobile display issues.
Designing Your Square Appointments Booking Page in Showit
The embed is only one part of the page.
A well-designed booking page in Showit frames the Square scheduler with brand-consistent design elements that reinforce trust and reduce booking abandonment. This is what separates approaches that work from those that do not.
Page Structure That Converts
Above the Square embed, add a canvas section with a clear, benefit-driven headline.
Something like “Book Your Session in Under Two Minutes” performs better than “Schedule an Appointment” because it addresses the visitor’s concern about time. Follow the headline with one to two sentences confirming what they are about to book and what they will receive after confirming.
Below the embed, add a short section with two to three frequently asked questions about your booking process. Common ones include: “Do I need to create an account to book?” (No, Square allows guest booking), “Can I reschedule?” and “What happens if I need to cancel?”
This content serves two purposes. It reduces pre-booking hesitation, and it gives search engines readable text to index on a page that otherwise contains only an embedded iframe.
Matching Square’s Interface to Your Brand
Square Appointments allows limited visual customization within its own settings.
In your Square Dashboard under Appointments > Online Booking > Customize, you can upload your logo, set a primary color that matches your brand palette, and write a welcome message. While this does not give you the full design control of a native Showit element, it meaningfully reduces the visual discontinuity between your Showit page and the Square booking interface itself.
Connecting Square Payments to Your Booking Flow
One of Square Appointments’ strongest features for Showit users is its built-in payment collection.
In your Square Appointments settings, navigate to Payments and select whether you want to require full prepayment, a deposit, or card-on-file without charging. For service businesses that have experienced no-shows, requiring a deposit or card-on-file at the time of booking reduces no-show rates by approximately 50%, according to scheduling industry data published by Appointy in their 2024 industry report.
This payment functionality works fully when Square is embedded inside Showit. The payment step appears as part of the multi-step booking flow within the embedded iframe.
Setting a Custom Confirmation Redirect
After a client completes a booking, Square can redirect them to a custom URL.
In Square Dashboard, navigate to Appointments > Online Booking > Confirmation Page and enter the URL of a thank-you page on your Showit site. Create this thank-you page in Showit with a warm confirmation message, what-to-expect instructions, and a next step such as joining your email list or following you on Instagram.
This redirect also enables conversion tracking in Google Analytics. For setting up Google Analytics on Showit, the Google Analytics setup guide for Showit walks through the configuration process.
Troubleshooting Common Square Appointments Embed Issues
Here is where most guides stop, but this is where it gets important.
Issue: “This content cannot be displayed in a frame” This error appears when Square’s security headers (X-Frame-Options) block iframe embedding. As of 2024, Square Appointments booking pages are generally embeddable, but if you encounter this error, verify you are using the booking URL (squareup.com/appointments/book/…) and not a Square dashboard URL or settings page URL.
Issue: Square embed loads on desktop but not mobile This is nearly always a Showit canvas height issue on the mobile layout. Open your mobile canvas, locate the HTML widget, and increase the containing canvas section height. Set overflow to visible if you are using a custom canvas wrapper.
Issue: Booking page looks unstyled or broken Clear your browser cache and reload. Showit’s preview environment sometimes caches previous versions of embeds. Always test the live published page, not the Showit preview, for a final check.
SEO Setup for Your Square Appointments Booking Page
Your booking page needs surrounding content to be indexed effectively.
Add 200 words of descriptive text to the page: what services can be booked, who the bookings are for, where you are located if you are a local business, and what clients can expect from the process. This text gives Google meaningful content to index and increases the likelihood that your booking page appears in local search results.
Set the page title to something like “Book a [Service Type] Appointment with [Your Business Name]” and write a meta description that includes your service category, location if relevant, and a clear call to action. For comprehensive Showit SEO setup, the Showit SEO checklist covers every on-page optimization step.
Conclusion
Square Appointments embeds cleanly inside Showit when you use a manually constructed iframe pointed at your Square booking URL, configured with sufficient canvas height and a matching mobile layout.
The most important steps are: generate your Square booking URL, build a custom iframe embed, add it to a dedicated Showit canvas page with brand-consistent design above and below the embed, configure payment settings inside Square, and set a custom redirect to a Showit thank-you page.
If you want your Square Appointments integration fully configured and connected to your Showit site without working through the technical setup yourself, the Showit integration service handles third-party tool connections from embed to confirmation flow.
Your booking experience should feel as polished as your portfolio.
Frequently Asked Questions
Is Square Appointments free to embed on a Showit website?
Yes. Square Appointments is free for individual users with one location. The embedding process uses a standard iframe and does not require any paid Square plan upgrade.
Why does the Square booking page show an error when embedded?
The most common cause is using the wrong Square URL in the iframe. Use your public booking URL (squareup.com/appointments/book/…) rather than a URL from inside your Square dashboard.
Can I collect a deposit through Square Appointments embedded in Showit?
Yes. Square’s deposit and prepayment settings are configured inside your Square Dashboard and apply to all bookings regardless of where the scheduler is accessed, including when it is embedded in Showit.
How do I get Square Appointments to work on mobile in Showit?
Open your Showit mobile canvas view separately and adjust the canvas section height to at least 900 pixels for the section containing your Square embed. Test on a real device after publishing.
Can I redirect clients to a custom page after booking through Square?
Yes. In your Square Dashboard, navigate to Appointments > Online Booking > Confirmation Page and enter the URL of a thank-you page on your Showit site.
Does embedding Square Appointments affect my Showit site speed?
The Square embed loads as a separate iframe, which means it loads independently from your Showit page content. It does not block page rendering, though it adds to overall page weight. Keeping your Showit page images optimized helps offset this.
Can I embed multiple Square Appointment types on the same Showit page?
Square generates one booking URL per location. If you have multiple service types, they all appear within the same booking flow. You cannot embed individual service types as separate iframes without a paid Square integration workaround.
