Logo

Cal.com Bookings

Cal.com is the open-source scheduling platform used in the template for booking onboarding calls and enterprise consultations. The @calcom/embed-react package is already in your dependencies — you just need a Cal account and a public event link.

Last updated: 2026-06-12

Create a Cal Account & Event Type

Sign up at cal.com, claim your username (this becomes your public scheduling link), and create an event type — e.g. a 15-minute discovery call. Copy the event link in the format `your-username/event-slug`. You'll use this to render the calendar.

Embed the Cal Booking Widget

Flux ships with a ready-to-use Cal component at src/components/pages/Cal.jsx. Drop it on any page where you want visitors to book — pricing, enterprise, contact. The widget loads lazily and renders inline (no popups), so it feels native to the page.

src/components/pages/Cal.jsx
// src/components/pages/Cal.jsx
import Cal, { getCalApi } from '@calcom/embed-react';
import { useEffect } from 'react';

export default function CalEmbed() {
  useEffect(() => {
    (async () => {
      const cal = await getCalApi({ namespace: '15min' });
      cal('ui', {
        theme: 'light',
        hideEventTypeDetails: false,
        layout: 'month_view',
      });
    })();
  }, []);

  return (
    <section id="contact" className="max-w-5xl mx-auto px-4 py-12 text-center scroll-mt-24">
      <h2 className="text-4xl sm:text-5xl font-bold text-black mb-6">
        Ready to build with me?
      </h2>
      <p className="text-sm text-zinc-400 mb-8">
        Schedule a personalized onboarding session. Let's get you started.
      </p>
      <Cal
        namespace="15min"
        calLink="your-username/15min"
        style={{ width: '100%', height: '700px', overflow: 'auto' }}
        config={{ layout: 'month_view', theme: 'light' }}
      />
    </section>
  );
}

Mount on an Astro Page & Wire the CTA

Import the Cal component into any Astro page with `client:visible` so the Cal.com SDK only loads when the visitor actually scrolls down. Then point your hero CTA to the `#contact` anchor — Tailwind's `scroll-mt-24` keeps the heading clear of the fixed navbar.

src/pages/pricing.astro
---
import Layout from '../layout/Layout.astro';
import Pricing from '../components/pages/Pricing.jsx';
import Cal from '../components/pages/Cal.jsx';
---

<Layout title="Pricing">
  <Pricing client:load />
  <Cal client:visible />
</Layout>

<!-- Any CTA on the page — Book a Call -->
<!--
<a href="#contact">Book a Call</a>
-->

Theme & Customize

The embed inherits from your Cal dashboard settings — colors, logo, and field labels. You can override per page via the `cal('ui', …)` call. Pass `theme: 'dark'` for dark sections, switch `layout` to `column_view` for compact sidebars, and use the `config` prop to pre-fill the visitor's name or email when you already know it.

Terminal
// Pre-fill from a signed-in user
await getCalApi({ namespace: '15min' }).then((cal) =>
  cal('ui', {
    theme: 'light',
    hideEventTypeDetails: true,
    layout: 'column_view',
  }),
);

<Cal
  namespace="15min"
  calLink="your-username/15min"
  config={{
    name: user.fullName,
    email: user.email,
    theme: 'light',
  }}
/>
Loops.soUserJot Feedback