Embedding the widget

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

<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

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.

string

The Pruva API base URL the widget calls, https://api.pruva.africa.

string

A hex color for the widget’s accent and its loading spinner, so it matches your brand from the first frame.

string

The signed in user’s first name, used to prefill and personalize the flow.

string

The signed in user’s last name.

string

The signed in user’s email.

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.

<!-- 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>

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

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.

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.

​The snippet

​Attributes

​Fill in the customer values

​Styling the button

The snippet

Attributes

Fill in the customer values

Styling the button