How to Add SimplyBook.me to Your Showit Website

You chose SimplyBook.me for its flexibility, its custom intake forms, and its ability to handle complex service menus. Now you want it embedded inside your Showit site instead of sending clients to a plain external booking page.

The problem most Showit users hit is that SimplyBook.me offers multiple embed options, and the wrong one creates an experience that breaks on mobile, cuts off on smaller screens, or conflicts with Showit’s canvas rendering. According to data from Statista’s 2024 Digital Commerce report, 57% of users will abandon an online booking if the process takes longer than three minutes, and a poorly embedded scheduler makes a three-minute process feel like ten.

This guide covers exactly which SimplyBook.me embed type to use in Showit, how to configure it properly, and how to design the surrounding page to maximize completed bookings.

Why SimplyBook.me Works Well with Showit

SimplyBook.me is one of the most feature-rich scheduling platforms available at its price point.

Its free plan supports up to 50 bookings per month with one custom feature enabled. Paid plans start at $9.90 per month and unlock unlimited custom features including intake forms, memberships, packages, and waiting lists. For photographers, coaches, wellness practitioners, and creative service businesses, this breadth of functionality makes it a strong match with the type of clients Showit attracts.

Technically, SimplyBook.me generates several types of embed codes, supports custom CSS injection on higher plans, and provides a JavaScript-based widget that handles dynamic height resizing better than a static iframe. These are meaningful advantages inside Showit’s canvas environment.

The Difference Between SimplyBook.me Embed Types

SimplyBook.me offers three embed options in its widget settings.

The iframe embed is the simplest option and the most reliable across browsers. It generates a static iframe with a fixed height that you control. This works well for single-service businesses where the booking flow is short.

The JavaScript widget dynamically adjusts height as the user progresses through the booking steps. This produces a cleaner experience inside Showit because it eliminates the internal scrollbar that can appear when fixed-height iframes are too short for multi-step flows.

The popup widget opens the scheduler in an overlay triggered by a button click. This is useful for adding a booking button to multiple pages, but it is not ideal as the primary booking experience because browser popup blockers affect a portion of users.

For a dedicated booking page in Showit, the JavaScript widget is the recommended option for most service businesses.

Step-by-Step: Adding SimplyBook.me to Showit

Before you begin, log into your SimplyBook.me dashboard and confirm your booking page is fully configured with services, hours, and any required intake form fields.

Step 1: Get Your SimplyBook.me Widget Code

In your SimplyBook.me dashboard, navigate to Manage, then Integrations, then Booking Widget.

Select the “Inline” widget type from the options available. SimplyBook.me will display two code options: a simple iframe and a JavaScript widget. Copy the JavaScript widget code for the best Showit compatibility.

The JavaScript widget code looks like this in structure:

<script src=”https://widget.simplybook.me/v2/widget/widget.js”></script>

<script>

  var widget = new SimplybookWidget({

    “widget_type”: “inline”,

    “url”: “https://[your-company].simplybook.me”,

    “theme”: “default”,

    “theme_settings”: {…},

    “timeline”: “modern”,

    “datepicker”: “top_calendar”,

    “is_rtl”: false,

    “app_config”: {…}

  });

</script>

<div id=”sbw_[your-id]”></div>

Copy this entire block. You will need all three parts: the script source, the initialization script, and the target div.

Step 2: Create Your Booking Page in Showit

In Showit, add a new page named “Book a Session” or whatever matches your service language.

Set the URL slug to /book or /schedule. Design the page with your standard header and footer. Add a headline canvas section above the booking area with a clear action statement. Then add a canvas section below the headline with enough vertical space for the SimplyBook.me widget to render fully.

The canvas section height for the SimplyBook.me JavaScript widget should be set to at least 750 pixels on desktop. For services with multiple steps, 900 pixels produces a better initial render.

Step 3: Add the HTML Widget in Showit

Click Add Widget in the Showit right panel and select the HTML embed option.

Paste your entire SimplyBook.me JavaScript widget code into the HTML field. This must include all three components: the script src tag, the initialization script, and the div container.

Click save and preview. The SimplyBook.me booking interface should render within the canvas section. If it appears but is cut off at the bottom, increase the canvas section height.

Step 4: Configure the Mobile Canvas

Open the mobile canvas view in Showit using the device toggle.

Mobile canvas configuration for SimplyBook.me requires attention because the JavaScript widget renders at full width but adjusts its layout based on available screen width. On mobile, the multi-step flow becomes taller because elements that appear side-by-side on desktop stack vertically.

Set your mobile canvas section height to at least 1000 pixels for a service with intake form fields. For a simple single-service booking without forms, 800 pixels is typically sufficient. Test on an actual device after publishing to confirm.

For specific guidance on how to test Showit pages across device sizes, the screen sizes and mobile optimization testing guide provides a reliable testing workflow.

Customizing SimplyBook.me’s Appearance to Match Your Showit Brand

One of SimplyBook.me’s advantages over several competitors is its visual customization capability.

In your SimplyBook.me dashboard under Manage > Integrations > Booking Widget, there is a visual theme configuration panel. You can adjust primary color, background color, button styles, and font choices. On the Standard plan and above, you can also inject custom CSS.

Using Custom CSS to Match Your Showit Brand

If your Showit site uses a specific font family and brand color palette, SimplyBook.me’s custom CSS option lets you mirror those choices inside the widget.

To apply your primary brand color, add this CSS in SimplyBook.me’s custom CSS field, replacing the hex value with your own:

.primary-button, .book-button { background-color: #YOUR-COLOR !important; }

.step-active { border-color: #YOUR-COLOR !important; }

This level of visual alignment between your Showit canvas design and your embedded scheduler creates a booking experience that feels native rather than bolted on. For working with custom design elements in Showit, the custom code snippets guide for Showit covers how to apply and manage code additions across your site.

Setting Up SimplyBook.me Confirmation and Notifications

Once you have the widget embedded correctly, configuring the post-booking experience is the next critical step.

In SimplyBook.me, navigate to Manage > Notifications to customize email confirmations sent to clients. Write these in your brand voice, not SimplyBook.me’s default template language. Include what the client should prepare, what they will receive, and how to reschedule if needed.

Custom Redirect After Booking

SimplyBook.me supports a custom redirect URL after a booking is confirmed on some plans.

If your plan supports it, set the redirect to a custom thank-you page on your Showit site. If your plan does not include this feature, add a clear “What Happens Next” section directly below the booking widget on your Showit page so clients receive the same information immediately after booking.

Adding SimplyBook.me to Multiple Pages in Showit

Once you have the inline widget working on your dedicated booking page, you may want to add a booking button to other pages across your Showit site.

For this purpose, SimplyBook.me’s popup widget is the right choice. The popup widget generates a short script that attaches a booking trigger to any button on your page. Add the script to your Showit global header code, then add a button element to any canvas page and assign the popup trigger class.

This approach means visitors can initiate a booking from your homepage, services page, or portfolio without navigating away, while your dedicated booking page remains the primary booking destination for direct traffic.

SEO Optimization for Your SimplyBook.me Booking Page

Your booking page needs surrounding content that search engines can index.

Add 150 to 250 words of descriptive copy to the page around the SimplyBook.me widget. Describe what services can be booked, who they are for, and what the experience will be like. Include your city or region if you serve a local market, as this increases the page’s relevance for local search queries.

Set the page title to something like “Book a [Service Name] with [Your Business Name] in [City]” and write a meta description that includes your service category, the booking tool’s ease of use as a benefit, and a clear call to action. For a complete Showit SEO optimization checklist, the Showit SEO guide covers every technical and content-level optimization in detail.

Common SimplyBook.me and Showit Integration Issues

This is what separates approaches that work from those that do not.

Issue: Widget renders as blank white space This typically means the JavaScript widget code was not fully copied. Verify all three components are present in your Showit HTML widget: the external script src, the initialization script, and the target div element.

Issue: Booking flow cuts off mid-step on desktop Increase your canvas section height. The SimplyBook.me JavaScript widget height changes as users progress through steps. If the initial canvas height was set for the first step only, later steps will clip.

Issue: Widget is invisible on mobile but visible on desktop Open your Showit mobile canvas view. The HTML widget needs to be enabled and visible in mobile canvas mode. In Showit, desktop and mobile are independent layouts. If you added the widget in desktop view, verify it is set to visible in mobile view as well.

Conclusion

SimplyBook.me integrates effectively with Showit when you use the JavaScript inline widget, configure it with sufficient canvas height for both desktop and mobile, and design the surrounding Showit page with conversion-focused content above and below the embed.

Start with the widget code from SimplyBook.me’s Integrations panel, add it to a dedicated Showit canvas page, apply brand-matching colors using SimplyBook.me’s theme settings, and set up your notification emails in your own voice.

If you want the integration set up correctly without working through the technical details, the Showit integration service handles tool connections end to end, including post-booking redirect configuration and mobile layout optimization.

Every completed booking starts with a page that does not get in the way.

Frequently Asked Questions