mirror of https://github.com/forcedotcom/afv-library.git synced 2026-08-08 00:10:29 +08:00

- 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

2026-03-17 17:44:09 -07:00

2.1 KiB

Raw Blame History

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)

<AgentforceConversationClient agentId="<USER_AGENT_ID_18_CHAR_0Xx...>" />

Explicit floating

<AgentforceConversationClient agentId="<USER_AGENT_ID_18_CHAR_0Xx...>" />

Inline mode

Fixed pixels

<AgentforceConversationClient
  agentId="<USER_AGENT_ID_18_CHAR_0Xx...>"
  inline
  width={420}
  height={600}
/>

CSS string size

<AgentforceConversationClient
  agentId="<USER_AGENT_ID_18_CHAR_0Xx...>"
  inline
  width="100%"
  height="80vh"
/>

Inline sidebar

<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

<AgentforceConversationClient
  agentId="<USER_AGENT_ID_18_CHAR_0Xx...>"
  styleTokens={{
    headerBlockBackground: "#0176d3",
    headerBlockTextColor: "#ffffff",
    messageBlockInboundColor: "#0176d3",
  }}
/>

Inline with header enabled

<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

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",
        }}
      />
    </>
  );
}

2.1 KiB Raw Blame History