skills.rest
forcedotcom
forcedotcomOFFICIAL
Explore all skills by this author →
Website𝕏@salesforcedevsGitHub

embedded-agent

Integrate Salesforce Agentforce chat into React applications with configurable rendering.

803|289|Updated Nov 7, 2025
Search Tags:#frontend#integration#react#widget#chat#agentforce#embed
One-click install
npx skills add https://github.com/forcedotcom/afv-library --skill embedded-agent
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: embedded-agent
Source: https://github.com/forcedotcom/afv-library/tree/main/samples/webapp-template-app-react-sample-b2x-experimental/.a4drules/skills/feature-react-agentforce-conversation-client-embedded-agent
Command: npx skills add https://github.com/forcedotcom/afv-library --skill embedded-agent

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Embeds the Agentforce Conversation Client into a React web application to provide a ready-to-use chat UI for employee agents or Salesforce agent conversations within a web app.

Core Features & Use Cases

  • React wrapper: Use the AgentforceConversationClient to auto-handle authentication and rendering across environments.
  • Flexible rendering: Choose between a floating chat widget or an inline UI, with configuration through agentforceClientConfig.
  • Agent scoping & theming: Load a specific agent via agentId or default to the org's agent, and tailor appearance with styleTokens.
  • Seamless integration: Drop the component into your AppLayout and keep the shell intact while the chat loads in context.

Quick Start

Install the package and render the AgentforceConversationClient in your app layout, then pass an agentforceClientConfig with renderingConfig and optional agentId to configure the chat.

Frequently Asked Questions about embedded-agent

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed an Agentforce chat widget in a React app?▼

To embed an Agentforce chat in React, install the required npm package and use the AgentforceConversationClient wrapper. Pass an agentforceClientConfig with renderingConfig and agentId to load the chat UI directly into your app layout.

Can I render an Agentforce chat inline instead of as a floating widget?▼

Yes, Agentforce chat rendering supports both floating widget and inline UI modes. You select the rendering behavior by configuring the renderingConfig property within the agentforceClientConfig passed to the AgentforceConversationClient wrapper.

How do I scope a React chat widget to a specific Salesforce agent?▼

You scope the chat to a specific Salesforce agent by providing the agentId parameter in the agentforceClientConfig. If agentId is omitted, the chat defaults to the org's configured agent.

How can I customize the appearance of an embedded Agentforce chat in React?▼

You customize the Agentforce chat appearance using styleTokens within the agentforceClientConfig. This allows you to tailor the visual styling and behavior of the chat widget to match your web application's design.

Do I need any dependencies to add Salesforce Agentforce chat to a web application?▼

Yes, you must install a specific npm package to use the AgentforceConversationClient wrapper. The wrapper handles authentication and rendering across environments, requiring configuration through agentforceClientConfig to function properly.

What is the best way to integrate Salesforce agent conversations into an existing React layout?▼

The best way is to drop the AgentforceConversationClient component directly into your AppLayout. This keeps the application shell intact while the chat loads in context, handling authentication and rendering seamlessly across environments.

Related Skills

Explore More Software Engineering Skills→
hunmerhunmer
70

convert-react-to-memento

Converts a React project into a Memento WebView-ready application.

Community
Intermediate
angryracoonangryracoon

experience-ui-bundle-agentforce-client-generate

Embed and configure the Agentforce Conversation Client in Salesforce UI Bundle React apps.

Community
Advanced
forcedotcomforcedotcom
803

salesforce-web-app-feature

Integrate official Salesforce web app feature packages into React apps using a copy-then-adjust workflow.

Official
Intermediate
dmckeeSFdmckeeSF

implementing-ui-bundle-agentforce-conversation-client

Integrate and customize the Agentforce Conversation Client in React applications.

Community
Intermediate