Embedding

Every GudCal booking page is shareable and embeddable. You can share a direct link, drop an inline calendar into a page, open the booker in a popup, or add a floating button that follows the visitor as they scroll.

The fastest way to get a ready-made snippet is the Share & Embed dialog in your dashboard: go to Event Types, click Share on any event, and open the Embed tab. Pick a type, set the theme/brand color, and copy the code.

Shareable links

Each user and event type has a public URL:

https://your-gudcal-instance.com/{username}            # all public events
https://your-gudcal-instance.com/{username}/{event-slug} # one event

These links are public, mobile-friendly, and work without an account.

The embed script

All embed types are powered by a single, dependency-free script. It detects the host instance automatically from its own URL, so it works on self-hosted deployments without configuration:

<script src="https://your-gudcal-instance.com/embed.js" async></script>

Inline embed

Renders the calendar directly inside an element on your page. Inline embeds auto-resize to fit their content.

<div id="gudcal-inline"></div>
<script src="https://your-gudcal-instance.com/embed.js" async></script>
<script>
  GudCal.inline({
    username: "jane",
    eventSlug: "intro-call",
    target: "#gudcal-inline",
    theme: "auto",        // "auto" | "light" | "dark"
    brandColor: "#0069FF",
    width: "100%",
    height: "700px",      // omit or "auto" to auto-resize
  });
</script>

You can also use a data attribute — no JavaScript required:

<div data-gudcal="jane" data-event="intro-call" data-theme="auto"></div>
<script src="https://your-gudcal-instance.com/embed.js" async></script>

Popup embed

Opens the booker in a centered modal when a trigger element is clicked. Any element with data-gudcal-popup becomes a trigger automatically:

<button data-gudcal-popup="jane" data-event="intro-call">
  Book a meeting
</button>
<script src="https://your-gudcal-instance.com/embed.js" async></script>

Or wire it up manually:

<script>
  GudCal.popup({
    username: "jane",
    eventSlug: "intro-call",
    trigger: "#my-button",
  });
</script>

The popup closes automatically a moment after a booking is completed.

Floating button

Adds a fixed "Book a meeting" button to a corner of the page:

<script src="https://your-gudcal-instance.com/embed.js" async></script>
<script>
  GudCal.floatingButton({
    username: "jane",
    eventSlug: "intro-call",
    buttonText: "Book a meeting",
    buttonColor: "#0069FF",
    position: "bottom-right", // bottom-right | bottom-left | top-right | top-left
  });
</script>

Options

Pre-filling guest details

Pass a prefill object (or add ?name=&email= to a booking URL) to populate the guest form ahead of time:

<script>
  GudCal.popup({
    username: "jane",
    eventSlug: "intro-call",
    trigger: "#book",
    prefill: { name: "Sam Lee", email: "sam@example.com" },
  });
</script>