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

# Book Demos with Cal.com and Calendly in the Chat Widget

> Connect Cal.com to ClientX so visitors can book meetings directly inside the chat widget. The AI agent proposes available slots based on natural language requests.

When you connect a calendar, your AI agent can propose meeting slots and confirm bookings without the visitor ever leaving the chat. A visitor says "I'd like to schedule a call" — and the agent takes it from there, checks availability, proposes a time, and creates the booking when they confirm.

## Supported Calendar Providers

<CardGroup cols={2}>
  <Card title="Cal.com" icon="calendar-check">
    **Full native integration.** The AI agent checks real-time availability via the Cal.com API, proposes specific time slots in the conversation, and creates confirmed bookings automatically. No manual steps required from the visitor.
  </Card>

  <Card title="Calendly" icon="calendar">
    **Link-based.** Add your Calendly URL as a widget CTA. When a visitor clicks the button, Calendly opens in an embedded iframe inside the chat widget — no redirect to an external page.
  </Card>
</CardGroup>

***

## Connect Cal.com

<Steps>
  <Step title="Open the Cal.com integration">
    In your dashboard, go to **Integrations → Cal.com** and click **Connect Cal.com Account**.
  </Step>

  <Step title="Authorize with Cal.com">
    You are redirected to Cal.com to authorize access. Complete the OAuth flow with your Cal.com credentials.

    <Note>
      OAuth requires a **work email** on your Cal.com account (not a Gmail or Hotmail address). If you use a personal email, use the **API Key** method instead — paste your key from [app.cal.com → Settings → Developer → API Keys](https://app.cal.com/settings/developer/api-keys).
    </Note>
  </Step>

  <Step title="Select your event type">
    After connecting, choose the Cal.com event type to use for demo bookings — for example, **30-min Demo**. ClientX fetches your available event types automatically.
  </Step>

  <Step title="Save">
    Click **Save**. The Cal.com integration is now active and your AI agent can start booking meetings.
  </Step>
</Steps>

***

## How Booking Works in the Widget

Once Cal.com is connected, meeting bookings happen entirely inside the chat conversation:

<Steps>
  <Step title="Visitor requests a meeting">
    A visitor types something like "Can we hop on a call?" or "I'd like to book a demo for Thursday morning."
  </Step>

  <Step title="Agent checks availability">
    The AI agent queries the Cal.com API in real time to find open slots that match the visitor's request.
  </Step>

  <Step title="Agent proposes a time">
    The agent responds with a specific available time slot and asks the visitor to confirm.
  </Step>

  <Step title="Booking confirmed">
    The visitor confirms → ClientX creates the booking via Cal.com and a confirmation email is sent automatically to both parties.
  </Step>
</Steps>

<Tip>
  Cal.com's native integration provides a much more conversational booking experience than a simple link. Visitors can say "Thursday morning" or "sometime next week" and the AI finds a matching slot — no calendar browsing required.
</Tip>

***

## Use Calendly (Link-Based)

If you prefer Calendly, you can embed your scheduling link as a widget CTA button. The booking flow opens inside the widget rather than redirecting visitors to an external page.

<Steps>
  <Step title="Open widget settings">
    In your dashboard, go to **Settings → Widget → CTAs**.
  </Step>

  <Step title="Add a Calendly CTA">
    Add a new CTA with the type set to **embed** and paste your Calendly scheduling URL (e.g., `https://calendly.com/yourname/30min`).
  </Step>

  <Step title="Save and publish">
    Save your widget settings. When visitors click the CTA button, your Calendly page opens in an iframe inside the chat widget — no page navigation required.
  </Step>
</Steps>