Embed Widget

One widget. Your brand. Every booking.

A DOM-native scheduling widget that inherits your styles, syncs real-time availability, and collects payments. All without an iframe.

Get started free Widget docs

See it live, ship it today

See it live. This is a real booking widget.

Blue

Violet

Emerald

Rose

--astrocal-primary: #2563eb

Add the script tag

One line of HTML or an npm install. The widget renders natively in your DOM, not an iframe, so your fonts, colours, and layout just work.

Theme it to your brand

Pass a theme object or override CSS custom properties. Primary colour, background, border radius, font family: everything is configurable. Paid plans remove all Astrocal branding.

Handle bookings your way

The onSuccess callback fires with the full booking object when someone books. Redirect to a thank-you page, update your UI, or fire analytics. Your call.

<!-- Add to any page -->
<script src="https://cdn.astrocal.dev/widget.js"></script>
<div id="booking"></div>

<script>
  Astrocal.open({
    eventTypeId: 'evt_abc123',
    mode: 'inline',
    target: '#booking',
    theme: { primary: '#6366f1' },
    onSuccess: (booking) => {
      window.location.href = `/thank-you?id=${booking.id}`
    }
  })
</script>

Built for embedding

⚡

DOM-native, not an iframe

The widget renders directly in your page. Your CSS applies, your fonts load, and there are no cross-origin quirks or scrollbar issues.

🎨

CSS custom properties

Override primary colour, background, border radius, and font family via a theme object or directly in your stylesheet. Full design control without forking.

📅

Real-time availability

Slots reflect your actual Google Calendar. FreeBusy checks run on every request, so only genuinely free times are shown. No stale data.

💳

Stripe payments at booking

Collect deposits or full payment inline. Stripe Connect handles SCA compliance and 135+ currencies. No redirect to a separate checkout page.

🔁

onSuccess callback

When a booking is confirmed, your JavaScript runs with the full booking object. Redirect, update state, fire analytics, or trigger a workflow.

📦

Popup mode

Open the widget as a modal overlay from any button or link. Visitors book without leaving the current page. Closes on backdrop click or Escape.

Key parameters

Name	Type	Default	Description	Required
eventTypeId	string	—	Your event type UUID. Find it in the dashboard or via GET /v1/event-types.
mode	'inline' \| 'popup'	—	inline renders in-page inside a target element. popup opens a centered modal overlay. Default: inline.	—
target	string	—	CSS selector for the container element. Required when mode is inline.	—
theme	object	—	Override design tokens: primary, background, fontFamily, borderRadius. Applied via CSS custom properties.	—
onSuccess	function	—	Callback fired when a booking is confirmed. Receives the full booking object with id, status, start_time, and invitee.	—
locale	string	—	BCP 47 locale code for widget copy and date formatting. Defaults to the browser locale.	—
metadata	object	—	Key-value pairs attached to every booking created through this widget instance. Useful for attribution and tracking.	—

View full API reference

Simple, transparent pricing

Start for free. Upgrade as you grow. No hidden fees, no per-seat pricing.

Free

For prototyping

$0forever

10 bookings/month
1 calendar connection
30 req/min API rate
Calendar sync
Email notifications

Get Started

Starter

For small teams

$12/month

50 bookings/month
3 calendar connections
60 req/min API rate
Everything in Free
Custom branding

Get Started

Pro

Business

For scaling up

$199/month

5,000 bookings/month
100 calendar connections
2,000 req/min API rate
Everything in Pro
Dedicated support

Get Started

No per-seat pricing. Ever. See full pricing →

Frequently asked questions

Pass a theme object with primary, background, fontFamily, and borderRadius. For more granular control, the widget exposes CSS custom properties you can override directly in your stylesheet. On paid plans, the 'Powered by Astrocal' attribution is removed.

The widget script is under 30 KB gzipped. It loads asynchronously and doesn't block your page render. No external dependencies are pulled in at runtime.

All modern browsers: Chrome, Firefox, Safari, and Edge (latest two major versions). The widget uses standard DOM APIs with no polyfills required.

Yes. The npm package works with any bundler. A dedicated React component is available via @astrocal/react. For Vue, Svelte, or others, use the vanilla open() function. It works anywhere you can run JavaScript.

Inline mode renders the widget inside a target element on your page, ideal for dedicated booking pages. Popup mode opens the widget as a centered modal overlay, triggered by a button click, better for 'Book now' CTAs that shouldn't navigate away.

Yes. Connect your Stripe account and set a price on your event type. The widget handles payment collection at the point of booking (deposit or full amount) with no redirect to a separate checkout page.

Embed scheduling in minutes

One script tag. Your brand. Real-time availability. Payments included. Free to start.

Get started free Widget documentation