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

Add webapp skills from template, sync script updates

- Rename skill folders from salesforce-webapp-* to *-webapp-* convention
- Update sync-template-skills.js: set SKILL.md front matter name to dest folder
- Remove sync-template-skills workflow and pin-template-deps script
- Add .synced-template-skills.json manifest, deploying-webapp-to-salesforce skill
- Replace salesforce-webapp-designing-webapp-ui-ux with designing-webapp-ui-ux

Made-with: Cursor

2026-03-18 15:06:58 -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