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

# Add a booking calendar

> Let people grab time on your calendar, right from the page.

Goal: a page where visitors can book a meeting or call — backed by your real
calendar.

<Steps>
  <Step title="Set up Calendly (or Cal.com)">
    Create a free [Calendly](https://calendly.com) account and an event type (e.g.
    "30-min intro call"). Connect your calendar so it only offers times you're free.
  </Step>

  <Step title="Copy the embed">
    In Calendly, open **Share → Add to website → Inline embed** and copy the snippet.
  </Step>

  <Step title="Add it to your page and publish">
    Ask your AI *"add this Calendly booking widget to my page"* and paste the snippet,
    or drop it into your HTML:

    ```html theme={null}
    <div class="calendly-inline-widget"
         data-url="https://calendly.com/your-handle/30min"
         style="min-width:320px;height:700px"></div>
    <script src="https://assets.calendly.com/assets/external/widget.js" async></script>
    ```

    Publish on Shareable — visitors book in-page, and it lands on your calendar.
  </Step>
</Steps>

<Note>
  This one uses a small external `<script>` from Calendly (not just an iframe).
  That's fine for trusted, well-known providers — see the
  [security note](/guides/integrations#what-shareable-does-not-do).
</Note>

## Other calendar tools — same idea

The exact same three steps work with any booking tool that offers an embed. Sign up,
find its **Embed** option, copy the snippet, and paste it into your page (or hand it
to your AI):

| Tool                                       | Where to find the embed                          |
| ------------------------------------------ | ------------------------------------------------ |
| **Calendly**                               | Share → Add to website → **Inline embed**        |
| **Cal.com** (open-source)                  | Event type → **Embed** → Inline                  |
| **HubSpot Meetings**                       | Meetings → **Share** / **Embed** → copy the code |
| **Google Calendar — appointment schedule** | Appointment schedule → **Share → Embed**         |
| **SavvyCal**                               | Share → **Embed**                                |

Most give you either an `<iframe>` or a small `<script>` + a target `<div>` — both
work on a Shareable page.

<Tip>
  Even simpler: tell your AI *"add my Cal.com booking page"* (or HubSpot, Calendly,
  …) and paste your scheduling link — it'll generate the right embed for that
  provider.
</Tip>