Embeddable Widget

@astrocal/widget is a drop-in booking UI for any website. It renders a full calendar, time slot picker, and booking form inside a Shadow DOM — so it works on any page without CSS conflicts.

npm · GitHub

Installation

Quick Start

Popup Mode

Open a booking modal with one call:

import { open } from "@astrocal/widget";

open({
  eventTypeId: "your-event-type-id",
  mode: "popup",
});

Inline Mode

Mount the widget into a container element:

import { open, destroy } from "@astrocal/widget";

// Mount
open({
  eventTypeId: "your-event-type-id",
  mode: "inline",
  target: "#booking-container",
});

// Clean up when done
destroy("#booking-container");

CDN (No Build Step)

For sites without a bundler, load the widget via a script tag:

<script src="https://cdn.astrocal.dev/widget/latest/astrocal.js"></script>
<script>
  Astrocal.open({
    eventTypeId: "your-event-type-id",
    mode: "popup",
  });
</script>

Or use auto-initialization with data attributes — no JavaScript required:

<script src="https://cdn.astrocal.dev/widget/latest/astrocal.js"></script>
<div data-astrocal-event-type-id="your-event-type-id" data-astrocal-mode="inline"></div>

Configuration

API

open(config)

Opens the booking widget. In popup mode, creates a modal overlay. In inline mode, mounts into the target element.

close()

Closes the popup widget if open. No-op if no popup is active.

destroy(target)

Destroys an inline widget mounted on a target element. Removes the Shadow DOM and cleans up all resources.

autoInit()

Scans the DOM for elements with data-astrocal-* attributes and mounts widgets automatically. Called automatically when using the CDN script tag.

Theming

Customize the widget appearance with CSS custom properties:

open({
  eventTypeId: "your-event-type-id",
  theme: {
    primaryColor: "#6366f1",
    primaryHoverColor: "#4f46e5",
    borderRadius: "12px",
    fontFamily: "Inter, sans-serif",
  },
});

The widget uses Shadow DOM isolation, so your site's styles won't affect it and vice versa.

SSR / Server-Side Rendering

The package is safe to import in Node.js (Next.js, Nuxt, etc.). The autoInit() function is guarded and will not run on the server. open() and destroy() require a browser environment. close() is a silent no-op on the server.

import { open } from "@astrocal/widget";

// Only call in browser context
if (typeof window !== "undefined") {
  open({ eventTypeId: "..." });
}

Next Steps

• React SDK — React wrapper with provider and hooks
• Quickstart — REST API basics
• API Reference — Full endpoint documentation