Install the CoverCount booking widget on your website

The CoverCount booking widget lets guests book directly from your venue website. It loads your hosted CoverCount booking flow inside an iframe, so your website only needs a small script and a place where the widget should appear.

The widget is the recommended setup for most venues because CoverCount keeps the booking flow, deposit flow, and confirmation experience hosted and up to date.

Before You Start

You need:

Your venue's CoverCount tenant slug, such as oak-and-vine
An optional experience slug, such as dining or wine-tasting
Access to edit the page where you want reservations to appear

If you omit the experience slug, the widget shows all public booking experiences for your venue. If you include an experience slug, the widget opens directly to that experience.

Recommended Install Snippet

Add a container where the booking widget should appear, then load the CoverCount widget script and initialize it.

<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>

Replace oak-and-vine with your venue slug and Oak & Vine with your venue name.

Link Directly To One Experience

To show one specific experience, add the experience option.

<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>

Use this when you have separate website pages for dining, tastings, private dining, or another bookable experience.

Widget Options

Option	Required	What it does
`target`	Yes	CSS selector or page element where the widget should appear.
`tenant`	Yes	Your CoverCount venue slug.
`venueName`	No	Venue name shown while the widget loads. Recommended.
`experience`	No	Limits booking to one experience slug.
`utm`	No	Usually `window.location.search`, so UTM tracking values pass into booking.
`height`	No	Iframe height in pixels. Default is `920`.
`width`	No	Iframe width. Default is `100%`.
`title`	No	Iframe title for accessibility. Default is `Reservations`.

Direct Booking Link Fallback

If your website platform does not allow custom scripts, use a normal booking link instead.

<a href="https://explore.covercount.io/oak-and-vine/reserve?utm_source=venue-website&utm_medium=referral&utm_campaign=reservations">
  Reserve now
</a>

For one experience, add the experience query parameter.

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

Raw Iframe Fallback

If your platform allows iframes but not external scripts, you can embed the hosted booking page directly.

<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>

The script widget usually feels smoother because it shows a loading placeholder before the iframe finishes loading.

Tracking Reservation Sources

Use standard UTM parameters for public website traffic:

utm_source=venue-website
utm_medium=referral
utm_campaign=reservations

When the widget uses utm: window.location.search, any UTM parameters already present on the website page are forwarded into the booking flow. This helps keep attribution readable in analytics tools and in CoverCount reservation-source reporting.

Common Problems

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

Nothing appears where the widget should be

Confirm that the page includes both the <div id="reserve-widget"></div> container and the ReserveWidget.init(...) script. The target value must match the container selector.

The browser says `ReserveWidget is not defined`

The widget script did not load. Some website builders, security plugins, or content security policies can block external scripts. Make sure the page allows scripts from:

https://explore.covercount.io

The widget appears too short

Increase the height option. Most reservation pages work well around 920, while longer tasting or deposit flows may need 980 or more.

The wrong experience appears

Check the experience value. It must match the experience slug in CoverCount. Remove the experience option if you want the widget to show all public experiences.

Get Help

If you need the correct venue slug, experience slug, or a platform-specific install snippet, contact CoverCount support at support@covercount.io.