> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rocket.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Calendly

> Connect Calendly to Rocket and embed booking widgets, demo schedulers, and team scheduling flows - all wired up from chat.

export const LlmsDirective = () => <blockquote className="llms-directive">
    For the complete documentation index, see <a href="/llms.txt">llms.txt</a>.
    For a lightweight markdown version of this page, append .md to the URL.
  </blockquote>;

<LlmsDirective />

Describe the scheduling flow you need in chat and Rocket generates the embedded scheduler, confirmation pages, and notification flows automatically.

<Note>
  This connector is only available for **Next.js TypeScript** web build tasks.
</Note>

<Divider />

## What you can do

<CardGroup cols={2}>
  <Card title="Consultation booking" icon="user-doctor">
    Let visitors book a free or paid consultation directly from your website with automatic calendar sync.
  </Card>

  <Card title="Sales demo booking" icon="presentation-screen">
    Give prospects a frictionless way to schedule product demos with your sales team.
  </Card>

  <Card title="Team scheduling" icon="users">
    Route meetings to available team members with round-robin or collective scheduling.
  </Card>

  <Card title="Event registration" icon="calendar-plus">
    Let users sign up for webinars, workshops, or group events with automatic capacity tracking.
  </Card>

  <Card title="Intake form with scheduling" icon="file-circle-check">
    Combine a questionnaire with appointment booking so you have context before every meeting.
  </Card>
</CardGroup>

<Divider />

## Connect Calendly

Calendly connects via OAuth, so no API key is needed.

<Note>
  Calendly is a **workspace-level** connector. No matter where you connect it (Settings, Connectors tab, or chat), it links to your entire Rocket workspace and is available across all tasks.
</Note>

<Tabs>
  <Tab title="Web Browser">
    You can connect from three places. All do the same thing.

    **Option 1: From chat**

    Type a prompt that mentions Calendly, for example `Connect Calendly and add a Book a Demo button to my pricing page`. Rocket detects the intent and shows a **Connect** button inline. Click it and the OAuth flow opens.

    <Frame caption="Calendly connection prompt in chat">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/1fmHYQP8aJIsJYKK/images/build-docs/connectors/calendly/web-browser/calendly-chat-light.webp?fit=max&auto=format&n=1fmHYQP8aJIsJYKK&q=85&s=e61420fc19fb8596cec6e35b7527ba5d" alt="Rocket chat panel showing a Connect prompt for Calendly." className="theme-image light-image" width="2880" height="1624" data-path="images/build-docs/connectors/calendly/web-browser/calendly-chat-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/1fmHYQP8aJIsJYKK/images/build-docs/connectors/calendly/web-browser/calendly-chat-dark.webp?fit=max&auto=format&n=1fmHYQP8aJIsJYKK&q=85&s=bf90bf4584492abf6c48d81aec4fcbaf" alt="Rocket chat panel showing a Connect prompt for Calendly." className="theme-image dark-image" width="2880" height="1624" data-path="images/build-docs/connectors/calendly/web-browser/calendly-chat-dark.webp" />
    </Frame>

    **Option 2: From the Connectors tab**

    Click the **`...`** button in the preview toolbar, then select **Connectors**.

    <Frame caption="Open Connectors from the toolbar">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/2lqYWidv_xVHKfL6/images/build-docs/connectors/shared/connectors-tab-open-light.webp?fit=max&auto=format&n=2lqYWidv_xVHKfL6&q=85&s=7bd785a0e878564054e08328b2aa3d6b" alt="Toolbar dropdown with Connectors option highlighted." className="theme-image light-image" width="2880" height="1624" data-path="images/build-docs/connectors/shared/connectors-tab-open-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/2lqYWidv_xVHKfL6/images/build-docs/connectors/shared/connectors-tab-open-dark.webp?fit=max&auto=format&n=2lqYWidv_xVHKfL6&q=85&s=d047040372d776cb47e4e483de8eeb8d" alt="Toolbar dropdown with Connectors option highlighted." className="theme-image dark-image" width="2880" height="1624" data-path="images/build-docs/connectors/shared/connectors-tab-open-dark.webp" />
    </Frame>

    Click the **Calendly** card, then click **Connect**.

    <Frame caption="Calendly card in the Connectors panel">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/1fmHYQP8aJIsJYKK/images/build-docs/connectors/calendly/web-browser/calendly-connectors-tab-light.webp?fit=max&auto=format&n=1fmHYQP8aJIsJYKK&q=85&s=0eebdcb328dd641daf7959bfb84462af" alt="Connectors panel showing the Calendly card with a Connect button." className="theme-image light-image" width="1801" height="516" data-path="images/build-docs/connectors/calendly/web-browser/calendly-connectors-tab-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/1fmHYQP8aJIsJYKK/images/build-docs/connectors/calendly/web-browser/calendly-connectors-tab-dark.webp?fit=max&auto=format&n=1fmHYQP8aJIsJYKK&q=85&s=636bb6191ba0d1d7790c3653bf946cdc" alt="Connectors panel showing the Calendly card with a Connect button." className="theme-image dark-image" width="1812" height="519" data-path="images/build-docs/connectors/calendly/web-browser/calendly-connectors-tab-dark.webp" />
    </Frame>

    **Option 3: From workspace Settings**

    <Card title="Manage workspace connectors" icon="plug" href="/getting-started/workspace/connectors" horizontal arrow="true">
      Connect once from Settings and it is available across all tasks.
    </Card>

    **After clicking Connect**

    A Calendly authorization screen opens in your browser. Log in and grant Rocket access to your scheduling data. A green dot appears next to Calendly when the connection is active.

    **Disconnect**

    <Card title="Disconnect a service" icon="plug" href="/getting-started/workspace/connectors#disconnect-a-service" horizontal arrow="true">
      Disconnect or switch accounts from workspace Settings.
    </Card>
  </Tab>

  <Tab title="Mobile App">
    You can connect from three places. All do the same thing.

    **Option 1: From chat**

    Type a prompt that mentions Calendly. Rocket detects the intent and shows a **Connect** button inline. Tap it and the OAuth flow opens.

    **Option 2: From the Connectors tab**

    1. Tap the **More** button in the header.
    2. Tap **Integrations**.
    3. Tap the **Calendly** card, then tap **Connect**.

    **Option 3: From workspace Settings**

    Open your workspace, go to **Settings**, and tap **Connectors**. Tap the **Calendly** card and tap **Connect**.

    **After tapping Connect**

    A Calendly authorization screen opens. Log in and grant Rocket access to your scheduling data. A green dot appears next to Calendly when the connection is active.

    **Disconnect**

    Go back to the **Calendly** card in Integrations. Tap **Disconnect** to remove the integration.
  </Tab>
</Tabs>

<Divider />

## Example prompts

| What you want        | Prompt to use                                                                              |
| :------------------- | :----------------------------------------------------------------------------------------- |
| Consultation page    | `Embed a Calendly widget on my /book page for 30-minute consultations.`                    |
| Sales demo           | `Add a Book a Demo button on my pricing page that opens a Calendly popup.`                 |
| Onboarding call      | `Add a Calendly booking step after a user signs up for a 15-minute onboarding call.`       |
| Team scheduling      | `Create a team booking page where clients are matched with an available rep.`              |
| Webinar registration | `Build an event page for my weekly webinar with Calendly registration.`                    |
| Paid consultation    | `Embed a Calendly booking widget and charge $50 per session via Stripe before confirming.` |
| Intake plus booking  | `Create a two-step flow: intake form first, then Calendly time picker on step two.`        |
| Office hours         | `Add a Calendly embed for weekly office hours on my /support page.`                        |
| Reminder email       | `Send a custom reminder email via Resend 24 hours before each Calendly appointment.`       |
| Post-meeting survey  | `After a Calendly meeting ends, email the attendee a Typeform feedback survey.`            |

<Divider />

## Tips

* **Calendar sync is automatic.** Calendly syncs with Google Calendar, Outlook, and iCloud. Availability updates in real time.
* **Embedding options.** Rocket can embed Calendly as an inline widget, popup, or full-page view. Describe the style you want in chat.
* **Free plan limits.** Calendly's free tier supports one event type. Upgrade for team scheduling, round-robin, and multiple event types.
* **Webhooks for custom flows.** Calendly sends webhook events when meetings are booked or canceled. Use these to trigger Supabase inserts or email notifications through Rocket.
* **One Calendly account per workspace.** All tasks share the same connected account.

<Divider />

## What's next?

<CardGroup cols={2}>
  <Card title="Supabase" icon="database" href="./supabase/overview">
    Store booking records in a database for reporting and in-app display.
  </Card>

  <Card title="Resend" icon="envelope" href="./resend">
    Send custom confirmation and reminder emails for each booking.
  </Card>

  <Card title="Stripe" icon="credit-card" href="./stripe">
    Charge for consultations or demos by combining Calendly with Stripe checkout.
  </Card>
</CardGroup>
