Set up your embed

Display types

Assuming that you have followed the steps of installing and initializing the snippet, you can show the embed in the following ways:

Inline

Show the embed inline inside a container element. It would take the width and height of the container element.

Vanilla JS

<script>
  Cal("inline", {
    elementOrSelector: "Your Embed Container Selector Path", // You can also provide an element directly
    calLink: "jane", // The link that you want to embed. It would open https://cal.com/jane in embed
    config: {
      name: "John Doe", // Prefill Name
      email: "[email protected]", // Prefill Email
      notes: "Test Meeting", // Prefill Notes
      guests: ["[email protected]", "[email protected]"], // Prefill Guests
      theme: "dark", // "dark" or "light" theme
    },
  });
</script>

React

import Cal from "@calcom/embed-react";

const MyComponent = () => (
  <Cal
    calLink="pro"
    config={{
      name: "John Doe",
      email: "[email protected]",
      notes: "Test Meeting",
      guests: ["[email protected]"],
      theme: "dark",
    }}
  />
);

To show the embed as a popup on clicking an element, add data-cal-link attribute to the element.

Vanilla JS

To show the embed as a popup on clicking an element, simply add data-cal-link attribute to the element.

React

import "@calcom/embed-react";

const MyComponent = ()=> {
  return <button data-cal-link="jane" data-cal-config='A valid config JSON'></button>
}

Supported Instructions

Consider an instruction as a function with that name and that would be called with the given arguments.

inline

Appends embed inline as the child of the element.

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

<script>
  Cal("ui", { styles });
</script>
  • styles - It supports styling for body and eventTypeListItem. Right now we support just background on these two.

preload

Usage:

If you want to open cal link on some action. Make it pop open instantly by preloading it.

<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

Actions

You can listen to an action that occurs in embedded cal link as follows. You can think of them as DOM events. We are avoiding the term "events" to not confuse it with Cal Events.

<script>
  Cal("on", {
    action: "ANY_ACTION_NAME",
    callback: (e)=>{
      // `data` is properties for the event.
      // `type` is the name of the action(You can also call it type of the action.) This would be same as "ANY_ACTION_NAME" except when ANY_ACTION_NAME="*" which listens to all the events.
      // `namespace` tells you the Cal namespace for which the event is fired/
      const {data, type, namespace} = e.detail;
    }
  })
</script>

Following are the list of supported actions.

ActionDescriptionProperties
eventTypeSelectedWhen user chooses an event-type from the listing.eventType:object // Event Type that has been selected"
bookingSuccessfulWhen the booking is successfully done. It might not be confirmed.confirmed: boolean; //Whether confirmation from organizer is pending or not eventType: "Object for Event Type that has been booked"; date: string; // Date of Event duration: number; //Duration of booked Event organizer: object //Organizer details like name, timezone, email
linkReadyTells that the link is ready to be shown now.None
linkFailedFired if link fails to loadcode: number; // Error Code msg: string; //Human Readable msg data: object // More details to debug the error
__iframeReadyIt is fired when the embedded iframe is ready to communicate with parent snippet. This is mostly for internal use by Embed SnippetNone
__windowLoadCompleteTells that window load for iframe is completeNone
__dimensionChangedTells that dimensions of the content inside the iframe changed.iframeWidth:number, iframeHeight:number

Actions that start with __ are internal.

To get more details on how Embed actually works, you can refer to this Embed Flowchart.

Demos

Vanilla JS

React

Was this page helpful?