{"_id":"582e3c568ad3c90f00d1a028","user":"5588b847f6c18d0d005bba01","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"},"__v":0,"parentDoc":null,"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"},"githubsync":"","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-11-17T23:25:10.913Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":true,"order":0,"body":"The Widget SDK lets you embed Mixmax functionality in your own website.\n[block:api-header]\n{\n  \"title\": \"Loading the Widget SDK\"\n}\n[/block]\nInclude the following line of Javascript in your website:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script defer src=\\\"https://sdk.mixmax.com/v1.5.1/widgets.umd.min.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nWhen the document has finished loading, the script will automatically scan the page for special HTML elements, designated by you, that indicate where to load Mixmax widgets, and load the widgets at those points. See individual widget documentation for more details.\n\nThe script will also create the global function `Mixmax.widgets.load`. Your JavaScript may call `Mixmax.widgets.load()` to re-scan the page if you load the widget insertion points after the document finishes its initial load.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"\",\n  \"body\": \"The SDK will only automatically scan the page if you load it directly, using a script tag sourcing `widgets.umd.min.js` or `widgets.umd.js`. If you load the SDK in _any_ other fashion, your JavaScript will have to call `Mixmax.widgets.load()` itself.\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"When `Mixmax.widgets.load()` is called, either automatically (see above) or by your JavaScript, the SDK will load CSS from https://sdk.mixmax.com/ and iframes from https://compose.mixmax.com and https://emailapps.mixmax.com. If you are using a [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), please whitelist these domains accordingly.\",\n  \"title\": \"\"\n}\n[/block]\nIf you're using a JavaScript bundler like [Rollup](https://rollupjs.org/) or [Webpack](https://webpack.github.io/), instead of loading the SDK using a script tag, you can import the SDK from npm like\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"const Mixmax = require(':::at:::mixmaxhq/sdk');\\nMixmax.widgets.load();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIf your bundler is capable of importing ES6 modules and understands `pkg.module`, you can import the SDK like\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import { widgets } from '@mixmaxhq/sdk';\\nwidgets.load();\\n\\n// If your bundler understands [`pkg.browser`](https://github.com/defunctzombie/package-browser-field-spec)\\n// like Rollup does when using rollup-plugin-node-resolve with\\n// [`browser: true`](https://github.com/rollup/rollup-plugin-node-resolve#usage),\\n// you can import directly from the widget SDK. This is not only a more concise\\n// import but may actually lead to bundling less JS due to \\n// https://github.com/rollup/rollup/wiki/Troubleshooting#tree-shaking-doesnt-seem-to-be-working\\nimport { load } from '@mixmaxhq/sdk/widgets';\\nload();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"introduction-widget-sdk","type":"basic","title":"Introduction: Widget SDK"}

Introduction: Widget SDK


The Widget SDK lets you embed Mixmax functionality in your own website. [block:api-header] { "title": "Loading the Widget SDK" } [/block] Include the following line of Javascript in your website: [block:code] { "codes": [ { "code": "<script defer src=\"https://sdk.mixmax.com/v1.5.1/widgets.umd.min.js\"></script>", "language": "html" } ] } [/block] When the document has finished loading, the script will automatically scan the page for special HTML elements, designated by you, that indicate where to load Mixmax widgets, and load the widgets at those points. See individual widget documentation for more details. The script will also create the global function `Mixmax.widgets.load`. Your JavaScript may call `Mixmax.widgets.load()` to re-scan the page if you load the widget insertion points after the document finishes its initial load. [block:callout] { "type": "info", "title": "", "body": "The SDK will only automatically scan the page if you load it directly, using a script tag sourcing `widgets.umd.min.js` or `widgets.umd.js`. If you load the SDK in _any_ other fashion, your JavaScript will have to call `Mixmax.widgets.load()` itself." } [/block] [block:callout] { "type": "warning", "body": "When `Mixmax.widgets.load()` is called, either automatically (see above) or by your JavaScript, the SDK will load CSS from https://sdk.mixmax.com/ and iframes from https://compose.mixmax.com and https://emailapps.mixmax.com. If you are using a [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), please whitelist these domains accordingly.", "title": "" } [/block] If you're using a JavaScript bundler like [Rollup](https://rollupjs.org/) or [Webpack](https://webpack.github.io/), instead of loading the SDK using a script tag, you can import the SDK from npm like [block:code] { "codes": [ { "code": "const Mixmax = require('@mixmaxhq/sdk');\nMixmax.widgets.load();", "language": "javascript" } ] } [/block] If your bundler is capable of importing ES6 modules and understands `pkg.module`, you can import the SDK like [block:code] { "codes": [ { "code": "import { widgets } from '@mixmaxhq/sdk';\nwidgets.load();\n\n// If your bundler understands [`pkg.browser`](https://github.com/defunctzombie/package-browser-field-spec)\n// like Rollup does when using rollup-plugin-node-resolve with\n// [`browser: true`](https://github.com/rollup/rollup-plugin-node-resolve#usage),\n// you can import directly from the widget SDK. This is not only a more concise\n// import but may actually lead to bundling less JS due to \n// https://github.com/rollup/rollup/wiki/Troubleshooting#tree-shaking-doesnt-seem-to-be-working\nimport { load } from '@mixmaxhq/sdk/widgets';\nload();", "language": "javascript" } ] } [/block]