Introduction: Widget SDK

The Widget SDK lets you embed Mixmax functionality in your own website.

Loading the Widget SDK

Include the following line of Javascript in your website:

<script defer src="https://sdk.mixmax.com/v2.0.7/sidebar.umd.min.js"></script>

Note: replace "2.0.6" with the latest version from https://www.npmjs.com/package/@mixmaxhq/sdk

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.

📘

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.

🚧

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, please whitelist these domains accordingly.

If you're using a JavaScript bundler like Rollup or Webpack, instead of loading the SDK using a script tag, you can import the SDK from npm like

const Mixmax = require('@mixmaxhq/sdk');
Mixmax.widgets.load();

If your bundler is capable of importing ES6 modules and understands pkg.module, you can import the SDK like

import { widgets } from '@mixmaxhq/sdk';
widgets.load();

// If your bundler understands [`pkg.browser`](https://github.com/defunctzombie/package-browser-field-spec)
// like Rollup does when using rollup-plugin-node-resolve with
// [`browser: true`](https://github.com/rollup/rollup-plugin-node-resolve#usage),
// you can import directly from the widget SDK. This is not only a more concise
// import but may actually lead to bundling less JS due to 
// https://github.com/rollup/rollup/wiki/Troubleshooting#tree-shaking-doesnt-seem-to-be-working
import { load } from '@mixmaxhq/sdk/widgets';
load();