{"_id":"582e3b161a6d730f0056fd8d","user":"5588b847f6c18d0d005bba01","__v":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":"Widget SDK"},"parentDoc":null,"project":"5588b8a2f6c18d0d005bba03","version":{"_id":"5588b8a2f6c18d0d005bba06","project":"5588b8a2f6c18d0d005bba03","__v":15,"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"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-11-17T23:19:50.797Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":true,"order":1,"body":"The sequence picker SDK lets you add contacts to a [Mixmax Sequence](http://success.mixmax.com/article/164-sequences-overview) from your own website.\n\nUsing a few lines of HTML and Javascript, you can transform an ordinary HTML button into an \"add to Mixmax sequence\" button. When your user clicks that button, it will show a list of their sequences in a dropdown menu. When they select a sequence, your Javascript provides a list of contacts (email addresses and names) to be added to that sequence, ready for the user to send.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/cb40b86-Screen_Shot_2017-11-10_at_7.55.30_PM.png\",\n        \"Screen Shot 2017-11-10 at 7.55.30 PM.png\",\n        333,\n        286,\n        \"#b3bbbe\"\n      ],\n      \"caption\": \"Example of the Mixmax SDK Sequence Picker button embedded in a third party product which shows a list of contacts that the user can select and add to the Mixmax sequence (using this API).\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/d894d7b-Screen_Shot_2017-11-10_at_7.55.34_PM.png\",\n        \"Screen Shot 2017-11-10 at 7.55.34 PM.png\",\n        363,\n        352,\n        \"#cdd2d4\"\n      ],\n      \"caption\": \"Clicking the \\\"Add to Mixmax Sequence\\\" button will show the user's Sequences\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/c2dcf2a-Screen_Shot_2017-11-10_at_8.47.04_PM.png\",\n        \"Screen Shot 2017-11-10 at 8.47.04 PM.png\",\n        2226,\n        1776,\n        \"#74777c\"\n      ],\n      \"caption\": \"Selecting a sequence will open a new tab and add the recipients to the Sequence\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Adding a sequence picker button to your website\"\n}\n[/block]\n1. Load the widget SDK into your website as described [here](https://developer.mixmax.com/docs/introduction-widget-sdk#loading-the-widget-sdk).\n\n2. Create a new anchor element with a `mixmax-add-sequence-recipients-button` class to allow Mixmax's widgets JavaScript to discover the element and enhance it into a sequence picker button. \n\n3. Set a `data-recipients-function` attribute whose value is the name of a global function. When the user clicks on the button, this function will be called with a single parameter, a callback. The function should invoke this callback with an array of recipients to add to the sequence selected by the user. These recipients should have the structure shown [here](http://developer.mixmax.com/v1.0/docs/sequencessequenceidrecipients#recipient-structure).\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.1.2/widgets.umd.js\\\"></script>\\n\\n<a class=\\\"mixmax-add-sequence-recipients-button\\\"\\n   data-recipients-function=\\\"getRecipients\\\">\\n</a>\\n\\n<script type=\\\"text/javascript\\\">\\n  // For an example of where this data might come from, see\\n  // https://github.com/mixmaxhq/mixmax-sdk-js/blob/master/examples/sequencepicker/index.html.\\n  window.getRecipients = function(done) {\\n    done([{\\n      email: 'john.smith:::at:::example.com',\\n      variables: {\\n        Email: 'john.smith@example.com',\\n        'First Name': 'John',\\n        'Last Name': 'Smith'\\n      },\\n      scheduledAt: false\\n    }]);\\n  };\\n</script>\\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Video Tutorial\"\n}\n[/block]\n\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FJEVxkkdIAYA%3Ffeature%3Doembed&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJEVxkkdIAYA&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FJEVxkkdIAYA%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\\\" width=\\\"640\\\" height=\\\"480\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://www.youtube.com/watch?v=JEVxkkdIAYA&feature=youtu.be\",\n  \"title\": \"Sequence Picker SDK\",\n  \"favicon\": \"https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico\",\n  \"image\": \"https://i.ytimg.com/vi/JEVxkkdIAYA/hqdefault.jpg\"\n}\n[/block]","excerpt":"","slug":"sequences-picker","type":"basic","title":"Sequence Picker"}
The sequence picker SDK lets you add contacts to a [Mixmax Sequence](http://success.mixmax.com/article/164-sequences-overview) from your own website. Using a few lines of HTML and Javascript, you can transform an ordinary HTML button into an "add to Mixmax sequence" button. When your user clicks that button, it will show a list of their sequences in a dropdown menu. When they select a sequence, your Javascript provides a list of contacts (email addresses and names) to be added to that sequence, ready for the user to send. [block:image] { "images": [ { "image": [ "https://files.readme.io/cb40b86-Screen_Shot_2017-11-10_at_7.55.30_PM.png", "Screen Shot 2017-11-10 at 7.55.30 PM.png", 333, 286, "#b3bbbe" ], "caption": "Example of the Mixmax SDK Sequence Picker button embedded in a third party product which shows a list of contacts that the user can select and add to the Mixmax sequence (using this API)." } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/d894d7b-Screen_Shot_2017-11-10_at_7.55.34_PM.png", "Screen Shot 2017-11-10 at 7.55.34 PM.png", 363, 352, "#cdd2d4" ], "caption": "Clicking the \"Add to Mixmax Sequence\" button will show the user's Sequences" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/c2dcf2a-Screen_Shot_2017-11-10_at_8.47.04_PM.png", "Screen Shot 2017-11-10 at 8.47.04 PM.png", 2226, 1776, "#74777c" ], "caption": "Selecting a sequence will open a new tab and add the recipients to the Sequence" } ] } [/block] [block:api-header] { "type": "basic", "title": "Adding a sequence picker button to your website" } [/block] 1. Load the widget SDK into your website as described [here](https://developer.mixmax.com/docs/introduction-widget-sdk#loading-the-widget-sdk). 2. Create a new anchor element with a `mixmax-add-sequence-recipients-button` class to allow Mixmax's widgets JavaScript to discover the element and enhance it into a sequence picker button. 3. Set a `data-recipients-function` attribute whose value is the name of a global function. When the user clicks on the button, this function will be called with a single parameter, a callback. The function should invoke this callback with an array of recipients to add to the sequence selected by the user. These recipients should have the structure shown [here](http://developer.mixmax.com/v1.0/docs/sequencessequenceidrecipients#recipient-structure). [block:api-header] { "title": "Example" } [/block] [block:code] { "codes": [ { "code": "<script defer src=\"https://sdk.mixmax.com/v1.1.2/widgets.umd.js\"></script>\n\n<a class=\"mixmax-add-sequence-recipients-button\"\n data-recipients-function=\"getRecipients\">\n</a>\n\n<script type=\"text/javascript\">\n // For an example of where this data might come from, see\n // https://github.com/mixmaxhq/mixmax-sdk-js/blob/master/examples/sequencepicker/index.html.\n window.getRecipients = function(done) {\n done([{\n email: 'john.smith@example.com',\n variables: {\n Email: 'john.smith@example.com',\n 'First Name': 'John',\n 'Last Name': 'Smith'\n },\n scheduledAt: false\n }]);\n };\n</script>\n", "language": "html" } ] } [/block] [block:api-header] { "type": "basic", "title": "Video Tutorial" } [/block] [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FJEVxkkdIAYA%3Ffeature%3Doembed&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJEVxkkdIAYA&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FJEVxkkdIAYA%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\" width=\"640\" height=\"480\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://www.youtube.com/watch?v=JEVxkkdIAYA&feature=youtu.be", "title": "Sequence Picker SDK", "favicon": "https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico", "image": "https://i.ytimg.com/vi/JEVxkkdIAYA/hqdefault.jpg" } [/block]