37 lines
1.5 KiB
Plaintext
37 lines
1.5 KiB
Plaintext
---
|
|
title: 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="//images/i1600x900-h7erbVhGt9X5_uth9oa.png" alt="Accessing embed option" />
|
|
|
|
2. Configure as you require and then
|
|
a. Copy the HTML code snippet
|
|
<img src="//images/i1600x900-mdLN0kkooRVB_juid5h.png" alt="Copy HTML code snippet" />
|
|
|
|
or,
|
|
|
|
b. Copy the React code snippet
|
|
<img src="//images/i1600x900-pDo66wyQ4Zxc_zmljxo.png" alt="Copy React code snippet" />
|
|
|
|
### 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="//images/i1600x900-LOniVJNguQth_oibmdv.png" alt="Configuration options" />
|
|
|
|
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="//images/i1600x900-6CcRzVIWmCTJ_dnnrqu.png" alt="Advanced CSS configuration example" /> |