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

# Velora Widget React embed prompt

> Prompt an AI agent to embed the Velora Widget into a React app, sync its light/dark theme with the host, and wire up partner attribution and events.

## Outcome

A React component that mounts the Velora Widget. Its light/dark theme follows the host app, `partnerConfig.partner` attributes swaps to the host, and lifecycle events feed the host's analytics.

<Note>
  The widget is a drop-in React component; there is no iframe build. You can switch between bundled **light** and **dark** themes (or follow system preference). See [Customize](https://velora.xyz/docs/widget/customize).
</Note>

## Prompt

<CodeGroup>
  ```text Claude Code theme={null}
  You are integrating the Velora Widget into an existing React 18+ app.

  Requirements:
  - Install `@velora-dex/widget` and `@tanstack/react-query` (peer dependency).
  - Mount the widget at the `/swap` route via React Router or Next.js routing.
  - Pass `config.partnerConfig.partner` (a `partner` identifier from env, e.g. `my-app-name`).
  - Theme: the widget only supports `theme: "light" | "dark"` (omit to follow the
    OS `prefers-color-scheme`). Drive the `theme` config field from the host app's
    current light/dark mode so the two stay in sync. Do NOT attempt to pass brand
    colors, fonts, or border-radius; there is no API for that.
  - Memoize any non-primitive `config` value (objects/arrays) with `useMemo` or a
    module-level constant, or the widget will re-render.
  - Subscribe to widget events via the `events` prop and pipe them into the host's
    analytics module. Use `onSwap` and branch on `event.name`:
    `Swap:request` (start), `Swap:confirmed` (success), `Swap:failed` (error).

  Reference these docs and follow them exactly:
  - https://velora.xyz/docs/widget/install
  - https://velora.xyz/docs/widget/configure
  - https://velora.xyz/docs/widget/customize
  - https://velora.xyz/docs/widget/events-and-callbacks
  - https://velora.xyz/docs/widget/monetize

  Load the `partner` identifier from env so different builds (staging, production,
  white-label) can use different values.
  ```

  ```text Cursor theme={null}
  [Same prompt body as Claude Code above.]
  ```

  ```text Codex theme={null}
  [Same prompt body as Claude Code above.]
  ```
</CodeGroup>

## End-state check

* Toggling the host app between light and dark flips the widget's `theme` to match.
* A successful test swap fires the host's analytics events (`Swap:confirmed`) with the expected payload.
* The `partner` identifier is present at runtime but not hardcoded in the source tree.