⚠️ This article is intended for advanced users.

Customize the Meeting Location

Note: This is a feature exclusive to our premium plans.

When embedding a calendar page, you can override the specified location by choosing a custom URL parameter on the embedded URL. To use this feature, first create a Meeting Template. Under the section marked "Personalization" toggle on the option labeled "Allow location overrides from embedded URLs".

Now, when embedding your calendar page using the iFrame method, add a parameter to the URL called "xai_location" and assign a value that you wish to use for the location.

The resulting embedded page URL will look something like this:

calendar.x.ai/YourPage/PageName/?xai_location=200%20Broadway%20New%20York%20New%20York

If you are embedding your calendar page using the provided embed code, simply add this code in the <head> section of your page:

<script type="text/javascript">
var xdotaiLocation = 'Your Desired Location';
</script>


You can also pre-fill guest information on your Calendar Pages. Learn more here.

Customize the Button Text

When using the default x.ai embed code, we will place a button immediately after the embed code that says, "Schedule a meeting." You can change this text simply by setting a javascript variable called xdotaiButtonText on your page.

<script type="text/javascript">
var xdotaiButtonText = 'Book a consultation';
</script>

Customize the Button Position

You can place the button in a few different fixed positions on your page as well. Simply set a variable called xdotaiButtonPosition to one of the following values:

topLeft, topMiddle, topRight, bottomLeft, bottomMiddle, or bottomRight

<script type="text/javascript">
var xdotaiButtonPosition = 'bottomRight';
</script>

Add a CSS Class to the Button

You can add an additional CSS to your button simply by setting a variable called xdotaiCustomClassName to any classes you have that will be applied to a link. Note that this will override all of x.ai's default styling but will not override the position you set using the xdotaiButtonPosition variable.

<script type="text/javascript">
var xdotaiCustomClassName = 'my-button className';
</script>

Customize the Button's CSS

⚠️ Warning: this is most definitely for advanced users!

You can add additional CSS to your button simply by setting a variable called xdotaiExtraCss to a text string with additional properly formatted CSS to add on to the existing button's styles.

<script type="text/javascript">
var xdotaiExtraCss = 'width:100%;background-color:orange;';
</script>

Show the Calendar Page Header

When embedding you calendar page, you can also include a parameter to toggle the header of your page, including your photo and introduction text. If you are using the iFrame method of embedding, simply add "header=1" to turn on the header of an embedded page. It is off by default.

calendar.x.ai/YourPage/PageName/?header=1

If you are embedding your calendar page using the provided embed code, simply add this code in the <head> section of your page:

<script type="text/javascript">
var xdotaiHeader = true;
</script>

Set the Calendar Page URL Dynamically

If you are embedding your calendar page using the provided embed code, you can override the calendar page URL you wish to use. This is helpful if you want to include the same embed code across your site and dynamically update the URL for each page. To do so, simply add this code in the <head> section of your page:

<script type="text/javascript">
var xdotaiUrl = 'https://calendar.x.ai/YourPage/PageName/';
</script>

⚠️ Do not include parameters on this URL. That would be like crossing the streams.

Did this answer your question?