The Embedded Calendar SDK allows you to embed a Mixmax public calendar in your website so that your visitors can book demos, meetings, and more without having to leave your site.
Calendar invites will automatically be sent to you and your guest when they pick a time. You'll get your guest's name and email address, as well as any other information like Company name, Phone number, etc. you've configured via Meeting Type custom fields when they book through your public calendar.
Adding an embedded calendar to your website (for static sites)
If your site is static:
- Click "Share your link" in your meeting type and copy the generated code into your site.
- Add the copied HTML to your site where you want your Embedded Calendar to render. The Mixmax Widget SDK will find the code and enhance it into a Mixmax Embedded Calendar.
If you'd rather load the calendar manually or install the SDK via a package manager like npm, check out Loading the Widget SDK.
You can adjust the height and width of the calendar by updating the
data-width attributes of the
div with valid height. and width values. If you specify the
px, the value you set must be at least
580px to ensure that the calendar is fully visible by visitors to your site.
<script defer src="https://sdk.mixmax.com/v2.0.7/sidebar.umd.min.js"></script> <div class="mixmax-embedded-calendar" data-user-calendar-link="testuser3-985" data-calendar-link="meetingtype_112" data-width="100%" data-height="580px" data-primary-color="#1155cc"> </div>
You can check out an example of a full HTML file here.
Adding an embedded calendar to your website (for dynamic sites)
If you're embedding the calendar on a dynamic site, the above code snippet will not work. Instead, embed the following HTML into your page (or React component):
<iframe frameborder="0" style="width: 100%; height: 580px;" src="https://cal.mixmax.com/demo/lunch"></iframe>
Replace the iframe
src attribute with your calendar URL. You do not need to include the sdk.mixmax.com
Updated about 1 year ago