> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chatropic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Actions & UI payloads

> How action results and structured widgets appear in chat

Actions are configured in the dashboard, and the chat UI renders their results automatically: product cards, result lists, forms, and navigation cards all appear inline in the conversation without integration code. The two payloads worth knowing as an integrator are **navigation cards**, because you wire them to your router, and **sign-in cards**, because they involve your auth flow.

## Navigation cards

When the agent answers a "where do I..." question, it can attach a navigation card that deep-links into your product:

```json theme={null}
{
  "component": "NavigationCard",
  "props": {
    "label": "Billing",
    "path": "/account/billing",
    "requiresAuth": true
  }
}
```

* **Web embed:** the card click posts a message to your host page. Your embed snippet's listener handles it; see [Embed navigation](/developer-guides/integration/embed-navigation).
* **React Native:** the SDK calls your `onNavigate(path)` callback:

```tsx theme={null}
<ChatWidgetLauncher
  publishableKey="cpk_live_..."
  onNavigate={(path) => {
    if (path.startsWith("/orders")) {
      navigation.navigate("Orders");
    }
  }}
/>
```

Paths always come from your workspace's navigation route registry, never from user input. See [Navigation routes](/developer-guides/navigation-routes/navigation-routes) for how the registry is built.

## Sign-in cards (customer login)

When an action requires a **customer login** token and the user has not authenticated yet, the agent replies with a sign-in card instead of running the action. The card's message and link label come from the token's chat experience configuration in **Actions > Manage tokens**.

For the sign-in flow to bind tokens to the right person, the widget must be mounted with a consistent `endUserId` (and a signed `identityToken` in production). See [Authentication & identity](/developer-guides/quick-start/authentication#proving-identity-with-a-signed-token).

## Other widgets

Result lists, forms, and custom widgets configured under **Widgets** render automatically in the web embed. The React Native SDK currently renders `NavigationCard` natively and shows a JSON fallback for other custom widgets; see [React Native SDK limitations](/developer-guides/integration/react-native-sdk#current-limitations).

<CardGroup cols={2}>
  <Card title="Skills" icon="wand-magic-sparkles" href="/user-guides/agent-management/skills">
    How builders create the actions behind these payloads.
  </Card>

  <Card title="Response mapping" icon="arrow-right-arrow-left" href="/user-guides/actions/response-mapping">
    How API JSON becomes widget props.
  </Card>

  <Card title="Manage tokens" icon="key" href="/user-guides/actions/manage-tokens">
    Static and customer-login credentials for actions.
  </Card>

  <Card title="Embed navigation" icon="arrow-up-right-from-square" href="/developer-guides/integration/embed-navigation">
    Navigation card clicks on the host page.
  </Card>
</CardGroup>