Embed GhostNot Widget

1. Badge (Passive)

A small, clickable badge that displays “Protected by GhostNot” with your stake amount. Clicking opens your GhostNot booking page in a new tab.

Quick Start

Add this snippet to your HTML. Replace your-slug with your booking link slug.

<div data-ghostnot-badge data-host="your-slug" data-theme="dark"></div>
<script src="https://ghostnot.com/embed.js" async></script>

Attributes

2. Gate (Active)

A full booking flow — slot selection, staking, and payment — embedded directly in your page via an iframe.

Quick Start

<div data-ghostnot-gate data-host="your-slug"></div>
<script src="https://ghostnot.com/embed.js" async></script>

Attributes

Events

The gate iframe communicates with the parent page via postMessage. You can also listen for a custom event on the container element:

// Listen for booking completion
const gate = document.querySelector('[data-ghostnot-gate]');
gate.addEventListener('ghostnot:booking-complete', (e) => {
  console.log('Booking completed!', e.detail.meetingId);
});

// Or listen for postMessage directly
window.addEventListener('message', (e) => {
  if (e.data?.type === 'ghostnot') {
    if (e.data.event === 'booking-complete') {
      console.log('Meeting ID:', e.data.meetingId);
    }
    if (e.data.event === 'resize') {
      console.log('Iframe height:', e.data.height);
    }
  }
});

3. Content Security Policy (CSP)

If your site uses a Content Security Policy, you may need to add the following directives:

# For the badge (loads embed.js script)
script-src https://ghostnot.com

# For the gate (loads iframe)
frame-src https://ghostnot.com

# If using the badge with shadow DOM
style-src 'unsafe-inline'

4. Styling & Customization

The badge uses Shadow DOM to prevent style conflicts with your page. The gate renders inside an iframe, which is fully isolated.

• •The badge is responsive and uses display: inline-block — it won't break your layout.
• •The gate iframe defaults to width: 100% and auto-resizes its height based on content.
• •Use data-theme="light" on the badge for light-background pages.

5. Finding Your Booking Slug

Your booking slug is the last part of your GhostNot booking URL. You can find and customize it in your dashboard settings.

https://ghostnot.com/book/your-slug
                              ^^^^^^^^^ this is your slug