Embed a Roleplay Agent Anywhere

You can drop a single roleplay agent into any page as a self-contained practice panel — a team member opens it and can start a call, chat, or video session with that agent without ever visiting Outdoo AI directly. It's a plain, sandboxed <iframe> against one agent, so it works anywhere you can paste custom HTML: your own website, a Sales Content Management (SCM) tool, an LMS or LXP course, or an internal docs/wiki page.

If you want to embed an AI Trainer instead of a roleplay agent, see Embed an AI Trainer.

If you're embedding into Salesforce Lightning specifically, use Embed a Roleplay Agent in Salesforce instead — it has the exact Trusted URL and Session Settings steps. This article covers everything else.

Before you start

• You need a permission profile with Manage agents and Embed agents turned on to generate an embed code.

• The agent must be published and Active — drafts and agents still being created can't be embedded.

• The agent can't have a workflow/screen-capture step attached — that needs the Outdoo Workflow Training extension, which can't run inside an iframe.

• Your workspace needs AI Roleplays in its plan.

You only see Embed in an agent's menu if your profile has both Manage agents and Embed agents. If the agent isn't ready, the option is greyed out and a tooltip tells you why: "Publish this agent to embed it.", "This agent isn't active yet. Embed it once it's active." or "Agents with a workflow can't be embedded."

Get the embed code

Open an agent's ••• menu in the Actions column to find Embed.

• Go to Practice > Roleplay Agents.

• Find the agent, open its ••• menu, and select Embed.

• Optionally set a Width and Height under Size (Optional). Leave them blank to use 100% width and height. Examples: 100%, 800 or 800px.

• Click Copy Embed Code. The button changes to Copied for a moment, and a message confirms that the embed code was copied.

The copied snippet looks like this:

<iframe src="https://app.outdoo.ai/embed/roleplay/agent/<botId>"
  allow="camera *; microphone *; display-capture *; autoplay *; fullscreen *"
  width="100%"
  height="100%"
  style="min-width: 375px; min-height: 650px; border: 0">
</iframe>

Keep the allow attribute exactly as generated — call and video agents need camera and microphone access, and the browser blocks the session without it. Chat-only agents don't need it.

What the host platform needs to support

Whatever you're pasting this into, check for three things:

• A custom HTML or iframe block. Most Web, SCM, LMS, and LXP platforms have one — it may be called "custom HTML," "web content," "embed," or "iframe widget" depending on the tool.

• Frame/CSP allowlisting. If the platform restricts what it will load in a frame (a frame-src or frame-ancestors policy — Salesforce calls this "Trusted URLs"), add your Outdoo AI domain to it.

• Camera/microphone permission delegation, for call and video agents. The iframe already requests allow="camera *; microphone *; ...", but some platforms strip or override permissions on embedded HTML. If a call or video agent won't request camera/mic access once embedded, this is the first thing to check with the platform.

The first time a team member opens the embedded panel, they'll see a sign-in screen. Sign In with Outdoo AI keeps them in the panel; if the host page blocks login screens from loading inside a frame, they can click Open Sign In in a New Tab instead and return to the embedded tab afterward.

Where to embed it

Web

Add the iframe to your own site or portal — a product tour page, a self-serve trial flow, or an in-app help widget. This is the simplest case: paste the snippet into any page that accepts raw HTML.

Sales Content Management (SCM)

Platforms like Highspot, Seismic, Showpad, Bigtincan, and Mediafly let you add a custom HTML spot or tile alongside your playbooks and battlecards. Embedding an agent here puts practice next to the content team members are already reading, rather than in a separate tool.

LMS / LXP

Platforms like Docebo, Cornerstone, 360Learning, Adobe Learning, and Absorb typically support a "web content" or custom HTML block inside a course or learning path. Embedding an agent turns a course step into hands-on practice instead of a passive video or reading assignment.

Interactive docs and wikis

Tools like Notion, Confluence, GitBook, and Guru support embed blocks that take a URL or raw HTML. This works well for pairing a "try it" practice panel directly next to a playbook, SOP, or onboarding doc.

Exact steps vary by platform — check that tool's documentation for how it names its custom HTML/embed block and its frame/CSP allowlist, then apply the same iframe snippet from Get the embed code above.

Troubleshooting

Camera/microphone access is blocked once embedded. The host platform is stripping or restricting iframe permissions. Look for a setting that controls frame permissions or a CSP/allow-list for the embedded domain — this is the same idea as Salesforce's Trusted URLs, under whatever name the platform uses.

Sign-in screen loops or goes blank. The host page is refusing to load a login screen inside a frame. Have the team member click Open Sign In in a New Tab instead.

"Agent Cannot Be Embedded" inside the panel. The agent has a workflow/screen-capture step attached, which needs the browser extension and can't run inside the embed.

"Agent Not Published" or "Agent Unavailable" inside the panel. The agent is still a draft, is still being set up, or isn't active yet. Ask a workspace admin to publish or activate it.

"Access denied" inside the panel. The signed-in team member hasn't been shared on this agent, or isn't a member of the workspace it belongs to.

Hope this article was helpful. For any queries, please write to support@outdoo.ai

Related articles

• Embed a Roleplay Agent in Salesforce

• Create a Roleplay Agent Using Templates

• Roleplay Call Types