Guides

Embed a Public AI Agent

7 min readBuildingView as Markdown

Add a public Taskade AI agent to your website with an iframe or a chat widget. You publish the agent, copy the code from Publish → Embed, and paste the code into your page.

Page type: How-to guide. Use it when you know the goal and need the steps.

Before you start

You need an AI agent and edit access to your website's HTML.

  • An AI agent in your workspace. Publishing and embedding are on every plan.
  • Access to your site's HTML. You paste one <iframe class="genesis-app-embed"></iframe> or two <script> tags.
  • Optional, Business and above: Hide Branding, a custom background, and a meta image for the public agent.

Publish the agent and copy the code

Turn on public access, then copy the code that Taskade generates for you.

  1. Open the agent, then open the Publish tab. In the agent list, the Share menu item opens the same screen.
  2. Turn on the Publish Agent switch.
  3. Open the Embed sub-tab.
  4. Pick Add to your website for an iframe, or Add a chat widget for a widget.
  5. Copy the generated code.
┌────────────────────────────────────────────────────────────┐
│  Publish Agent                                  [ switch ] │
├────────────────────────────────────────────────────────────┤
│   Share │ Embed │ Customize │ Tool Permissions             │
│           ─────                                            │
│   Add to your website        iframe, fixed size            │
│   Add a chat widget          launcher or in-page panel     │
└────────────────────────────────────────────────────────────┘

The generated code holds the current public agent ID and only the options that the selected mode supports. The Customize sub-tab sets the look. Tool Permissions shows only when the agent has tools.

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.

inline must mount into a page element. searchBar can mount into one, for a pill in a site header. The generated snippet includes this host element:

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. A searchBar without a target is a pill fixed to the corner that popup.position sets.

Add an iframe

Use the iframe when the agent must stay open inside a known area.

Html
<iframe
  allow="clipboard-read; clipboard-write"
  src="YOUR_PUBLIC_AGENT_URL"
  width="100%"
  height="400"
  frameborder="0"
  allowfullscreen
></iframe>
Setting Default Range
width 600 100 to 4,000 pixels, or 100% with Responsive width (100%)
height 400 100 to 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">
  window.taskadeAgent = TaskadeEmbed.TaskadeEmbed.init({
    "publicAgentId": "PUBLIC_AGENT_ID"
  });
</script>

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

The snippet stores the widget handle on window.taskadeAgent. Your page code can call these methods:

Method Effect
open(), close(), toggle() Show or hide the chat
isOpen() Return the open state
setOptions(), setTheme() Change options or the theme after load
destroy() Remove the widget from the page

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">
  window.taskadeAgent = 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, auto Sets the color scheme of the widget. auto makes the launcher and panel follow the visitor's system setting. Set a value when the scheme matters, because the default can change between embed releases
theme.accent 3-digit or 6-digit hex color Sets the launcher and chat accent
theme.radius none, small, medium, large, full Sets the corner rounding of the widget panel and the welcome bubble. The default is large
theme.density compact, comfortable, spacious Sets the spacing of the welcome bubble. The default is comfortable
theme.fontFamily CSS font list up to 200 characters Sets the font of the launcher label, the search pill, and the welcome bubble. Quoted names and commas are allowed. CSS functions are not
interface.header.subtitle Text up to 80 characters Adds a second line to the chat header
interface.header.avatarUrl http or https image URL Replaces the avatar in the chat header. Taskade drops any other URL, and a URL with embedded credentials
interface.disclaimer Text up to 200 characters Shows a plain-text notice under the chat
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

Some options apply only to some modes:

  • The theme radius, density, and font style the widget around the chat, not the chat transcript.
  • launcher.size does not apply to searchBar or inline.
  • popup.position applies to searchBar only when it has no target.
  • inline is always open. It uses no 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 you publish it.
  • Keep secrets and private records out of public knowledge sources.
  • Turn off tools that a public visitor must not use.
  • Test the public page in a signed-out browser.
  • Turn off the Publish Agent switch if the link reaches the wrong audience.
  • Keep your API token out of the page. The embed code needs only the public agent ID. Your own server code uses a token, as Authentication shows.

Note: A public agent keeps no memory between visitor chats. Read what visitors asked in the agent's Messages tab.

Next steps