> 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

# Embed Recipes

The best way to encourage visitors to book with you is to embed a scheduling page onto your website. Choose from our [three embed options](/api-docs/overview/embedding/getting-started) to match the look and functionality that best suits your web page.

## Change the position of the widget

When using the pop-up widget embed, the default placement is at the bottom-right corner. To change the alignment, add one of the CSS snippets below.

**Left:**

```html
<!-- left align the badge widget -->
<style type="text/css">
  .calendly-badge-widget {
    right: auto !important;
    left: 20px !important;
  }
</style>
```

**Center:**

```html
<!-- center align the badge widget -->
<style type="text/css">
  .calendly-badge-widget {
    left: 50% !important;
    margin-left: -100px !important;
  }
</style>
```

## Create your own button

Add the Calendly CSS and JavaScript without the default text link, then trigger the popup on button click:

```html
<!-- Calendly link widget begin -->
<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>
<!-- Calendly link widget end -->
```

Add this `onclick` handler to any HTML element:

```html
onclick="Calendly.initPopupWidget({url:'YOUR_SCHEDULING_LINK'});return false;"
```

## Remove scroll bars

If the embed exceeds its container size, increase the height in the embed code:

```html
<div
  class="calendly-inline-widget"
  data-url="https://calendly.com/YOUR_SCHEDULING_LINK"
  style="position:relative; min-width:320px; height:750px;"
  data-processed="true">
</div>
```

## Make mobile embeds fullscreen

Add this meta tag to make the widget responsive on mobile devices:

```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```

## Hide event details

Remove duplicated information by hiding event details using URL parameters:

| Link type            | Parameter                      |
| -------------------- | ------------------------------ |
| Profile or team page | `?hide_landing_page_details=1` |
| Event type link      | `?hide_event_type_details=1`   |

## Pre-fill questions

Pre-populate the booking form with information you've already collected:

```javascript
Calendly.initInlineWidget({
  "url": 'https://calendly.com/YOUR_LINK/30min',
  "prefill": {
    "name": "John Doe",
    "email": "john@doe2.com",
    "customAnswers": {
      "a1": "Yes",
      "a2": "At the Starbucks on 3rd and 16th"
    }
  }
});
```

Use `firstName` and `lastName` instead of `name` for event types with separate name fields. Custom answers are numbered `a1` through `a10` in order.

## Set UTM parameters

Track the source of your invitee with UTM parameters. If you've added the embed code to your website, it will automatically look for these UTM parameters in the parent page URL:

* `utm_source`
* `utm_medium`
* `utm_campaign`
* `utm_content`
* `utm_term`

> **Note**
>
> There is a 255 character limit for UTM values.

**Map UTM parameters directly in the embed code:**

```javascript
Calendly.initInlineWidget({
  "url": 'https://calendly.com/YOUR_LINK/30min',
  "utm": {
    "utmCampaign": "Spring Sale 2019",
    "utmSource": "Facebook",
    "utmMedium": "Ad",
    "utmContent": "Shoe and Shirts",
    "utmTerm": "Spring"
  }
});
```

**Add a dynamic query string:**

```html
<div
  class="calendly-inline-widget"
  data-url="https://calendly.com/YOUR_LINK/30min?utm_source={source}"
  style="min-width:320px; height:630px;">
</div>
```

**Hardcode a parameter:**

```html
<div
  class="calendly-inline-widget"
  data-url="https://calendly.com/YOUR_LINK/30min?utm_source=facebook"
  style="min-width:320px; height:630px;">
</div>
```