# Embed Snippet Generator

You can get snippets for **React** or **HTML** and also configure many different aspects of embeds using **Embed Snippet Generator** itself. The snippet is automatically updated with the changes you make in it. 

Note: The snippets provided by the generator are automatically updated as per the cal.com instance. ***So, even when you are self hosting, you can simply copy and paste the snippets from here.***

Here is how you can access it.

<figure><img src="/files/MPe9sYer9GNYL75w8DYG" alt=""><figcaption></figcaption></figure>

Some of the things that you can configure

* Size of embed
* Theme
* Toggle event type details
* Brand color
* Layout
* Floating button text
* Floating button position at the bottom
* You can also configure all the custom CSS variables supported by cal.com app. [Here](https://github.com/calcom/cal.com/blob/main/packages/config/tailwind-preset.js#L18)[ is a list of all the supported CSS variables.](https://github.com/calcom/cal.com/blob/main/packages/config/tailwind-preset.js#L18)
  * [Here is a little demo that shows an example UI changes using CSS variables](https://codesandbox.io/s/embed-advanced-css-vars-x2sdgy?file=/src/App.tsx)

<figure><img src="/files/f8YeF63A8v8Sgt2IJLnU" alt=""><figcaption><p>Shows different configurations that can be done and their real time preview</p></figcaption></figure>

<figure><img src="/files/R0Ys1IO6GEvRMOUryZq4" alt=""><figcaption><p>You can select HTML snippet</p></figcaption></figure>

<figure><img src="/files/fQ6DYdgnkniJcvfxSIvH" alt=""><figcaption><p>You can use React snippet</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://calcom.gitbook.io/docs/core-features/new-docs-embed/embed-snippet-generator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.