Install the CoverCount booking widget on WordPress

Use this guide when your venue website is built with WordPress, including WordPress.com sites, self-hosted WordPress sites, and WordPress sites using a page builder.

For most WordPress sites, the simplest setup is a Custom HTML block with a CoverCount iframe embed. You can also paste the CoverCount widget script into a Custom HTML block, but some WordPress plans, roles, security plugins, or hosting policies may strip <script> or <iframe> tags when the page is saved.

If your WordPress site removes the embed code, use a direct booking link or ask your site administrator to confirm whether your account can publish iframe or script code.

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 the WordPress page
• Permission to publish iframe or script code on the site

On WordPress.com, iframe and script tags may require a paid plan with hosting features activated. On self-hosted WordPress, support depends on your user role, site configuration, plugins, and security settings.

Option 1: Add The Booking Flow With An Iframe

This is the recommended WordPress 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 Iframe In The WordPress Block Editor

1. Open the WordPress page where reservations should appear.
2. Click the block inserter.
3. Search for HTML.
4. Add a Custom HTML block.
5. Paste the CoverCount iframe code.
6. Preview the block or page.
7. Publish or update the page.
8. Open the published page in a private/incognito browser window and test the booking flow.

If the iframe disappears after saving, WordPress likely removed restricted markup. Use the direct booking link fallback or ask your site administrator to confirm plan, hosting features, and user permissions.

Option 2: Add The Widget Script

If your WordPress site allows scripts in page content, paste this into a Custom HTML block.

<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 WordPress strips the script after saving, switch to the iframe option or direct booking link.

Page Builder Sites

If your WordPress site uses a page builder, look for an element named HTML, Code, Embed, or Custom HTML.

Use the same order of preference:

1. Paste the iframe embed.
2. If the builder supports scripts reliably, paste the widget script.
3. If embeds are blocked or unreliable, add a button that links to the direct CoverCount booking URL.

After publishing, test the live page on desktop and mobile. Page builders often have separate responsive controls, so confirm the embed is not hidden or too short on mobile.

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 booking flow is cut off inside the page builder layout

The booking flow works best in a full-width content area. Avoid placing the widget inside narrow columns, accordions, tabs, or sliders unless you have tested the full booking flow.

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 WordPress 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 WordPress.
• You used a Custom HTML block or page-builder HTML/code element.
• WordPress did not remove the <iframe> or <script> tag after saving.
• Your WordPress.com plan and hosting features support restricted tags, if you use WordPress.com.
• Your self-hosted WordPress user role has permission to publish unfiltered HTML, if applicable.
• A security plugin, firewall, or content sanitizer is not removing the embed.
• The tenant slug is correct.
• The experience slug is correct, or the experience value is removed.
• The embed is tall enough on desktop and mobile.

Direct Booking Link Fallback

If embedding is difficult, use a WordPress button, navigation item, or text 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, blog posts, and campaign landing pages.

More Help

WordPress's own help articles for this workflow are WordPress.com: Add custom HTML and WordPress.org: Custom HTML.

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