> For the complete documentation index, see [llms.txt](https://docs.nerovasystems.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nerovasystems.com/ui-components/ui-components.md).

# UI Components

Nerova is headless by default: partners own all business-facing UI, and the host backend calls Nerova. The [host UI integration law](https://docs.nerovasystems.com/documentation/guides/host-ui-integration) defines the one standing exception: the hosted connection page for provider authorization moments that cannot run on a partner origin.

The UI component family builds on that exception. It packages the flows and read surfaces that every partner would otherwise rebuild (provider connection, channel health, business verification progress) as embeddable pieces that render inside the partner's product and inherit the partner's branding.

Two component shapes exist, matching the two embedding mechanics the platform supports:

* **Popup-launching components** wrap a user gesture and open a Nerova-hosted page in a popup window. The partner page never navigates. This is the shape for flows that must run on a Nerova or provider origin, such as Meta's WhatsApp Embedded Signup. See [WhatsApp connect](https://docs.nerovasystems.com/ui-components/whatsapp-connect).
* **Widget components** render Nerova-served read and status surfaces inline in the partner page through a dedicated widget route that permits framing for allow-listed partner origins. See [Embedded status widgets](https://docs.nerovasystems.com/ui-components/embedded-widgets).

The hosted connection page a popup-launching component opens, as the merchant sees it:

![The hosted connection page showing the Connect WhatsApp with Meta card](https://2396471767-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqI0ECBevw0VmfTzoMA2N%2Fuploads%2FfnrNx6mtdutDOSU7pOkg%2Fhosted-connect-ready.png?alt=media)

Every component is designed around the same commitments:

* **Partner branding.** Components take theme tokens from the embed configuration so the rendered surface matches the host product. The only deliberate exception is provider-owned UI: Meta's own dialog is always Meta-branded, on Meta's domain, by design.
* **No secrets in the browser.** Provider credentials such as the merchant's Meta access token are exchanged server-side at Nerova. Neither the partner page nor the component ever sees them.
* **Demo mode.** Each component can run against mock data so partners can build and preview their integration without a live tenant or a real provider account.

The pages in this section describe the architecture each component follows. Per-component reference (installation, configuration options, and events) is published with each component when it ships.

## Concepts

* [Embedding security model](https://docs.nerovasystems.com/ui-components/security-model): why framing is denied by default, what the widget route changes, and the sandbox requirements for hosts that embed inside sandboxed iframes.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.nerovasystems.com/ui-components/ui-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.