> For the complete documentation index, see [llms.txt](https://calcom.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://calcom.gitbook.io/docs/core-features/new-docs-embed/embed-instructions.md).

# 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 details as the **Embed Snippet Generator**, automatically updates the snippet with these instructions in the way you configure it.

#### `inline`

Appends embed inline as the child of the element.

```html
<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>. 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.

```html
<script>
Cal("ui", { styles });
</script>
```

* `styles` - It supports styling for `body` and `eventTypeListItem`. Right now we support just background on these two.

#### preload

Usage:

If you want to open cal link on some action. Make it pop open instantly by preloading it.

```html
<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>