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.

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 is a list of all the supported CSS variables.

  • Here is a little demo that shows an example UI changes using CSS variables

Shows different configurations that can be done and their real time preview

You can select HTML snippet

You can use React snippet