Embed a Roleplay Agent in Salesforce

Embed a roleplay agent in Salesforce Lightning so your team can practice without leaving the CRM.

You can drop a single roleplay agent straight into a Salesforce Lightning page as a live practice panel. Team members open the record they're working on and practice a call, chat, or video session with the agent without leaving Salesforce or switching tabs.

Under the hood this is a plain, sandboxed <iframe> pointed at one agent. If you're looking to embed into a website, an SCM tool, an LMS/LXP, or a docs/wiki tool instead of Salesforce, see Embed a Roleplay Agent Anywhere.

This is different from Salesforce and Outdoo AI, which syncs meeting notes and call data into Salesforce records. That integration and this embed can be used together, but setting one up doesn't set up the other.

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. Workflow capture needs the Outdoo Workflow Training extension, which can't run inside an iframe.

Your workspace needs AI Roleplays in its plan.

In Salesforce, you'll need System Administrator access to Setup to create a Visualforce page, update Trusted URLs, and edit the Lightning page.

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."

Step 1: Get the embed code

Roleplay Agents list with the three-dot Actions menu for an agent

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.

The ••• menu with the Embed option highlighted.

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.

Embed agent modal showing size fields and the copyable iframe HTML snippet

The Embed Agent modal with the generated embed code.

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.

Step 2: Create a Visualforce page

In Salesforce Setup, go to Custom Code → Visualforce Pages and click New.

Salesforce Setup Visualforce Pages list showing the Outdoo_Roleplay_Embed page

The Visualforce Pages list in Setup.

Give it a label, then paste the embed code from Step 1 into the Markup field. Save.

Salesforce Visualforce page markup editor with the Outdoo AI embed iframe code pasted in

The embed code pasted into the Visualforce Markup field.

Open the page you just created and click Security. Add the profiles that should be able to access it, then Save.

Step 3: Allow camera and microphone through Salesforce's CSP

Salesforce blocks camera/microphone access and cross-origin frames by default, so two settings need to allow Outdoo AI through explicitly.

Go to Setup → Security → Trusted URLs and click New Trusted URL.

Set:

URL — your Outdoo AI domain (for example https://app.outdoo.ai)

CSP Context — Visualforce Pages

CSP Directives — connect-src and frame-src

Grant access to — Camera and Microphone (skip this if you're only embedding a chat-only agent)

Save.

Salesforce Setup Trusted URLs page with Visualforce Pages CSP context and camera/microphone permissions granted

Trusted URL configured with the Visualforce Pages CSP context and camera/microphone access.

Go to Setup → Security → Session Settings and enable the Permissions Policy HTTP header. Set camera and microphone access to Trusted URLs (or Always).

Save.

Salesforce Setup Session Settings page with Permissions-Policy header enabled and camera/microphone set to Trusted URLs Only

Session Settings with the Permissions-Policy header enabled.

Step 4: Add it to a Lightning page

Open the Lightning page in App Builder (the gear icon on the page, or Setup → Edit Page).

Salesforce record page Setup menu with Edit Page selected to open Lightning App Builder

Opening Edit Page from the record page's Setup menu.

Drag a Visualforce component onto the page.

Select the Visualforce page you created in Step 2.

Click Save, then Activate.

Salesforce Lightning App Builder with a Visualforce component added to a record page, rendering the embedded Outdoo AI roleplay agent

The Visualforce component added to the Lightning page, rendering the embedded agent.

Once activated, the agent panel appears right on the record page:

Embedded Outdoo AI Roleplay tab inside a Salesforce record page showing the agent persona, company details, and Start Call button

The finished embed on a live Salesforce record.

Signing in inside the embed

The first time a team member opens the panel, they'll see a sign-in screen instead of the agent:

Sign In with Outdoo AI signs them in without leaving the Salesforce tab.

Open Sign In in a New Tab is a fallback for identity providers that block login pages from loading inside an iframe. After signing in there, the team member can return to the Salesforce tab.

Once signed in, the team member sees only that one agent — no navigation to the rest of Outdoo AI. They can start a call, chat, or video session depending on how the agent's channel is configured, and after the session ends they stay on the same panel to start another round or sign out. A banner after the session says "Session complete. Start another Practice Call below, or sign out to switch accounts." and has a Dismiss button.

Troubleshooting

Banner says camera/microphone access is blocked. Session Settings' Permissions Policy header isn't enabled yet, or the Trusted URL isn't granted camera/microphone access. Reload the Lightning page after saving both settings — changes don't always apply to an already-open tab. Team members can click Open in a New Tab to open the same agent outside the iframe while this is being fixed.

Sign-in screen loops or goes blank. The identity provider is refusing to render its login page inside a frame. Use 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.

Wrong account in the panel. Click Sign Out (or Sign Out and Try Again on an error screen) and sign in again.

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

Embed a Roleplay Agent Anywhere

Salesforce and Outdoo AI

Create a Roleplay Agent Using Templates

Roleplay Call Types