implementing-ui-bundle-agentforce-conversation-client

Install and configure the AgentforceConversationClient wrapper to embed Salesforce chat widgets.

Updated Apr 19, 2026
One-click install
npx skills add https://github.com/cchrisv/professorFlowVisualPicker --skill implementing-ui-bundle-agentforce-conversation-client
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: implementing-ui-bundle-agentforce-conversation-client
Source: https://github.com/cchrisv/professorFlowVisualPicker/tree/main/.agents/skills/implementing-ui-bundle-agentforce-conversation-client
Command: npx skills add https://github.com/cchrisv/professorFlowVisualPicker --skill implementing-ui-bundle-agentforce-conversation-client

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Embeds and governs the use of the official AgentforceConversationClient wrapper to integrate Salesforce chat capabilities without building a custom widget, ensuring safe, compliant usage across apps.

Core Features & Use Cases

  • Ensures you import the canonical AgentforceConversationClient package and render it in existing app components.
  • Guides you through validating agent IDs (18-character IDs starting with 0Xx) and providing a real agentId for new deployments.
  • Enforces theming and sizing through the styleTokens prop, while always avoiding CSS-based styling or inline style attributes.
  • Use cases include embedding the chat on Flow screens or pages, updating agent-related props (inline vs floating, width, height, header, and labeling) without rewriting implementation.

Quick Start

Import the canonical AgentforceConversationClient and render it with a valid 18-character agentId in your app.

Frequently Asked Questions about implementing-ui-bundle-agentforce-conversation-client

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

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

You embed a Salesforce Agentforce chat widget by importing the canonical AgentforceConversationClient wrapper and rendering it inside your existing app components with a valid agentId prop.

What is the correct format for an Agentforce agentId?▼

An Agentforce agentId is a real 18-character ID starting with 0Xx. Providing a valid agentId is required to successfully render and connect the Salesforce chat widget.

Can I style the Agentforce conversation client using CSS or inline styles?▼

No, you cannot use CSS or inline styles for the Agentforce conversation client. You must apply theming and sizing configurations exclusively through the styleTokens prop.

How do I update an existing Agentforce chat widget configuration?▼

You update an existing Agentforce chat widget by modifying agent-related props such as inline vs floating, width, height, and labeling in-place on the rendered component, avoiding edits to the underlying implementation.

Does the Agentforce conversation client require building custom components?▼

No, the Agentforce conversation client does not require building custom components. You use the official AgentforceConversationClient wrapper to embed Salesforce chat capabilities directly into existing apps.