** Using WordPress? Try our WordPress plugin. Otherwise, read on. **

There are two ways to embed your calendar page on your website, using a simple iFrame or using the configurable inline pop-up API.

Embedding your calendar page inline

You can paste the following code snippet into your site's HTML to allow your guests to schedule a meeting from your website. Please update the "src" field with your own personalized calendar page URL. You can view all your links on my.x.ai/calendarpage.


<iframe src="https://calendar.x.ai/YOUR_URL" style="width:100%;min-height:600px;" scrolling="auto" > </iframe>

Note that by default, your calendar page will not show your image or introduction when embedded. If you prefer that these elements appear simply add "?header=1" to the URL you wish to embed. 

You can also use the style attribute to adjust the appearance of your page. In this example, we remove the borders (border:none) and we make the embed the height of the window (height:100vh):

<iframe src="https://calendar.x.ai/YOUR_URL/?header=1" style="width:100%;height:100vh;border:none;" scrolling="auto"> </iframe>

Embedding your calendar page as an inline pop-up

Below you will find a script tag. You can insert this script element anywhere in the <body> tag of your page and wherever you place it you will see a "Schedule a meeting" button appear. Clicking that button will open your calendar page. The default button looks like this:

Don't want to use our default button? No problem, read #4 below!

Customizing the code

There are a few elements you can customize in the script tag to modify the appearance of the calendar page.

  1. data-page: Specify your calendar page URL (e.g. /brian/phone) in the data-page element of the script. This is the only required field.

  2. data-width: You can set an explicit max-width in pixels (omit the "px"). The default value is 800 pixels wide (maximum).

  3. data-height: You can set an explicit height in pixels as well. The default value is 85% of the page viewport. We recommend leaving this as-is.

  4. data-element: You can attach the pop up to any element on your page using a query selector (i.e. "#button" or "a.buttonClass.cta"). Clicking any matching element will then launch the calendar page. The default button will not appear if this is set.


<script type="text/javascript" src="https://x.ai/embed/xdotai-embed.js" id="xdotaiEmbed" data-page="/my-name/my-meeting" data-height data-width="500" data-element="#clickableElementID" async></script>


<script type="text/javascript" src="https://x.ai/embed/xdotai-embed.js" id="xdotaiEmbed"

Next: Customize the behavior of your embedded calendar pages!

Did this answer your question?