Add Online Booking to Your Tea House Website (Squarespace, Wix, WordPress, Shopify)

What you need before you start

Booking page URL, widget embed code, your “Reservations” page

Before you touch your website, gather these three things:

1. Your booking page URL: this is the direct link guests can click to start a reservation (e.g., book.tablemouse.com/your-venue). Useful as a fallback link or for social media bios.
2. Your embed code: a snippet of HTML (usually an <iframe> or <script> tag) that you'll paste into your website. Your reservation provider gives you this in your account settings.
3. A “Reservations” page on your site: if you don't already have one, create a new page titled “Reservations” or “Book a Table” in your website builder. This is where the widget will live.

Squarespace

Fastest method (code block / embed)

1. Open your Reservations page in the Squarespace editor.
2. Click Add block → Code (under “More”).
3. Paste your booking widget embed code into the code block.
4. Uncheck “Display Source” so visitors see the widget, not the code.
5. Click Save and preview the page.

Alternatively, use an Embed block if your code is a simple <iframe>. The Embed block handles basic HTML and is slightly easier to resize.

Troubleshooting (spacing, mobile, scroll)

• Extra white space below the widget: add style="border:0; overflow:hidden;" to the iframe tag.
• Widget cut off on mobile: set the iframe width to 100% and use a fixed height of at least 700px.
• Code block not available: Squarespace's Business plan (or higher) is required for code injection. On Personal plans, link to your hosted booking page instead.

Wix

Add HTML/iFrame element and paste code

1. Open the Wix editor on your Reservations page.
2. Click Add (the + icon) → Embed Code → Embed HTML.
3. In the HTML settings panel, select “Code” and paste your embed code.
4. Click “Update” to render the preview.
5. Drag the element's handles to resize it to fit your page layout.

Sizing and limitations

• Fixed height: Wix iframes use a fixed pixel height. If your booking form is taller than the default, you'll see scrollbars inside the widget. Increase the height to 800–1000px.
• Wix Studio (Editor X): uses the same embed HTML element but supports responsive breakpoints. Set different heights for desktop and mobile.
• Wix ADI: switch to the Wix Editor for full control over code embeds.

WordPress

Custom HTML block vs Embed block

WordPress offers two options for embedding booking code:

1. Custom HTML block: in the block editor (Gutenberg), add a “Custom HTML” block and paste your embed code. This works with <iframe> and <script> tags.
2. Embed block: WordPress auto-embeds URLs from supported providers. If your booking provider isn't in the oEmbed list, use the Custom HTML block instead.

Iframe/script restrictions and plan requirements

• WordPress.com (hosted): the free and Personal plans strip <iframe> and <script> tags. You need a Business plan or higher to use Custom HTML blocks with embeds.
• Self-hosted WordPress (WordPress.org): no restrictions. Paste your embed code in a Custom HTML block.
• Classic editor: switch to the “Text” tab (not “Visual”) and paste the raw HTML.

Shopify

Embed code patterns and theme editor notes

1. In Shopify admin, go to Online Store → Pages and open (or create) your Reservations page.
2. In the page content editor, click the </> (Show HTML) button to switch to HTML mode.
3. Paste your embed code and save.

If you prefer using the theme editor: go to Online Store → Themes → Customize, add a Custom Liquid or Custom HTML section to your reservations page template, and paste the code there.

Note: Shopify's rich text editor may strip certain tags when switching between visual and HTML modes. Always verify the embed renders correctly after saving.

Where to place booking for conversions

Header CTA, sticky “Book” button, dedicated reservations page

The booking widget on your Reservations page is the core, but don't stop there. Add booking entry points across your site:

• Header navigation: a “Book Now” button in your main navigation that links to your Reservations page. Make it visually distinct (filled button, contrasting color).
• Sticky mobile button: a fixed “Book” button at the bottom of the screen on mobile. This stays visible as guests scroll through your menu, gallery, or events.
• Homepage hero: a CTA button in your hero section linking to the Reservations page.
• Event pages: each event should have its own booking button or inline widget, not just a link to the general reservations page.

QA checklist

Test on mobile, confirmations, analytics tagging

Before going live, run through this checklist:

1. Mobile test: open your Reservations page on a phone. Can you complete a booking without horizontal scrolling or elements being cut off?
2. Confirmation email: make a test booking. Did you receive a confirmation? Does it include the correct date, time, and venue details?
3. Reminder test: if your system allows test reminders, trigger one. Check the timing and content.
4. Multiple browsers: test in Chrome, Safari, and Firefox. Iframe rendering can vary.
5. Analytics: add UTM parameters to your embed URL (e.g., ?utm_source=website&utm_medium=embed) and verify the traffic appears in Google Analytics.
6. Google Business Profile: update your “Book online” link in your Google Business Profile to point to your new Reservations page.
7. Social bios: update your Instagram, Facebook, and TikTok bios with the direct booking link.