How to Add an AI Support Agent to Your Website (It’s Easier Than You Think)

February 17, 2026

If you’ve been thinking about adding AI support to your website but assumed it would require a developer or some complicated integration, I have good news: embedding a Recursive support agent is about as simple as embedding a YouTube video. You copy a snippet of HTML, paste it where you want the agent to appear, and you’re done. The hardest part is deciding where on your page to put it.

I’m going to walk you through the whole process, including the one prerequisite step (getting your domain allowlisted), what the basic embed looks like, and a few common ways to size and position the agent depending on your site’s layout. By the end of this, you’ll have a working AI support agent on your site, and you won’t need to touch any backend code or mess with JavaScript.

What You’re Actually Embedding

The Recursive agent runs as a standalone web page that you embed in an <iframe> — essentially a window into another webpage, sitting inside yours. The agent handles everything internally: the chat interface, the AI responses, the conversation history. Your job is just to give it space on your page.

The agent adapts to whatever dimensions you give it. If you make the iframe 400 pixels wide, the agent compresses its layout to fit. If you give it 800 pixels, it spreads out. The conversation scrolls vertically inside the frame when it gets long, so users never lose access to earlier messages — they just scroll up.

Here’s what it looks like in practice (this is a real embed, not a screenshot):

<iframe
  src="https://acme.recursive.support/"
  title="Support Agent"
  style="width: 100%; height: 600px; border: none; border-radius: 12px;"
  allow="clipboard-write"
></iframe>

That’s the complete code. Replace acme.recursive.support with your agent’s actual URL, and you have a working support agent.

Step 1: Get Your Domain Allowlisted (The One Prerequisite)

Before the embed will work, you need to email us at hello@recursive.support with the exact domain(s) where you’re planning to put the agent. For example:

https://example.com
https://www.example.com

Include both the www and non-www versions if your site uses both — they’re treated as separate origins by browsers. If you’re embedding on a subdomain (like support.example.com), include that too.

We’ll add your domains to the agent’s configuration and deploy the update. This usually takes a few minutes. Once it’s done, the embed will work.

Why this step exists: Your agent sends a security header (Content-Security-Policy: frame-ancestors) that tells browsers which sites are allowed to embed it. Without your domain in that list, browsers refuse to load the iframe — they’ll show a blank frame or a “refused to connect” error. This is a security feature, not a bug. It prevents someone from embedding your agent on their site and impersonating your support.

If you try to embed before we’ve allowlisted your domain, it won’t work. Email us first, wait for confirmation, then proceed.

Step 2: Add the Embed Code

Once your domain is allowlisted, copy this snippet and paste it into your page’s HTML wherever you want the agent to appear:

<iframe
  src="https://acme.recursive.support/"
  title="Support Agent"
  style="width: 100%; height: 600px; border: none; border-radius: 12px;"
  allow="clipboard-write"
></iframe>

Replace acme.recursive.support with your actual agent URL (it will be yourcompanyname.recursive.support).

That’s it. Save the page, load it in a browser, and you should see the agent.

What the Attributes Do

src: The URL of your agent. This is the only part you need to customize.
title: Accessibility label for screen readers. Leave this as-is.
style: Controls the size and appearance. width: 100% makes it fill its container horizontally, height: 600px gives it a fixed height, border: none removes the default iframe border, and border-radius: 12px rounds the corners slightly.
allow="clipboard-write": Lets users copy text from the agent’s responses. Without this, the copy button won’t work. (Browsers block clipboard access by default in iframes for security reasons; this attribute explicitly permits it.)

Sizing and Positioning

The agent fills whatever space the iframe gives it. You control the size entirely from your side by changing the iframe’s width and height in the style attribute. Here are a few common patterns.

Fixed Height (Simplest Approach)

If you just want to drop the agent into your page and not think about it, use a fixed height:

<iframe
  src="https://acme.recursive.support/"
  title="Support Agent"
  style="width: 100%; height: 600px; border: none;"
  allow="clipboard-write"
></iframe>

600 pixels is a good starting point — tall enough for a meaningful conversation without dominating the page. The chat scrolls vertically inside the frame when the conversation gets longer, so users won’t lose access to earlier messages.

Sidebar or Panel

If you want the agent to sit in a fixed sidebar on the right side of the screen, wrap the iframe in a positioned container:

<div style="width: 400px; height: 100vh; position: fixed; right: 0; top: 0; box-shadow: -2px 0 8px rgba(0,0,0,0.1);">
  <iframe
    src="https://acme.recursive.support/"
    title="Support Agent"
    style="width: 100%; height: 100%; border: none;"
    allow="clipboard-write"
  ></iframe>
</div>

100vh means “100% of the viewport height” — the sidebar will stretch from the top of the browser window to the bottom, regardless of how tall the page content is.

Centered Container with Maximum Width

If you want the agent centered on the page with a maximum width (common for dedicated support pages):

<div style="width: 100%; max-width: 700px; height: 80vh; margin: 0 auto;">
  <iframe
    src="https://acme.recursive.support/"
    title="Support Agent"
    style="width: 100%; height: 100%; border: none; border-radius: 12px;"
    allow="clipboard-write"
  ></iframe>
</div>

80vh means “80% of the viewport height” — it scales with the browser window size. margin: 0 auto centers the container horizontally.

Responsive Height with CSS

If you want more control over how the height adapts to different screen sizes, you can define a CSS class:

<style>
  .agent-embed {
    width: 100%;
    height: 70vh;
    min-height: 400px;
    max-height: 800px;
    border: none;
    border-radius: 12px;
  }
</style>

<iframe
  class="agent-embed"
  src="https://acme.recursive.support/"
  title="Support Agent"
  allow="clipboard-write"
></iframe>

This sets the height to 70% of the viewport, but never smaller than 400px or larger than 800px. It adapts gracefully to different devices without getting too cramped on phones or absurdly tall on large monitors.

Minimum Dimensions

The agent is responsive down to about 300 pixels wide, but it starts to feel cramped below 400px. Recommended minimums:

Width: 300px absolute minimum, 400px+ recommended
Height: 400px minimum, 600px+ recommended

On narrow screens (under 600px wide), the agent automatically compacts its layout — the header shrinks, chat bubbles get wider, padding reduces — to use the available space efficiently. It works on mobile, but it’s more comfortable with a bit more room.

Styling the Container

You can’t style what’s inside the iframe from your CSS (the iframe is a security boundary — your page’s CSS doesn’t reach into it), but you can style the container around it. If you want a border, shadow, or background, wrap the iframe in a <div>:

<div style="
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  max-width: 700px;
  height: 600px;
  margin: 2rem auto;
">
  <iframe
    src="https://acme.recursive.support/"
    title="Support Agent"
    style="width: 100%; height: 100%; border: none;"
    allow="clipboard-write"
  ></iframe>
</div>

Tip: Apply border-radius to the wrapping div, not the iframe. Use overflow: hidden on the wrapper to clip the iframe’s corners cleanly. This produces more consistent results across browsers.

Common Layouts

Two-Column Layout (Agent Alongside Content)

If you want the agent in a sidebar next to your main content:

<div style="display: flex; gap: 2rem; max-width: 1200px; margin: 0 auto;">
  <div style="flex: 1;">
    <h2>Frequently Asked Questions</h2>
    <p>Check out our FAQ below, or ask the AI agent on the right...</p>
  </div>
  <div style="width: 400px; flex-shrink: 0;">
    <iframe
      src="https://acme.recursive.support/"
      title="Support Agent"
      style="width: 100%; height: 600px; border: none; border-radius: 12px;"
      allow="clipboard-write"
    ></iframe>
  </div>
</div>

The flex: 1 on the left div makes it take up remaining space. The width: 400px; flex-shrink: 0 on the right div keeps the agent at a fixed width.

Pop-Up / Modal

If you want the agent to appear in a modal when users click a button:

<style>
  .agent-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
  }
  .agent-modal-backdrop.open { display: flex; }
  .agent-modal {
    width: 90%;
    max-width: 500px;
    height: 70vh;
    border-radius: 16px;
    overflow: hidden;
    background: white;
  }
  .agent-modal iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
</style>

<button onclick="document.getElementById('agent-modal').classList.add('open')">
  Need help? Chat with us
</button>

<div id="agent-modal" class="agent-modal-backdrop"
     onclick="if(event.target===this) this.classList.remove('open')">
  <div class="agent-modal">
    <iframe
      src="https://acme.recursive.support/"
      title="Support Agent"
      allow="clipboard-write"
    ></iframe>
  </div>
</div>

Clicking the button adds the open class to the backdrop, which makes it visible. Clicking outside the modal (on the backdrop itself) closes it.

Troubleshooting

Here are the most common issues and how to fix them:

Problem: The iframe is blank or shows “refused to connect”
Cause: Your domain isn’t in the allowlist yet.
Fix: Email hello@recursive.support with your exact domain(s), including https:// and whether you use www or not. Wait for confirmation before testing again.

Problem: The agent looks tiny or cramped
Cause: The iframe is too small.
Fix: Increase the width and height in the iframe’s style attribute. Try at least 400px wide and 600px tall.

Problem: There’s a horizontal scrollbar inside the iframe
Cause: This is unlikely — the agent prevents horizontal scrolling on its end — but if you see one, check your container CSS.
Fix: Make sure the iframe’s parent has overflow: hidden or overflow: auto, and that the iframe itself has width: 100%.

Problem: Clicking inside the agent doesn’t focus the input field
Cause: This is normal browser behavior for iframes — they require an explicit click to receive focus.
Fix: Not really a problem. Users click once inside the frame, and then everything works normally. (This is a security feature browsers enforce; there’s no way to override it.)

Problem: Browser shows a “mixed content” warning
Cause: Your page is served over HTTP, but the agent is HTTPS. Browsers block this.
Fix: Serve your page over HTTPS. (If you’re on a platform like WordPress or Shopify, this is usually a one-click setting in your admin panel.)

WordPress-Specific Instructions

If you’re using WordPress, you can embed the agent in a few different ways:

In a page or post: Switch to the “Custom HTML” block, paste the iframe code, and publish.
In a sidebar widget: Go to Appearance → Widgets, add a “Custom HTML” widget to your sidebar, paste the iframe code.
Site-wide in the footer: Go to Appearance → Customize → Additional CSS, and add a fixed position container (like the sidebar example above). Then use a Custom HTML widget in your footer to hold the iframe.

Most page builders (Elementor, Divi, etc.) have an “HTML” or “Code” element where you can paste the iframe directly.

Security Notes

A few things worth knowing about how the embed works:

The agent only loads on domains you’ve explicitly approved. If you move to a new domain or add a subdomain, let us know so we can update the allowlist.
The iframe is sandboxed by the browser — the agent can’t access your page’s cookies, localStorage, or JavaScript, and your page can’t access the agent’s internals. This is standard browser security for cross-origin iframes. It means the embed is safe even if your site and the agent are on completely different infrastructure.
The allow="clipboard-write" attribute is optional but recommended. It lets users copy text from the agent’s responses. Without it, the copy button won’t work.

That’s It

You now have an AI support agent on your website. The whole process is: email us your domain, wait for confirmation, paste the iframe code, adjust the size to fit your layout. If you run into issues or want help picking the right layout for your site, email hello@recursive.support and we’ll walk you through it.

If you don’t have a Recursive agent yet and want to see what it’s like, visit recursive.support to get started. We take care of the setup, so you don't have to know anything about AI, and you can have a working agent answering questions from your documentation by the end of the week--possibly even by the end of the day.