> 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/gallery.md).

# Component gallery

Every embeddable piece Nerova ships, in one place. Each component renders inside your product, inherits your branding through embed theme tokens, and keeps provider credentials server-side at Nerova.

## Previews

| Component                                                                                       | Shape           | What it does                                                                                                        | Status                      |
| ----------------------------------------------------------------------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------- |
| [WhatsApp connect](https://docs.nerovasystems.com/ui-components/whatsapp-connect)               | Popup           | Launches Meta's WhatsApp Embedded Signup from your page and confirms the connection against the activation manifest | Available (`@nerova/embed`) |
| [WhatsApp channel details](https://docs.nerovasystems.com/ui-components/embedded-widgets)       | Widget (iframe) | Merchant-facing view of a connected channel: display name, quality rating, messaging limits, verification status    | Shipped (2026-08-31)        |
| [Business verification progress](https://docs.nerovasystems.com/ui-components/embedded-widgets) | Widget (iframe) | Guided view of Meta's business verification steps and what is still required                                        | Planned                     |

## Two shapes, one rule

* **Popup components** wrap a user gesture and open a Nerova-hosted page in a popup window. This is the only shape for provider authorization: Meta's Embedded Signup must run in a top-level window on a Meta-allow-listed domain, so it can never render inside an iframe on your origin. Your page never navigates; the merchant stays in your product.
* **Widget components** are the iframe shape. They render read-only status surfaces inline through a dedicated widget route that permits framing only for your registered origins. Everything that mutates state or touches provider credentials stays on the popup path.

The [embedding security model](https://docs.nerovasystems.com/ui-components/security-model) explains why the split exists and what sandboxed hosts must grant.

## WhatsApp connect

The flagship component. Drop it into your page and it handles the popup mechanics, blocker fallbacks, and completion detection for the whole WhatsApp onboarding moment:

```tsx
import { WhatsAppConnect } from "@nerova/embed";

<WhatsAppConnect
  session={createSession}
  confirmCompletion={confirmAgainstManifest}
  onCompleted={() => refresh()}
  onFailed={(reason) => report(reason)}
/>;
```

Your backend creates the connection session over the partner API; the component never calls Nerova itself and never sees a credential. Full reference, props, and the completion message contract: [WhatsApp connect](https://docs.nerovasystems.com/ui-components/whatsapp-connect).

The hosted page the 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)

When the merchant finishes Meta's flow, the hosted page confirms the connection:

![The hosted connection page in its completed state, showing WhatsApp connected and a Done button](https://2396471767-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqI0ECBevw0VmfTzoMA2N%2Fuploads%2FvOO6c5lMB813s502o7Md%2Fhosted-connect-complete.png?alt=media)

A demo mode ships as a separate `@nerova/embed/demo` entrypoint with a mock session and scripted popup driver, so you can build and preview the integration without a live tenant.

## Status widgets

The WhatsApp channel details widget is shipped. It renders Nerova-served, read-only provider state inline in your page, kept in sync with Meta. It loads from the widget route with a per-partner `frame-ancestors` allow-list, takes your theme tokens, and exposes no credentials. The business verification progress widget is planned and will follow the same mechanics. Architecture and embedding details: [Embedded status widgets](https://docs.nerovasystems.com/ui-components/embedded-widgets).

## Bring your own UI

Every component is a convenience, not a requirement. The same lifecycles are available directly through the partner API under the [host UI integration law](https://docs.nerovasystems.com/documentation/guides/host-ui-integration), so you can always build the surface yourself and switch later without a migration.


---

# 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/gallery.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.