Install the CoverCount booking widget on Squarespace

Use this guide when your venue website is built with Squarespace and you want guests to book CoverCount reservations directly from your site.

For most Squarespace sites, the simplest setup is a Code Block with a CoverCount iframe embed. You can also use the CoverCount widget script in a Code Block, but the iframe version is usually easier to troubleshoot because the booking URL is visible in one place.

Do not use Squarespace Code Injection for the visible booking widget. Squarespace describes Code Injection as useful for scripts such as analytics, live chat, or verification snippets, but not for adding visible page content.

Before You Start

You need:

• Your CoverCount tenant slug, such as oak-and-vine
• An optional experience slug, such as dining or wine-tasting
• Access to edit and publish your Squarespace site
• A Squarespace plan that supports iframes or JavaScript in Code Blocks

Squarespace supports basic HTML in Code Blocks on all plans, but JavaScript and iframes require supported paid plans. If your plan does not support iframes or JavaScript in Code Blocks, use a direct booking link instead.

Option 1: Add The Booking Flow With An Iframe

This is the recommended Squarespace setup.

<iframe
  src="https://explore.covercount.io/oak-and-vine/reserve?utm_source=venue-website&utm_medium=referral&utm_campaign=reservations"
  width="100%"
  height="920"
  style="border: 0;"
  loading="eager"
  title="Reservations"></iframe>

For one experience:

<iframe
  src="https://explore.covercount.io/oak-and-vine/reserve?experience=wine-tasting&utm_source=venue-website&utm_medium=referral&utm_campaign=reservations"
  width="100%"
  height="980"
  style="border: 0;"
  loading="eager"
  title="Wine tasting reservations"></iframe>

Replace oak-and-vine and wine-tasting with your CoverCount values.

Add The Code Block In Squarespace

1. Open the Squarespace page or post where reservations should appear.
2. Edit the page.
3. Click an insert point or Add Block.
4. Choose Code.
5. Open the block editor with the pencil icon.
6. Set the type to HTML.
7. Make sure Display Source is off.
8. Paste the CoverCount iframe code.
9. Save the block and page.
10. Preview the page outside the editor and check mobile layout.

If the embed does not appear while you are logged into Squarespace, test the published page in an incognito/private browser window. Squarespace notes that some embedded code may not appear while you are logged in, even when visitors can see it.

Option 2: Add The Widget Script

If you prefer the CoverCount widget script, paste this into a Squarespace Code Block set to HTML.

<div id="reserve-widget"></div>

<script src="https://explore.covercount.io/widget/reserve.js"></script>
<script>
  ReserveWidget.init({
    target: '#reserve-widget',
    tenant: 'oak-and-vine',
    venueName: 'Oak & Vine',
    utm: window.location.search,
    height: 920
  })
</script>

For one experience:

<div id="reserve-widget"></div>

<script src="https://explore.covercount.io/widget/reserve.js"></script>
<script>
  ReserveWidget.init({
    target: '#reserve-widget',
    tenant: 'oak-and-vine',
    venueName: 'Oak & Vine',
    experience: 'wine-tasting',
    utm: window.location.search,
    height: 980
  })
</script>

If the widget script does not run in your template or plan, switch to the iframe embed or direct booking link.

Height Guidance

Start with:

• 920 for ordinary reservation booking
• 980 for tasting flows, seating-choice flows, or deposit/card-hold flows
• 1040 or more if the widget appears cut off in Squarespace preview

If your page uses a narrow column, move the Code Block into a wider section. The booking flow works best with the full content width on mobile and desktop.

Tracking Website Bookings

For the iframe option, keep UTM parameters directly in the iframe src URL:

utm_source=venue-website&utm_medium=referral&utm_campaign=reservations

For the widget-script option, keep this line:

utm: window.location.search

This forwards tracking parameters from the Squarespace page URL into the CoverCount booking flow when the outer page has UTM parameters.

If The Widget Does Not Display

For a fuller checklist, see Troubleshoot the CoverCount booking widget.

Check these items first:

• The direct CoverCount booking URL works outside Squarespace.
• The Code Block type is HTML.
• Display Source is off.
• Your Squarespace plan supports iframes or JavaScript in Code Blocks.
• You tested the published page outside the logged-in editor.
• The tenant slug is correct.
• The experience slug is correct, or the experience value is removed.
• The iframe height is tall enough.

Squarespace also notes that Ajax loading and pages inside Indexes can cause issues with custom code in some cases. If the widget appears inconsistently, test it on a normal page outside an Index.

Direct Booking Link Fallback

If embedding is difficult, use a Squarespace button or navigation link instead.

https://explore.covercount.io/oak-and-vine/reserve?utm_source=venue-website&utm_medium=referral&utm_campaign=reservations

For one experience:

https://explore.covercount.io/oak-and-vine/reserve?experience=wine-tasting&utm_source=venue-website&utm_medium=referral&utm_campaign=reservations

Direct links work well for header buttons, mobile menus, announcement bars, and booking calls to action.

More Help

Squarespace's own help articles for this workflow are Code Blocks, Embed Blocks, and Using Code Injection.

For CoverCount-specific values, contact support@covercount.io.