Guides

Embed a Public AI Agent

4 min readBuilding
Guides

Overview

Embed a public Taskade AI agent where visitors already work. Use an iframe for a fixed chat surface. Use the widget for a launcher, dialog, sidebar, search pill, or inline panel.

Taskade generates the code from the agent's Share > Embed screen. Copy the generated code. It includes the current public agent ID and the options that the selected mode supports.

Choose an embed type

Pick the smallest surface that fits the page.

Embed What visitors see Best fit
iframe A chat surface that is always visible Help centers and dedicated assistant pages
bubble A corner button that opens a chat panel Support and sales pages
modal A launcher that opens a centered dialog Focused conversations
sidebar A launcher that opens a full-height drawer Pages that must remain visible
searchBar An Ask AI pill mounted inside your layout Headers and documentation
inline An open chat panel mounted inside your layout Dedicated assistant sections

bubble is the widget default. Taskade leaves it out of the generated config.

searchBar and inline mount into a page element. The generated snippet includes:

Html
<div id="taskade-agent"></div>

Move this element to the place where the pill or panel must appear. Keep its ID aligned with the target value.

Add an iframe

When the agent must stay open inside a known area, use the iframe.

Html
<iframe
  allow="clipboard-read; clipboard-write"
  src="YOUR_PUBLIC_AGENT_URL"
  width="100%"
  height="400"
  frameborder="0"
  allowfullscreen
></iframe>

The generated iframe uses a width of 600 and a height of 400 by default. The responsive option changes the width to 100%. Generated dimensions stay between 100 and 4,000 pixels.

Add the widget

Place the generated script near the end of the page body.

Html
<script src="https://assets.taskade.com/embeds/latest/taskade-embed.min.js"></script>
<script type="module">
  TaskadeEmbed.TaskadeEmbed.init({
    "publicAgentId": "PUBLIC_AGENT_ID"
  });
</script>

Keep the double TaskadeEmbed.TaskadeEmbed.init name. The CDN bundle exposes the modern initializer at that path.

For an inline panel, add the host element. Then set the mode and the target:

Html
<div id="taskade-agent"></div>
<script src="https://assets.taskade.com/embeds/latest/taskade-embed.min.js"></script>
<script type="module">
  TaskadeEmbed.TaskadeEmbed.init({
    "publicAgentId": "PUBLIC_AGENT_ID",
    "mode": "inline",
    "target": "#taskade-agent"
  });
</script>

Configure the widget

Pass only the options that the selected mode uses.

Field Accepted value Effect
publicAgentId Public agent ID Selects the agent
mode bubble, modal, sidebar, searchBar, inline Selects the widget shell
target CSS selector Mounts searchBar or inline inside the page
theme.colorScheme light, dark Sets a fixed color scheme. Omit it to follow the visitor's system
theme.accent 3-digit or 6-digit hex color Sets the launcher and chat accent
popup.position bottom-right, bottom-left, top-right, top-left Places launcher modes
launcher.size sm, md, lg Sets the corner launcher size
launcher.label Text up to 60 characters Adds text to a launcher or search pill
behavior.proactiveMessage.text Text up to 200 characters Shows a welcome bubble
behavior.autoOpenDelay 1 through 120 seconds Opens the chat after a delay
trigger.selector CSS selector up to 200 characters Lets your own page element open or close the chat
trigger.hotkey Shortcut up to 40 characters Lets a keyboard shortcut open or close the chat

Launcher position and size do not apply to searchBar or inline. The inline mode is always open. It does not use a label, proactive message, auto-open delay, custom trigger, or hotkey.

Keep public access safe

Treat the embed as public access to the agent.

  • Review the agent's instructions and knowledge before publishing it.
  • Keep secrets and private records out of public knowledge sources.
  • Disable tools that a public visitor must not use.
  • Test the public page in a signed-out browser.
  • Turn off public access if the link reaches the wrong audience.

See Publish Agents Publicly for the product steps. See Authentication when your own service calls Taskade APIs.

PreviousSDK CookbookNextLong-Term Memory