> ## Documentation Index
> Fetch the complete documentation index at: https://docs.onestack.cloud/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.

#### 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)