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

# Embedding the widget

> The script tag, the button, and the attributes that wire it up.

Embedding is two things: a script tag that loads the widget, and a button that triggers it. You copy this from the dashboard for each widget, already filled with its public key.

## The snippet

```html theme={null}
<script src="https://app.pruva.africa/widget/embed.js" defer></script>

<!-- Replace the customer values below with your signed-in user's details -->
<button data-pruva-key="pub_your_widget_key"
        data-pruva-api="https://api.pruva.africa"
        data-pruva-color="#10D3A0"
        data-pruva-firstname="{{firstName}}"
        data-pruva-lastname="{{lastName}}"
        data-pruva-email="{{email}}">
  Verify your identity
</button>
```

The script loads once per page. Any button carrying `data-pruva-key` becomes a trigger, so you can place several widgets on one page.

## Attributes

<ParamField path="data-pruva-key" type="string" required>
  Your widget's **public key** (`pub_...`). This is what ties the button to your widget and its configuration. Safe to put in the page.
</ParamField>

<ParamField path="data-pruva-api" type="string">
  The Pruva API base URL the widget calls, `https://api.pruva.africa`.
</ParamField>

<ParamField path="data-pruva-color" type="string">
  A hex color for the widget's accent and its loading spinner, so it matches your brand from the first frame.
</ParamField>

<ParamField path="data-pruva-firstname" type="string">
  The signed in user's first name, used to prefill and personalize the flow.
</ParamField>

<ParamField path="data-pruva-lastname" type="string">
  The signed in user's last name.
</ParamField>

<ParamField path="data-pruva-email" type="string">
  The signed in user's email.
</ParamField>

## Fill in the customer values

The `{{firstName}}`, `{{lastName}}`, and `{{email}}` placeholders are meant to be replaced with your signed in user's real details, server side when you render the page or client side before the widget opens. They let the flow greet the user and attach their details to the result.

```html theme={null}
<!-- Rendered for a signed-in user -->
<button data-pruva-key="pub_your_widget_key"
        data-pruva-api="https://api.pruva.africa"
        data-pruva-color="#10D3A0"
        data-pruva-firstname="Ada"
        data-pruva-lastname="Okafor"
        data-pruva-email="ada@example.com">
  Verify your identity
</button>
```

<Note>
  The customer attributes are optional. If you do not have the user's details, leave them out; the widget will collect what it needs.
</Note>

## Styling the button

The button is your own element. Style it however you like with your own CSS; Pruva only listens for the click. Only the text and styling are yours to change, the `data-pruva-*` attributes are what wire it to the widget.

<Warning>
  Use the **public key** (`pub_...`) here, never your API key. The snippet runs in the browser, where anyone can read it. A public key is built for that; an API key is not.
</Warning>