{"_id":"5aa19cfa6af20f00c020bbc5","project":"5588b8a2f6c18d0d005bba03","version":{"_id":"5588b8a2f6c18d0d005bba06","project":"5588b8a2f6c18d0d005bba03","__v":16,"createdAt":"2015-06-23T01:38:42.696Z","releaseDate":"2015-06-23T01:38:42.696Z","categories":["5588b8a3f6c18d0d005bba07","5588e9689cfea70d00371df3","5588f5921163180d00b64704","561598b121e9110d0078025a","5616f1c9d170d00d00189306","5616f5c3a410c90d00c6121e","561803dcf8c9632100ac7592","563667280441020d0000e9eb","5642570d9417b40d00c0fcd3","57bf5f02efe0050e00d50bd5","57f53fb368a53b2000e03f0f","57f55187440418170086325a","582e3afa72fd270f0006926d","5841faa973967b0f004b4a2b","58db348aa32c8419002433bb","5a31c9409a6f2000125c079f"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"582e3afa72fd270f0006926d","version":"5588b8a2f6c18d0d005bba06","__v":0,"project":"5588b8a2f6c18d0d005bba03","sync":{"url":"","isSync":false},"reference":true,"createdAt":"2016-11-17T23:19:22.077Z","from_sync":false,"order":3,"slug":"widget-api","title":"Embed Mixmax into your website"},"user":"5588b847f6c18d0d005bba01","githubsync":"","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-03-08T20:28:42.102Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":true,"order":3,"body":"The Embedded Calendar SDK allows you to embed a [Mixmax public calendar](https://success.mixmax.com/article/172-public-mixmax-calendar) in your website so that your visitors can book demos, meetings, and more without having to leave your site.\n\nCalendar 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](https://success.mixmax.com/article/184-create-custom-meeting-types) when they book through your public calendar.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/0310b2f-updated_screeny.png\",\n        \"updated screeny.png\",\n        1662,\n        1484,\n        \"#12306d\"\n      ],\n      \"caption\": \"Embed your meeting type public calendar in your site.\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Adding an embedded calendar to your website\"\n}\n[/block]\n1. Click \"Share your link\" in your meeting type and copy the generated code into your site.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/fdd2cb9-new_share_flyout.png\",\n        \"new share flyout.png\",\n        1018,\n        1060,\n        \"#592167\"\n      ],\n      \"caption\": \"Click \\\"Share your link\\\" to get the code for your Mixmax Embedded Calendar.\"\n    }\n  ]\n}\n[/block]\n2. 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.\n\nIf you'd rather load the calendar manually or install the SDK via a package manager like npm, check out [_Loading the Widget SDK_](https://developer.mixmax.com/docs/introduction-widget-sdk#loading-the-widget-sdk).\n\nYou can adjust the height and width of the calendar by updating the `data-height` and `data-width` attributes of the `div` with valid [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height). and [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) values. If you specify the `height` in `px`, the value you set must be at least `580px` to ensure that the calendar is fully visible by visitors to your site.\n[block:api-header]\n{\n  \"title\": \"Example\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script defer src=\\\"https://sdk.mixmax.com/v1.5.2/widgets.umd.min.js\\\"></script>\\n\\n<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\\\">\\n</div>\",\n      \"language\": \"html\",\n      \"name\": \"\"\n    }\n  ]\n}\n[/block]\nYou can check out an example of a full HTML file [here](https://github.com/mixmaxhq/mixmax-sdk-js/blob/d43a7882c805de00821c9cb3a56a02e6273de169/examples/embeddedcalendar/index.html).","excerpt":"","slug":"embedded-calendar","type":"basic","title":"Embedded Calendar"}
The Embedded Calendar SDK allows you to embed a [Mixmax public calendar](https://success.mixmax.com/article/172-public-mixmax-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](https://success.mixmax.com/article/184-create-custom-meeting-types) when they book through your public calendar. [block:image] { "images": [ { "image": [ "https://files.readme.io/0310b2f-updated_screeny.png", "updated screeny.png", 1662, 1484, "#12306d" ], "caption": "Embed your meeting type public calendar in your site." } ] } [/block] [block:api-header] { "title": "Adding an embedded calendar to your website" } [/block] 1. Click "Share your link" in your meeting type and copy the generated code into your site. [block:image] { "images": [ { "image": [ "https://files.readme.io/fdd2cb9-new_share_flyout.png", "new share flyout.png", 1018, 1060, "#592167" ], "caption": "Click \"Share your link\" to get the code for your Mixmax Embedded Calendar." } ] } [/block] 2. 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_](https://developer.mixmax.com/docs/introduction-widget-sdk#loading-the-widget-sdk). You can adjust the height and width of the calendar by updating the `data-height` and `data-width` attributes of the `div` with valid [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height). and [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) values. If you specify the `height` in `px`, the value you set must be at least `580px` to ensure that the calendar is fully visible by visitors to your site. [block:api-header] { "title": "Example" } [/block] [block:code] { "codes": [ { "code": "<script defer src=\"https://sdk.mixmax.com/v1.5.2/widgets.umd.min.js\"></script>\n\n<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\">\n</div>", "language": "html", "name": "" } ] } [/block] You can check out an example of a full HTML file [here](https://github.com/mixmaxhq/mixmax-sdk-js/blob/d43a7882c805de00821c9cb3a56a02e6273de169/examples/embeddedcalendar/index.html).