{"_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 API"},"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":false,"order":1,"body":"The sequence picker API lets you add contacts to a Mixmax sequence 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, the contacts your JavaScript provides will be added to that sequence, ready for the user to send.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Adding a sequence picker button to your website\"\n}\n[/block]\n1. Email [hello:::at:::mixmax.com](mailto:hello@mixmax.com) for your developer key. You'll receive instructions on how to load Mixmax's widgets JavaScript.\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:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<a class=\\\"mixmax-add-sequence-recipients-button\\\"\\n   data-recipients-function=\\\"getRecipients\\\">\\n</a>\\n\\n<script type=\\\"text/javascript\\\">\\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\",\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 API lets you add contacts to a Mixmax sequence 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, the contacts your JavaScript provides will be added to that sequence, ready for the user to send. [block:api-header] { "type": "basic", "title": "Adding a sequence picker button to your website" } [/block] 1. Email [hello@mixmax.com](mailto:hello@mixmax.com) for your developer key. You'll receive instructions on how to load Mixmax's widgets JavaScript. 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:code] { "codes": [ { "code": "<a class=\"mixmax-add-sequence-recipients-button\"\n data-recipients-function=\"getRecipients\">\n</a>\n\n<script type=\"text/javascript\">\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]