How to Embed an AI Agent Squad on Your Website (2026 Tutorial)

You've built an AI agent squad — a team of researchers, writers, and coders that executes real work. Now what if your website visitors could interact with that squad directly, without leaving your site?

That's what an embeddable AI squad widget does. It lets you place your AI agents on any webpage, blog post, or documentation site. Visitors can ask questions, get research done, or generate content — all powered by your squad's agents.

This tutorial shows you how to set it up in 5 minutes.

Related: How to Build an AI Research Team in 5 Minutes · Get Your First AI Agent Result · AI Agent Workflows · Compare AI Agent Tools

What Is an Embeddable AI Squad Widget?

An embeddable AI squad widget is a small piece of JavaScript you add to your website that renders an interactive AI agent interface. Visitors can:

• Ask questions that get routed to the right agent in your squad
• Get real-time responses streamed directly on your page
• Use pre-configured agent roles (researcher, writer, coder) without signing up
• Share results or continue the conversation

It's like having a ChatGPT widget on your site — except it runs on your own multi-agent squad with specialized roles.

Why Embed an AI Squad?

For SaaS Companies

Add a research assistant to your product documentation. Visitors ask "how do I do X?" and your AI squad finds the answer, writes a summary, and provides code examples.

For Consultants

Embed a competitive analysis squad on your services page. Prospects describe their business, and the squad generates a mini competitor report as a lead magnet.

For Content Creators

Place a content research squad on your blog. Readers get AI-powered topic deep-dives without leaving your article.

For Developer Tools

Embed a coding assistant squad in your docs. Developers describe their problem, and the squad provides implementation guidance with code snippets.

How to Create a Shareable Squad

Step 1: Build Your Squad

Create a squad in Ivern with the agents you want to share:

Agent	Role	Model	Purpose
Research Agent	Researcher	Claude Sonnet	Gathers and synthesizes information
Writer Agent	Writer	Claude Sonnet	Formats responses clearly
Coder Agent	Coder	Claude Sonnet	Generates code snippets when needed

Step 2: Make It Public

In your squad settings, toggle "Make Public" to on. This generates a shareable link and enables the embed widget.

The shareable URL looks like: https://ivern.ai/s/YOUR_SQUAD_ID

Step 3: Get the Embed Code

Click "Embed" in your squad settings to get the widget code. It looks like this:

<iframe
  src="https://ivern.ai/s/YOUR_SQUAD_ID/embed"
  width="100%"
  height="600"
  frameborder="0"
  style="border-radius: 12px; border: 1px solid #e5e7eb;"
></iframe>

Step 4: Add It to Your Website

Paste the embed code into your website's HTML where you want the widget to appear. It works with:

• Next.js / React — Add the iframe to any component
• WordPress — Paste into a Custom HTML block
• Squarespace / Wix — Use the embed/code block
• Static HTML — Paste anywhere in your page

Customization Options

Adjusting the Size

<iframe
  src="https://ivern.ai/s/YOUR_SQUAD_ID/embed"
  width="100%"
  height="800"
  frameborder="0"
></iframe>

Set height based on your use case:

• Compact (400px): For sidebar or footer placement
• Standard (600px): For inline content sections
• Full (800px+): For dedicated assistant pages

Pre-Filled Prompts

Add query parameters to pre-fill the task input:

<iframe
  src="https://ivern.ai/s/YOUR_SQUAD_ID/embed?prompt=Analyze%20my%20competitors"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

This starts the visitor with a suggested task, reducing friction.

Referral Tracking

Add a referral code to track signups from your embedded widget:

<iframe
  src="https://ivern.ai/s/YOUR_SQUAD_ID/embed?ref=YOUR_CODE"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

When a visitor signs up from the widget, the referral is attributed to your account.

Real-World Use Cases

Use Case 1: Product Documentation Assistant

Squad: Researcher + Writer

Setup:

1. Create a squad trained on your product docs
2. Add system context: "You help users of [Product Name]. Answer questions based on the documentation."
3. Embed the widget on your docs page

Result: Visitors get instant answers to "how do I..." questions without searching through pages of docs.

Cost: ~$0.02-0.05 per visitor interaction (BYOK pricing).

Use Case 2: Lead Generation Research Tool

Squad: Researcher + Writer + Data Analyst

Setup:

1. Create a competitive analysis squad
2. Configure the prompt: "Analyze the competitive landscape for [visitor's industry]"
3. Embed on your services/contact page

Result: Visitors get a free mini competitor report. They see your AI capabilities firsthand. Capture email before generating the full report.

Use Case 3: Code Helper for Developer Docs

Squad: Coder + Reviewer

Setup:

1. Create a coding assistant squad with context about your API
2. Configure system prompt with your API documentation
3. Embed in your API reference pages

Result: Developers describe what they want to build, and the squad generates working code with your API.

How Much Does It Cost?

The widget is free. Visitors interact with your squad using your API keys (BYOK model). Costs depend on usage:

Visitor Action	Approximate Cost
Simple question	$0.01
Research task	$0.03-0.08
Code generation	$0.02-0.05
Full report	$0.05-0.15

You can set usage limits per visitor to control costs. The free Ivern tier supports up to 15 tasks per squad.

Tip: Use Claude Haiku or GPT-4o-mini as the model for embedded widgets to keep costs under $0.01 per interaction.

Privacy and Security

• Your API keys are never exposed to visitors. Ivern's backend makes the API calls.
• Visitor data is processed through your agents but not stored permanently.
• You control what the squad can and cannot do through agent system prompts.
• Rate limiting prevents abuse — set daily/weekly limits per visitor.

Getting Started

1. Sign up at ivern.ai/signup (free)
2. Create a squad with 2-3 agents
3. Toggle "Make Public" in squad settings
4. Click "Embed" to get your widget code
5. Paste it into your website

Your visitors can interact with your AI agents within 5 minutes of setup.

For more setup details, see the Getting Started guide. For squad role ideas, check out 10 AI Agent Workflows You Can Set Up Today.

Create Your Embeddable Squad →