Broadcast
Embed the broadcast-creation wizard and react to created and cancelled events.
Mounts the broadcast-creation wizard as an iframe: name, audience, template, variables, media, and schedule. There is no list or report surface — the embed always opens on a fresh broadcast, so it's ideal for an in-app "New broadcast" flow.
Quick start
<div id="embed" style="height: 720px"></div>
<script src="https://new.theultimate.io/embed.js" defer></script>
<script>
Embed.render("broadcast", {
target: "#embed",
authToken: "<jwt>", // or apiKey: "pm_xxx"
theme: "system",
on: {
ready: function () {
console.log("creator ready");
},
created: function (m) {
console.log("broadcast created", m.broadcastId, m.sendType);
},
cancelled: function () {
console.log("creator cancelled");
},
},
});
</script>Options
On top of the common options:
| Option | Type | Required | Description |
|---|---|---|---|
fromBroadcast | string | no | Broadcast id whose recipients pre-fill the wizard. |
statuses | string | no | Comma-separated recipient statuses to retarget, e.g. "failed,read". Applied only with fromBroadcast. |
redirectUrl | string | no | Where the wizard goes on Back, Discard, or a completed send. See Redirect on exit. |
Pass fromBroadcast (and optionally statuses) together to open the wizard pre-filled with the recipients of an earlier broadcast, matching the dashboard "resend" flow.
Redirect on exit
By default the wizard reports exits through events: cancelled when the user backs out, created when a broadcast is sent. Set redirectUrl to instead send the iframe to a URL of your choice on Back, Discard, and after a successful send. The created event still fires first, so your page can react before the redirect happens; the cancelled event does not fire when redirectUrl is set.
<div id="embed" style="height: 720px"></div>
<script>
Embed.render("broadcast", {
target: "#embed",
authToken: "<jwt>",
redirectUrl: "https://app.example.com/campaigns",
});
</script>The URL loads inside the iframe, so a relative in-app path (for example one that carries its own auth params) round-trips without a full page navigation on your host. This is the mechanism the Broadcast List embed uses to return to the list after a send.
Events
| Event | Fires when |
|---|---|
ready | The wizard has loaded and authenticated. |
created | A broadcast was created. Payload: { broadcastId, name, sendType } where sendType is "now" or "scheduled". |
cancelled | The user dismissed the wizard without creating a broadcast. |
Prefill recipients
Push a list of phone numbers into the wizard's manual recipients field with instance.setNumbers(...). It switches the audience to the manual tab and replaces whatever is there. Call it after the ready event, since the wizard has to be mounted to receive the numbers.
setNumbers accepts an array, or a single string separated by commas, spaces, or newlines. Everything except digits is stripped per number (so +91 98765 43210 becomes 919876543210), matching what typing into the field yourself produces.
var instance = Embed.render("broadcast", {
target: "#embed",
authToken: "<jwt>",
on: {
ready: function () {
instance.setNumbers(["919876543210", "919812345678"]);
// or a string: instance.setNumbers("919876543210, 919812345678");
},
},
});Each call replaces the manual list, so send the full set you want, not deltas. Numbers are not de-duplicated or validated on injection; the wizard shows the same valid / invalid / duplicate counts and controls a user gets when pasting.
Teardown
render returns an instance; call destroy() when you remove the embed (required in SPAs):
var instance = Embed.render("broadcast", {
target: "#embed",
authToken: "<jwt>",
});
// later…
instance.destroy();How is this guide?


