mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-08-08 00:10:29 +08:00
474c26c00d
- Move .template-versions.json from skills/ to root - Shorten skill names to meet 64-char limit: - salesforce-webapp-feature-micro-frontend-generating-micro-frontend-lwc → salesforce-webapp-micro-frontend-lwc - salesforce-webapp-feature-react-agentforce-conversation-client-integrating-agentforce-conversation-client → salesforce-webapp-agentforce-conversation-client - salesforce-webapp-feature-react-file-upload-implementing-file-upload → salesforce-webapp-react-file-upload - Expand descriptions to meet 20-word minimum with trigger context
117 lines
2.1 KiB
Markdown
117 lines
2.1 KiB
Markdown
# Embed examples (flat-prop API)
|
|
|
|
All examples use `AgentforceConversationClient` with flat props.
|
|
|
|
> `agentId` is required in practice. Use this placeholder pattern in examples: `"<USER_AGENT_ID_18_CHAR_0Xx...>"`.
|
|
|
|
---
|
|
|
|
## Floating mode (default)
|
|
|
|
```tsx
|
|
<AgentforceConversationClient agentId="<USER_AGENT_ID_18_CHAR_0Xx...>" />
|
|
```
|
|
|
|
## Explicit floating
|
|
|
|
```tsx
|
|
<AgentforceConversationClient agentId="<USER_AGENT_ID_18_CHAR_0Xx...>" />
|
|
```
|
|
|
|
---
|
|
|
|
## Inline mode
|
|
|
|
### Fixed pixels
|
|
|
|
```tsx
|
|
<AgentforceConversationClient
|
|
agentId="<USER_AGENT_ID_18_CHAR_0Xx...>"
|
|
inline
|
|
width={420}
|
|
height={600}
|
|
/>
|
|
```
|
|
|
|
### CSS string size
|
|
|
|
```tsx
|
|
<AgentforceConversationClient
|
|
agentId="<USER_AGENT_ID_18_CHAR_0Xx...>"
|
|
inline
|
|
width="100%"
|
|
height="80vh"
|
|
/>
|
|
```
|
|
|
|
### Inline sidebar
|
|
|
|
```tsx
|
|
<div style={{ display: "flex", height: "100vh" }}>
|
|
<main style={{ flex: 1 }}>{/* App content */}</main>
|
|
<aside style={{ width: 400 }}>
|
|
<AgentforceConversationClient
|
|
agentId="<USER_AGENT_ID_18_CHAR_0Xx...>"
|
|
inline
|
|
width="100%"
|
|
height="100%"
|
|
/>
|
|
</aside>
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
## Theming
|
|
|
|
```tsx
|
|
<AgentforceConversationClient
|
|
agentId="<USER_AGENT_ID_18_CHAR_0Xx...>"
|
|
styleTokens={{
|
|
headerBlockBackground: "#0176d3",
|
|
headerBlockTextColor: "#ffffff",
|
|
messageBlockInboundColor: "#0176d3",
|
|
}}
|
|
/>
|
|
```
|
|
|
|
---
|
|
|
|
## Inline with header enabled
|
|
|
|
```tsx
|
|
<AgentforceConversationClient
|
|
agentId="<USER_AGENT_ID_18_CHAR_0Xx...>"
|
|
inline
|
|
width={420}
|
|
height={600}
|
|
headerEnabled
|
|
/>
|
|
```
|
|
|
|
`headerEnabled` defaults to `true` for floating mode, and you can use it in inline mode to add/remove the header.
|
|
|
|
---
|
|
|
|
## Full layout example
|
|
|
|
```tsx
|
|
import { Outlet } from "react-router";
|
|
import { AgentforceConversationClient } from "@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental";
|
|
|
|
export default function AppLayout() {
|
|
return (
|
|
<>
|
|
<Outlet />
|
|
<AgentforceConversationClient
|
|
agentId="<USER_AGENT_ID_18_CHAR_0Xx...>"
|
|
styleTokens={{
|
|
headerBlockBackground: "#0176d3",
|
|
headerBlockTextColor: "#ffffff",
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
```
|