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

# Embed instructions

An instruction is how you configure the embed. These instructions can be added immediately after the embed snippet.
An instruction is technically a function with the same name, that would be called with the given arguments.

You would not normally need to learn about these instructions in detail, as the **Embed Snippet Generator** automatically updates the snippet with these instructions in the way you configure it but still they could be useful.

#### Inline

Appends embed `inline` as the child of the element.

```js theme={null}
<script>
  Cal("inline", { elementOrSelector, calLink });
</script>
```

* `elementOrSelector` - Give it either a valid CSS selector or an HTMLElement instance directly
* `calLink` - Cal Link that you want to embed e.g. john. Just give the username. No need to give the full URL [https://cal.com/john](https://cal.com/john). It makes it easy to configure the calendar host once and use as many links you want with just usernames

#### UI

Configure `ui` for embed. Make it look part of your webpage.

```js theme={null}
<script>
  Cal("ui", { styles });
</script>
```

* `styles` - It supports styling for body and eventTypeListItem. Right now we support just background on these two.
* `hideEventTypeDetails` - When `true`, the event type details card (title, duration, description) is hidden so only the calendar and time slots are shown.
* `showTimezoneWhenEventDetailsHidden` - When `true` and used together with `hideEventTypeDetails: true`, the timezone selector is rendered above the booker. Use this when you have hidden the event type details card but still want bookers to be able to see and change their timezone before picking a slot. Defaults to `false`.

```js theme={null}
<script>
  Cal("ui", {
    hideEventTypeDetails: true,
    showTimezoneWhenEventDetailsHidden: true,
  });
</script>
```

#### Preload

To open cal link on some action, make it pop open instantly by using `preload`.

```js theme={null}
<script>
  Cal("preload", { calLink });
</script>
```

* `calLink` - Cal Link that you want to embed e.g. john. Just give the username. No need to give the full URL [https://cal.com/john](https://cal.com/john)

#### Close modal

Programmatically closes a modal-based embed shown as a pop-up (for example, when opened via an element click or the floating button).

```js theme={null}
<script>
  Cal("closeModal");
</script>
```

**Supported embed types:**

* Pop-up via element click
* Floating button pop-up

**Namespaced usage:**

```js theme={null}
<script>
  Cal.ns.yournamespace("closeModal");
</script>
```