Experience Cloud + React + Slack Full Agentforce Deployment Guide | Salesforce

 

Most Agentforce demos stop at the builder preview pane. Your customers won't be there. Here's how to ship your agent to all three real surfaces.

Posted on SalesforceBolt.com  |  Agentforce  |  Deployment

▶ Watch on YouTube — Full Build and Demo

Experience Cloud + React + Slack — Full Agentforce Deployment | SF Bolt

⚡ SalesforceBolt — Source Code

batra-kapil / GitHub

Full source for all Agentforce deployment configurations

You've built your Agentforce agent. It works in the builder preview. Now what? Your customers aren't going to be in that preview pane — they'll be on your website, your React app, or in Slack. This guide covers all three deployment surfaces step by step, using a Customer Support agent for Experience Cloud and React, and an Employee agent for Slack.

What We're Deploying

Two agents, three surfaces:

🌐 Experience Cloud — Customer Support Agent (Service Agent)

⚛️ React Web App — Customer Support Agent (Service Agent)

💬 Slack — Agentic Wave Internal Support Agent (Employee Agent)

💡 One important distinctionOnly Employee Agent type is supported on Slack — not Service Agent. If your Slack deployment isn't working, this is the first thing to check.

Part 1: Deploy to Experience Cloud

Step 1 — Enable Omni-Channel

Go to Setup and search for Omni-Channel Settings. Enable the checkbox. This is a prerequisite for everything that follows — the messaging channel, routing, and the embedded component all depend on it being on.

Step 2 — Create a Routing Configuration

Go to Setup → Routing Configurations and create a new one. Set a name (e.g. Customer Routing Configuration), choose Priority as routing model, and set unit of capacity. This configuration will be attached to your queue in the next step.

Step 3 — Create a Queue

Create a standard Salesforce queue. In the Supported Objects section, add Messaging Sessions — this is critical for agent chat to work. Add your user to the queue members. Then edit the queue and attach the routing configuration you just created.

⚠️ Order matters: Routing Configuration must exist before the QueueYou cannot attach a routing configuration to a queue that already exists without one. Create the routing configuration first, then create the queue with it attached.

Step 4 — Create an Omni-Channel Flow

Create a new Flow and select Omni-Channel Flow as the type. Inside the flow, add a new element: Route to Work. Configure it as follows:

• Record ID — create a new resource with API name recordId, data type Text, available for input
• Service Channel — select Messaging for In-App and Web
• Route To — select Agent (for Service Agent deployments)
• Agent — select your Customer Support Agent
• Fallback Queue — select the queue you created in Step 3

Save and activate the flow.

Step 5 — Create a Messaging Channel

Go to Setup → Messaging Settings and create a new channel. Select Enhanced Chat as the channel type. Set the deployment type to Web and paste your My Domain URL in the domain field. For routing type, select Agent and choose your Customer Support Agent. Add your fallback queue and save.

Setup — My Domain URL

# Find your My Domain URL:
# Setup → search "My Domain" → copy the domain URL
# It will look like: yourcompany.my.salesforce.com

Once saved, the messaging channel should show as active in Messaging Settings.

Step 6 — Switch Embedded Service Deployment to V2

When a messaging channel is created, Salesforce automatically creates a corresponding Embedded Service Deployment. Go to Setup → Embedded Service Deployments, find the deployment for your new channel, open it, and click Switch to V2. Publish it.

⚠️ Always switch to V2 before publishingV1 gives you basic text chat. V2 gives you the enhanced chat experience. If you publish without switching, you'll need to unpublish, switch, and republish.

Step 7 — Add the Agent to Your Experience Cloud Site

Open your Experience Cloud site in Experience Builder. In the Components panel, search for Embedded Messaging and drag it onto the page. Select your messaging channel from the dropdown. Click Publish.

Open the site URL in a browser — the agent icon should appear in the corner. Click it to start a conversation.

Part 2: Deploy to a React Web App

The good news: if you've already set up the Experience Cloud deployment, most of the infrastructure is already in place. You're reusing the same messaging channel and embedded service deployment. The only new steps are getting the code snippet and trusting your React app's URL.

Step 1 — Get the Code Snippet

Go to Setup → Embedded Service Deployments → open your deployment → click Code Snippet. Copy the generated script tag. This needs to be added just before the closing </body> tag in your React app's HTML.

index.html — add before </body>

<!-- Paste the Embedded Service code snippet here -->
<!-- Also add the viewport meta tag if not already present -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Step 2 — Add Trusted URLs

Salesforce needs to trust the URL your React app is running on. Add it in two places:

1. Setup → Trusted URLs — add your React app's URL here
2. Your Embedded Service Deployment → Allowed Origins — add the same URL

Step 3 — Trust Your URL in the ESW Site

Go to Setup → Sites → All Sites. Find the site with the ESW prefix — Salesforce creates this automatically when you set up the embedded deployment. Open it and in Trusted Domains for Inline Frames, add your React app's URL.

Step 4 — Open Your React App

With all three URL trust configurations in place, open your React app in the browser. The agent chat widget will appear, using the exact same agent and conversation experience as the Experience Cloud site. The app is responsive — it works on mobile devices with no additional configuration needed.

💡 Mobile works automaticallyBecause the embedded chat is injected via script tag and the viewport meta tag is in place, the same agent works on mobile browsers without any additional steps. No separate mobile deployment required.

Part 3: Deploy to Slack

The Slack deployment uses a different agent type — an Employee Agent, not a Service Agent. The steps involve connecting your Salesforce org to your Slack workspace, then adding the agent as a Slack app.

Step 1 — Connect Slack Workspace to Salesforce

1. In your Slack workspace, click your workspace name → Tools and Settings → Admin Tools
2. Click Manage Salesforce Organization
3. Click Connect Salesforce Org
4. Paste your My Domain URL and click Request Connection

Step 2 — Approve the Connection in Salesforce

1. In Salesforce Setup, go to Slack → Manage Slack Connections
2. Find the incoming connection request and click Agree and Approve
3. Go back to the Slack Admin Tools page and refresh — the connection should show as approved
4. Click View Details → Activate

Step 3 — Add Your User

In the Slack connection settings, add your Salesforce user. Make sure the user's email address in Salesforce matches the email used to create the Slack workspace — this is how the accounts are linked.

Step 4 — Sign Into Salesforce from Slack

In the Slack app, go to Preferences → Salesforce. Click Sign In and complete the OAuth flow. Once connected, your Slack profile will show a Sign Out option, confirming the accounts are linked.

Step 5 — Add the Agent Connection in Agentforce Builder

1. Open your Employee Agent in Agentforce Builder
2. Deactivate it if currently active
3. Create a new version
4. Go to Connections and click the + icon
5. Select Slack and click Add Agent
6. Save, commit the version, and activate the agent

Step 6 — Install the Agent in Slack

Back in Slack Admin Tools, go to Manage Agentforce. The agent should show as Ready to Install. Click Review → Allow. The agent is now installed as a Slack app in your workspace.

In Slack, you'll see a notification that the agent has been approved. You can now open a direct message with the agent and have a full Agentforce conversation directly inside Slack.

Gotchas Across All Three Deployments

⚠️ Slack only supports Employee Agent type as of todayService Agents cannot be added to Slack channels. Only Employee Agents are supported for Slack deployment. Build a separate agent for internal/Slack use cases.

⚠️ V2 must be set before publishing the Embedded DeploymentIf you publish without switching to V2, the chat experience will be basic text only. Switch first, then publish.

⚠️ Three URL trust locations for ReactYour React app URL must be added in all three places: Trusted URLs in Setup, Allowed Origins in the Embedded Service Deployment, and Trusted Domains for Inline Frames in the ESW Site. Missing any one of them will block the chat widget from loading.

⚠️ Routing Configuration must be created before the QueueYou need to have a routing configuration ready before assigning it to a queue. Create it first, then create the queue with it attached.

⚠️ Messaging Sessions must be in Queue's Supported ObjectsWithout adding Messaging Sessions to the queue's supported objects, agent routing will fail silently. Don't skip this step when creating your queue.

Key Takeaways

🚀 Agentforce Deployment — Quick Reference

• Experience Cloud: Omni-Channel → Routing Config → Queue → Omni-Channel Flow → Messaging Channel → Switch ESW to V2 → Add Embedded Messaging component → Publish
• React Web App: Same infrastructure as Experience Cloud + Code Snippet before </body> + Trust your URL in three places (Trusted URLs, Allowed Origins, ESW Site Trusted Domains)
• Slack: Connect workspace to Salesforce org → Approve in Setup → Add user → Sign in from Slack → Add Slack connection in Agent Builder → Install via Manage Agentforce
• Slack only supports Employee Agent — not Service Agent
• Mobile works automatically for React deployment — no extra steps
• Always switch Embedded Service Deployment to V2 before publishing
• Slack user email must match Salesforce user email for account linking to work

Shipping an Agentforce agent to production means picking the right surface for the right audience. External customers on your website or React app get the Service Agent through the embedded chat widget. Internal employees get the Employee Agent through Slack. Both routes are production-ready and the setup, once done, takes about an hour end to end.

Watch Complete Video Below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.

Share this blog with your friends if you find it helpful!