Skip to content
English - United Kingdom
Contact us
  • There are no suggestions because the search field is empty.

WordPress Plugin Setup Guide Step

Booking Board Widget

Step-by-step for installing and configuring the Booking Board widget on a WordPress site.

1. Prerequisites

  • WordPress 6.0+ and PHP 7.4+
  • Admin access to the WordPress site
  • Admin access to your Booking Board chain dashboard
  • The WordPress site's public domain (e.g. example.com)

2. Install the plugin

URL Use this when…
https://widget.bookingboard.io/wordpress-plugin/booking-board-widget-plugin.zip First-time install — always the latest.
  1. Download the zip that matches your case.
  2. In WordPress admin: Plugins → Add New → Upload Plugin.
  3. Select the zip, click Install Now, then Activate.

Plugin appears under Tools → Booking Board Widget.

3. Generate an API key (Booking Board dashboard)

The widget authenticates with a per-domain API key tied to your chain.

  1. Log in to your Booking Board dashboard.
  2. Open System settings on the chain that owns the gym(s) you want to expose.
  3. Scroll to Website Integration.
  4. Click Add domain.
  5. Enter the WordPress site's domain without protocol, e.g. example.com. Click Save.
  6. Copy the API key immediately — it is shown in cleartext only once. Afterwards it is masked (BB_∗…∗_∗…∗). If lost, delete and re-create.

The dashboard also shows the widget embed snippet with your sub-domain and (optionally) a selected gym id pre-filled — useful as a reference.

What is the sub-domain?

It is the prefix of your chain's Booking Board domain. Examples:

Chain domain Sub-domain value
mygym.bookingboard.io mygym

The widget resolves API calls to https://{sub-domain}.bookingboard.io/.

What is the gym id?

If set, the widget skips the gym picker and books directly into that gym. Leave blank to let users pick a gym from the chain.

4. Configure the plugin

  1. In WordPress admin: Tools → Booking Board Widget.
  2. Fill in:
    • API Key — paste the value from step 3.
    • Sub Domain — e.g. mygym.
    • Gym id — numeric gym id, or leave blank.
  3. Click Save.

Values are stored as WordPress options and default into the shortcode.

5. Embed the widget on a page

Add the shortcode anywhere (page, post, block editor as a Shortcode block):

[booking-board-widget]

Overriding defaults per placement

All four attributes are optional; unset attributes fall back to the saved settings.

Attribute Example Purpose
api-key api-key="BB_...." Use a different key on this page.
sub-domain sub-domain="mygym" Point to another chain environment.
gym-id gym-id="42" Pre-select a gym.
lang lang="en" UI language (default da).

Example:

[booking-board-widget lang="en" gym-id="42"]

The shortcode renders:

<div class="bookingboard-widget"
     data-sub-domain="..."
     data-api-key="..."
     data-gym-id="..."
     data-language="..."
     style="width: 350px; height: 540px;"></div>
<script src="https://widget.bookingboard.io/widget.js" async></script>

6. Verify

  1. Open the public page in a logged-out browser.
  2. Widget loads a form.
  3. Book a test time slot end-to-end.

7. Troubleshooting

Symptom Likely cause
Widget container stays empty widget.js blocked, or no .bookingboard-widget div rendered (shortcode not executed).
API calls 401/403 API key wrong, revoked, or domain on the key does not match the site serving the page.
API calls fail DNS / 404 Sub-domain wrong; should be the chain's prefix without .bookingboard.io.
Stuck on loading spinner gym-id references a gym that does not exist or is not under this chain.
Wrong language lang attribute or saved language not set; default is da.
Key lost Keys are one-view; delete and re-create in dashboard.

8. Rotating or removing a key

  • Rotate: in dashboard, delete the current domain entry and re-add it. Paste the new key into the plugin settings.
  • Uninstall: deactivating + deleting the plugin removes the stored options (*-api-key, *-sub-domain, *-gym-id) via the uninstall hook.