Tutorial: Connecting a Booking System to Your Showit Website Template

In this guide, you'll learn how to link your Showit template to a booking system so you can accept direct reservations. You can apply these steps to any Showit website, but our Hotel Booking Templates already include placeholders for booking actions, property pages, and styling optimized for bookings.

Our templates are pre-connected to a Smoobu test account—so all you need to do is set up and link your own account. If you're using a different booking system, skip to Step 7 and embed the widget code provided by your platform.

What is Smoobu and Why We Recommend It

Before creating our hotel templates, we tested several platforms. Smoobu stood out for ease of use, reliability, design flexibility, and integration with Airbnb and Booking.com. Here's what Smoobu offers:

• Sync bookings across platforms
• No commissions on direct bookings
• Dashboard for stats and management
• Customizable pricing and availability
• Messaging API for Airbnb and Booking.com
• Automated messages and confirmations

We received great feedback from hotel owners during template development—and they loved Smoobu as much as we did.

Before You Start

• Finalize your design in Showit before linking a booking system.
• If you want to accept payments, set up Stripe or PayPal (both supported by Smoobu).
• Screenshots in this tutorial are clickable for a full-size view.

Steps to Connect Smoobu

1. Create Your Smoobu Account
Go to smoobu.com and sign up (14-day free trial available).

2. Configure Your Smoobu Account

• Add payment methods under Settings → Integrations
• Add your properties under Settings → Accommodations

3. Accommodation Settings
Go to Settings → Booking System
Use the first tab (Accommodation Settings). Prices are added on the Calendar page.

4. Booking System Settings

• Link Stripe or PayPal
• Add links to your Terms & Conditions and Privacy Policy
• Set the confirmation redirect to: <yourdomain.com>/thank-you

5. Styling the Widget
Paste the custom CSS from our instructions in the Styling section of Smoobu. Email us at hello@thestartupmarket.com if you'd like to change colors.

6. Get the Widget Code

• Go to the "Embed in Website" tab
• Select "All Accommodations"
• Tick "Open Results In New Tab"
• Copy the HTML code

7. Add the Widget to Showit

• Open Showit and go to your homepage
• Select the Booking Section and locate the Embed block
• Paste your widget code into the Custom Code box in the right toolbar

8. Add Accommodation Page Links
After publishing your site, return to Smoobu and paste your live accommodation page links under the External Link field in the Embed tab.