Widget builder

What is vouch widget?

vouch widget is an embeddable and customizable verification interface that displays data sources to your users. You can embed the widget directly in your application, allowing users to see and select from available data sources without leaving your site.

When a user clicks a data source card in the widget, they're redirected to the vouch verification flow with the selected datasourceId. After completing verification, users are redirected to your redirectUrl, and if configured, a webhook is sent to your webhookUrl with the verification proof.

Example: Proof of address

For example, a proof of address widget might display multiple banking and financial service providers, allowing users to choose their preferred provider to verify their address:

Users can select from available options like Revolut, NatWest, Experian, or Binance. Each option is presented as a clickable card with the provider's logo and name. Once selected, the user begins the verification process for that specific data source.

Creating a widget with the builder

Use the vouch widget builder to create and customize your verification widget. The builder provides a visual interface to configure styling, messaging, data sources, and integration settings.

Configure your widget

Customize branding, colors, styling, content, and integration settings:

• Branding: Logo URL, logo max width, font selection
• Colors: Background, primary, secondary, widget background, heading, and subtext colors
• Styling: Form rounding, item rounding, widget width
• Content: Headline, subheadline, footnote
• Integration: Customer ID, webhook URL, redirect URL, data source IDs

Select data sources

Enter data source IDs in the data source IDs field, separated by commas or newlines. Use the Open selector button to browse and select from available data sources. Data sources are listed in the available data sources section and in the vouch catalog.

The widget displays selected data sources as clickable cards. Users click a card to begin verification for that data source.

Copy embed code

Copy the generated HTML or React JSX snippet from the Embed snippet section. All configuration settings are included as URL parameters in the iframe src.

Embedding the widget

HTML

<iframe
  src="https://widget.getvouch.io/embed?customerId=YOUR_CUSTOMER_ID&datasourceIds=SOURCE_ID_1,SOURCE_ID_2&..."
  style="width: 760px; max-width: 100%; min-height: 640px; border: 0; border-radius: 18px; overflow: hidden; background: #050913;"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  allow="clipboard-write"
></iframe>

React JSX

<iframe
  src="https://widget.getvouch.io/embed?customerId=YOUR_CUSTOMER_ID&datasourceIds=SOURCE_ID_1,SOURCE_ID_2&..."
  style={{
    width: "760px",
    maxWidth: "100%",
    minHeight: "640px",
    border: 0,
    borderRadius: "18px",
    overflow: "hidden",
    background: "#050913",
  }}
  loading="lazy"
  referrerPolicy="strict-origin-when-cross-origin"
  allow="clipboard-write"
/>

Widget parameters

All configuration options are passed as URL parameters to the embed URL. Core integration parameters:

Additional parameters for styling, branding, and content (headline, subheadline, footnote, colors, fonts, etc.) can be configured in the widget builder interface.

For more details on the verification flow and webhook handling, see First steps and Verifying webproofs.