Embed your booking calendar

1. Get your API key

Open Settings → Embed & API and hit Generate key. The plaintext key is shown once — copy it immediately, then customize the look and copy the snippet for your framework.

The Embed & API section is part of the Pro and Pro+ plans. Free accounts see an upgrade card.

2. Paste the snippet on your site

Every framework uses the same iframe under the hood — only the wrapper changes. Each snippet below is the same URL pattern:

https://bandartistbooking.com/embed/calendar/your-slug?api_key=bb_embed_YOUR_KEY

HTML

Drop into any .html file or a website builder that supports a custom HTML block.

<div style="max-width:100%">
  <iframe
    src="https://bandartistbooking.com/embed/calendar/your-slug?api_key=bb_embed_YOUR_KEY"
    width="700"
    height="1000"
    style="border:0; border-radius:12px; max-width:100%"
    loading="lazy"
    title="Booking calendar"
  ></iframe>
  <p style="text-align:center; font-size:12px; margin-top:8px; color:#666">
    Powered by <a href="https://bandartistbooking.com" target="_blank" rel="noopener" style="color:inherit; text-decoration:underline">BandArtistBooking</a>
  </p>
</div>

WordPress

Add a Custom HTML block to the page or post where you want the calendar to appear, then paste the iframe.

<div style="max-width:100%">
  <iframe
    src="https://bandartistbooking.com/embed/calendar/your-slug?api_key=bb_embed_YOUR_KEY"
    width="700"
    height="1000"
    style="border:0; border-radius:12px; max-width:100%"
    loading="lazy"
    title="Booking calendar"
  ></iframe>
  <p style="text-align:center; font-size:12px; margin-top:8px; color:#666">
    Powered by <a href="https://bandartistbooking.com" target="_blank" rel="noopener" style="color:inherit; text-decoration:underline">BandArtistBooking</a>
  </p>
</div>

Don't paste into the visual editor — use the Custom HTML block (Gutenberg) or a Code/HTML widget (Elementor / Divi).

React

JSX shorthand — same iframe, props converted to camelCase / numeric.

<div style={{ maxWidth: "100%" }}>
  <iframe
    src="https://bandartistbooking.com/embed/calendar/your-slug?api_key=bb_embed_YOUR_KEY"
    width={700}
    height={1000}
    style={{ border: 0, borderRadius: 12, maxWidth: "100%" }}
    loading="lazy"
    title="Booking calendar"
  />
  <p style={{ textAlign: "center", fontSize: 12, marginTop: 8, color: "#666" }}>
    Powered by{" "}
    <a
      href="https://bandartistbooking.com"
      target="_blank"
      rel="noopener"
      style={{ color: "inherit", textDecoration: "underline" }}
    >
      BandArtistBooking
    </a>
  </p>
</div>

Next.js

Same as React. Works in both Server and Client Components — no client-side JS required from your side.

// app/booking/page.tsx
export default function Booking() {
  return (
    <div style={{ maxWidth: "100%" }}>
      <iframe
        src="https://bandartistbooking.com/embed/calendar/your-slug?api_key=bb_embed_YOUR_KEY"
        width={700}
        height={1000}
        style={{ border: 0, borderRadius: 12, maxWidth: "100%" }}
        loading="lazy"
        title="Booking calendar"
      />
      <p style={{ textAlign: "center", fontSize: 12, marginTop: 8, color: "#666" }}>
        Powered by{" "}
        <a
          href="https://bandartistbooking.com"
          target="_blank"
          rel="noopener"
          style={{ color: "inherit", textDecoration: "underline" }}
        >
          BandArtistBooking
        </a>
      </p>
    </div>
  );
}

PHP

Server-side echo — useful if your CMS templates are PHP-based (e.g., custom WordPress themes, raw PHP sites).

<?php $bookingUrl = 'https://bandartistbooking.com/embed/calendar/your-slug?api_key=bb_embed_YOUR_KEY'; ?>
<div style="max-width:100%">
  <iframe
    src="<?= htmlspecialchars($bookingUrl, ENT_QUOTES) ?>"
    width="700"
    height="1000"
    style="border:0; border-radius:12px; max-width:100%"
    loading="lazy"
    title="Booking calendar"
  ></iframe>
  <p style="text-align:center; font-size:12px; margin-top:8px; color:#666">
    Powered by <a href="https://bandartistbooking.com" target="_blank" rel="noopener" style="color:inherit; text-decoration:underline">BandArtistBooking</a>
  </p>
</div>

Notes

• The API key in the URL is read-only — it can only view your public availability and serve the booking-request form. It can't edit anything in your account.
• If you cancel your subscription or downgrade to Free, the embed stops working immediately. Re-subscribe to bring it back — your keys aren't deleted.
• Revoke a key any time from Settings → Embed & API. Active websites stop working within seconds, so swap in a new key first if you want zero downtime.
• Recommended minimum iframe size: 700×1000px. Below that the form inside the embed auto-collapses to availability-only.
• Please keep the "Powered by BandArtistBooking" line under the iframe — it's how Pro and Pro+ stay free in the Balkans. It's also the cross-domain backlink that helps people find the platform via search.