Chatbot
Embed the chatbot flow builder for a single chatbot and react to save and publish events.
Mounts the flow builder for one chatbot as an iframe. There is no list or create surface — you name the chatbot to edit with chatbotId. Create chatbots from the dashboard or the Chatbots API.
Quick start
<div id="embed" style="height: 720px"></div>
<script src="https://new.theultimate.io/embed.js" defer></script>
<script>
Embed.render("chatbot", {
target: "#embed",
chatbotId: "cb_123",
authToken: "<jwt>", // or apiKey: "pm_xxx"
theme: "system",
on: {
ready: function (m) {
console.log("editor ready", m.chatbotId);
},
saved: function (m) {
console.log("flow saved", m.chatbotId);
},
published: function (m) {
console.log("flow published", m.chatbotId);
},
},
});
</script>Options
All common options apply, plus:
| Option | Type | Required | Description |
|---|---|---|---|
chatbotId | string | yes | The chatbot to edit. |
Events
| Event | Fires when |
|---|---|
ready | The builder has loaded and authenticated. |
saved | The flow draft is saved. |
published | The flow is compiled and published (activated). |
Handlers receive a payload that includes the chatbotId.
published corresponds to activating the flow — the same effect as the
Activate Flow API.
Teardown
render returns an instance; call destroy() when you remove the embed (required in SPAs):
var instance = Embed.render("chatbot", {
target: "#embed",
chatbotId: "cb_123",
authToken: "<jwt>",
});
// later…
instance.destroy();How is this guide?