> Calendly developer docs. For page Markdown, append .md to any URL.
> Index: https://developer.calendly.com/llms.txt
> API catalog: https://developer.calendly.com/.well-known/api-catalog
> OpenAPI: https://developer.calendly.com/openapi/calendly-api.yaml
> OAuth authorization server: https://calendly.com/.well-known/oauth-authorization-server
> MCP protected resource: https://mcp.calendly.com/.well-known/oauth-protected-resource
> Scheduling MCP endpoint: https://mcp.calendly.com
> Docs search MCP: https://developer.calendly.com/_mcp/server

# Getting Started with Embeds

[See examples of how Calendly can let customers schedule directly from your site.](https://calendly-embed.com/adding-calendly-to-your-site)

## Using the developer embed code

By making a JavaScript call, you can create an inline embed on demand. This allows you to delay the appearance of the embed until specific actions are completed, or until information is collected for pre-filling the booking form.

Create a `div` on your site with a specific ID, and include the Calendly JavaScript file:

```html
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
```

Then initialize the embed, replacing the sample text with your div ID and scheduling link:

```javascript
Calendly.initInlineWidget({
  "url": 'https://calendly.com/YOURLINK',
  "parentElement": document.getElementById('SAMPLEdivID'),
  "prefill": {},
  "utm": {}
});
```

To load the inline embed automatically while still pre-filling questions or setting UTM parameters:

```html
<!-- Calendly inline widget begin -->
<div
  class="calendly-inline-widget"
  style="min-width:320px; height:580px;"
  data-auto-load="false">
</div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<script>
  Calendly.initInlineWidget({ "url": 'https://calendly.com/YOURLINK' });
</script>
<!-- Calendly inline widget end -->
```

## Embed Options

**Inline**

![Inline embed](/_fern-img/a0207c6af61426730ad2f4a255dce3798c77f3909f47e32b03077bc9156ebb28.webp)

**Popup Widget**

![Popup Widget embed](/_fern-img/338f536a471bc7153b4671ebe4967ea1b0cc78cc2ac95202d94f6ec964fc55f5.webp)

**Popup Text**

![Popup Text embed](/_fern-img/c5caf37d8e468762df4de76abd3efe7dac3e7f68f978c9d8abd8ca013bba2679.webp)

## Add your scheduling page to your website

To embed a scheduling page, visit the **Event Types** tab on your [Home page](https://calendly.com/event_types/user/me). Locate the page you would like to embed, click the gear icon, select **Add to Website**, then choose your embed type and adjust the appearance.

## Add an event type page to your website

Control the type of meeting your site visitors schedule by embedding a specific event type page. From the **Event Types** tab on your [Home page](https://calendly.com/event_types/user/me), locate your preferred event type, select **Add to Website** from the gear icon menu, and customize it to suit your web page.