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

# Getting Embed Code Snippets

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

Here is how you can access it.

1. Click on three dots of the event type and click on the option `Embed`
   <img src="https://mintcdn.com/onestack/sTJ5vBeQfsXpM5SF/images/i1600x900-h7erbVhGt9X5_uth9oa.png?fit=max&auto=format&n=sTJ5vBeQfsXpM5SF&q=85&s=4915caf743049cf400dd7fca56eac0ba" alt="Accessing embed option" width="1600" height="900" data-path="images/i1600x900-h7erbVhGt9X5_uth9oa.png" />

2. Configure as you require and then
   a. Copy the HTML code snippet

   <img src="https://mintcdn.com/onestack/sTJ5vBeQfsXpM5SF/images/i1600x900-mdLN0kkooRVB_juid5h.png?fit=max&auto=format&n=sTJ5vBeQfsXpM5SF&q=85&s=87445695b33c915f26f975252a21017d" alt="Copy HTML code snippet" width="1600" height="900" data-path="images/i1600x900-mdLN0kkooRVB_juid5h.png" />

   or,

   b. Copy the React code snippet

   <img src="https://mintcdn.com/onestack/sTJ5vBeQfsXpM5SF/images/i1600x900-pDo66wyQ4Zxc_zmljxo.png?fit=max&auto=format&n=sTJ5vBeQfsXpM5SF&q=85&s=88a4b735bc1edcd3c66167444d92ff55" alt="Copy React code snippet" width="1600" height="900" data-path="images/i1600x900-pDo66wyQ4Zxc_zmljxo.png" />

### What can you configure

* Size of embed
* Theme
* Toggle event type details
* Brand color
* Layout
* Floating button text
* Floating button position at the bottom

<img src="https://mintcdn.com/onestack/sTJ5vBeQfsXpM5SF/images/i1600x900-LOniVJNguQth_oibmdv.png?fit=max&auto=format&n=sTJ5vBeQfsXpM5SF&q=85&s=8fff365c800f55a77de8564802e4e2d9" alt="Configuration options" width="1600" height="900" data-path="images/i1600x900-LOniVJNguQth_oibmdv.png" />

You can also configure all the custom CSS variables supported by cal.com app. [Here is a list of all the supported CSS variables](https://github.com/calcom/cal.com/blob/main/packages/config/tailwind-preset.js#L18).

Also, [here is the codeSandbox demo](https://codesandbox.io/s/embed-advanced-css-vars-x2sdgy?file=/src/App.tsx) for a configuration where the look and feel of the embed is changed.

<img src="https://mintcdn.com/onestack/sTJ5vBeQfsXpM5SF/images/i1600x900-6CcRzVIWmCTJ_dnnrqu.png?fit=max&auto=format&n=sTJ5vBeQfsXpM5SF&q=85&s=d16872dfd3d32606f2a86371f5d42fb7" alt="Advanced CSS configuration example" width="1600" height="900" data-path="images/i1600x900-6CcRzVIWmCTJ_dnnrqu.png" />