Embed AI Agents as Website Widgets

Overview

Agent widgets put a Taskade AI agent inside any website. Pick the layout that fits the page. Then choose how visitors open the conversation.

TL;DR: Make an agent public, open Embed, and pick Bubble, Modal, Sidebar, Ask AI, or Inline. Copy the generated snippet into your site. For launcher layouts, use Taskade's button, connect your own page button, or add a keyboard shortcut. Inline stays open and does not use launch triggers.

Here is the chat widget docked in the corner of your site, with the embed snippet you paste once. The panel shows a live preview. The widget on the right updates when you change a setting on the left.

┌─────────────────────────────────────────────────────────────┐
│  Pricing   Features   Docs                  Live preview ◉  │
│                                                             │
│                                          ┌───────────────┐  │
│                                          │  Ask our AI ⌄ │  │
│                                          ├───────────────┤  │
│                                          │ Hi! How can I │  │
│                                          │ help today?   │  │
│                                          │               │  │
│                                          │ [ Type here ] │  │
│                                          └───────────────┘  │
│                                              ◍  ← launcher  │
└─────────────────────────────────────────────────────────────┘

  Paste once, before </body>:
  <script src="https://assets.taskade.com/embeds/latest/taskade-embed.min.js"></script>
  <script type="module">
    TaskadeEmbed.TaskadeEmbed.init({ publicAgentId: "your-agent-id" });
  </script>

Choose an Embed Style

Pick a style based on where and when the conversation must appear.

The Ask AI and Inline snippets include a page element for the experience. Move that element to the location where you want it to appear.

Generate the Embed Snippet

Build the snippet inside the agent's sharing panel, then paste it once on your site.

1. Open the Agents tab and pick the agent you want to embed.
2. Click Share in the top-right.
3. Make sure the Public toggle is on. If it is not, see Publish Agents Publicly.
4. Switch to the Embed tab.
5. Pick Bubble, Modal, Sidebar, Ask AI, or Inline.
6. Set the controls shown for that style.
7. Watch the live preview as you change each control.
8. Click Copy snippet.
9. Paste the snippet on your site, ideally before the closing </body> tag.

The snippet is one script tag plus one config object. No build step. No install. No extra setup.

The generated snippet only carries settings the widget honors. The code you paste matches what you set. Anything left at its default is left out.

Review Visitor Tools and MCP Access

The Embed tab shows which tools public visitors can use. Review these chips before copying a snippet so the public surface matches the permissions you intended.

The same tab also includes Connect via MCP. MCP stands for Model Context Protocol, the shared standard AI tools use to reach your data. The button copies a ready-made Taskade connection for an outside AI tool such as Claude or Cursor. The copied text holds a placeholder where your token goes. Paste a Personal Access Token from Settings → API over that placeholder. This connection lets a compatible AI tool work with Taskade. It does not embed a website widget.

The hosted MCP server behind this button is available on every paid plan. The Free plan does not include it. See the MCP Server guide for setup steps and the full plan matrix.

When you want the widget corners to match your site, use the radius control. The generated configuration honors the saved radius together with the theme and font.

Customize the Look

Set the look once on the agent's Customize tab. The widget shows your hosted agent page inside the popout. Every place the agent appears picks up the same design.

Welcome message, starter prompt text, composer placeholder, and avatar are the agent's own settings rather than widget settings. Change them once on the agent and the widget follows. There is nothing to re-copy.

Changes save as you make them. The live preview updates at once. Your published widget picks them up on the visitor's next page load.

Choose How Visitors Open the Chat

Use the controls shown for your selected style. These settings go into the snippet. The same agent can behave differently on each site.

Inline stays open inside the page. It does not use a launcher, custom button, keyboard shortcut, welcome bubble, or auto-open delay.

If you want to connect your own button, enter its CSS selector. A CSS selector is the short name a web page uses to point at one element. For example, enter #ask-ai-button for a page element with that ID. A click on the element opens and closes the chat.

Use auto-open only on pages where visitors expect help. It runs once per visit. If you open or close the chat by hand, the timer stops.

Find Visitor Conversations

Open the Visitor Inbox tab on your agent's chat screen. Every visitor chat appears there as a thread. Reply live, hand the conversation to a teammate, or let the agent finish. Search the threads for product feedback, FAQ gaps, or support patterns. See Public Agent Inbox for the full tour.

If your agent uses a tool mid-answer, the workspace view shows what the tool ran with and what it returned. The public page shows only what the tool ran with. A raw result can carry workspace or third-party data. Taskade never shows that result to an anonymous visitor.

Use a branded domain.

Pair the widget with Branded Agent Links. The popout then opens on your domain, not taskade.com. Visitors stay on your-brand.com for the entire conversation. Cookies stay on your own domain. Your analytics tracking works without third-party cookie warnings.

Add one domain record, called a CNAME, at your domain provider. Attach it to the agent. The widget then uses your branded link.

Check Plan Availability

Check your plan before you use the Business branding options. Publishing and embedding an agent do not need a paid plan. Theme, accent color, header, launcher icon, footer line, and dismissable notice are also available on every plan.

Free workspaces can keep one custom agent. Decide which agent gets the widget before you embed it. See pricing for the full plan matrix.

Related guides

• Publish Agents Publicly: Required step before generating an embed snippet
• Use a Custom Domain for Agent Links: Open the widget on your own domain
• Public Agent Inbox: Read every visitor conversation in one place
• Tools for AI Agents: Choose the capabilities visitors can use
• Taskade MCP Server: Connect an external AI client to Taskade
• Explore AI agents