Documentation Index
Fetch the complete documentation index at: https://docs.whatabot.app/llms.txt
Use this file to discover all available pages before exploring further.
Overview
whatabot’s flow editor can be embedded directly into your own application using an iframe. This allows you to offer flow-building capabilities to your users without them needing to leave your platform.Requirements
To embed the flow editor, you need:- An OAuth client — created in your workspace settings, providing a
clientIdandclientSecret. - A workspace with
iframe_enabledset totrue— iframe embedding must be explicitly enabled on the workspace. - A backend service — your server handles the authentication handshake so the client secret is never exposed to the browser.
The
clientSecret must never be exposed in frontend code. All authentication
with the client secret must happen on your backend. See Embed
Authentication for the secure flow.How it works
The iframe uses a combination of client credentials and one-time token (OTT) authentication:- Your backend authenticates with whatabot using the client credentials (Basic Auth).
- whatabot returns a one-time token (OTT) valid for 60 seconds.
- Your frontend passes the OTT to the iframe, which exchanges it for access and refresh tokens.
- The iframe uses those tokens to interact with the whatabot API.
Iframe URL
The iframe URL follows this format:| Parameter | Description |
|---|---|
{language} | Interface language: en (English) or pt (Portuguese) |
{flowId} | UUID of the flow to edit |
Theme
You can customize the editor theme by adding thetheme query param:
| Value | Description |
|---|---|
light | Light theme (default) |
dark | Dark theme |
Client token scope
Client tokens are scoped to a single workspace. An embedded editor can only access resources within the workspace the OAuth client was created for.Use case
Imagine you have a SaaS platform and want to allow your customers to create and edit conversation flows directly within your system.- List the flows from the workspace using the List Flows endpoint with your API key:
- Display the flows in your UI for the user to choose which one to edit.
-
Open the embedded editor with the selected
flowId:
Next steps
Embed Authentication
Learn the full 3-step authentication flow for the embedded editor, including
code examples.