Customize the request web view

In a cross-device remote web verification, MATTR VII renders the request in an embedded iframe. The iframe shows a QR code that the user scans with the digital wallet holding their information, along with supporting text and, optionally, your own branding. You can tailor this request web view to match your own product and language by setting display properties on your verifier application configuration.

These properties are set once, when you create or update your verifier application on your MATTR VII tenant. Because they belong to the application configuration, you can present a different request web view to different verifier applications on the same tenant.

Display modes

The request web view supports two display modes, set with the displayMode property in the display object:

• full renders the fully branded request web view, with your logo, header and body text, primary color, and an optional privacy policy link, next to the QR code.
• simple renders a QR code only view, with no branding. Only the QR code instructions and the awaiting presentation text can be customized in this mode.

Choosing a mode

We recommend setting displayMode explicitly so the rendered view always matches your intent. If you omit displayMode, MATTR VII infers it from the other fields you provide:

• If you provide both logoImage and headerText, the mode is inferred as full.
• Any other combination is inferred as simple.
• Omitting the display object entirely also renders the simple QR code only view.

Customizable properties

All display properties live under openid4vpConfiguration.display on a web verifier application. The Modes column shows where each property applies. Each optional text field falls back to a sensible default when omitted.

Example configurations

Full display mode

The following request creates a web verifier application with a fully branded request web view.

POST /v2/presentations/applications

{
  "name": "My Verifier Web Application",
  "type": "web",
  "domain": "example.com",
  "openid4vpConfiguration": {
    "supportedModes": "all",
    "redirectUris": ["https://example.com/presentation/callback"],
    "display": {
      "displayMode": "full",
      "logoImage": {
        "url": "https://static.mattr.global/logos/mattr/s/gFC.svg",
        "altText": "Example Logo image"
      },
      "headerText": "Share your information",
      "bodyText": "Scan the QR code to provide the information required for this interaction.",
      "primaryColorHex": "#1A73E8",
      "privacyPolicyUrl": "https://example.com/privacy",
      "privacyPolicyLinkText": "Read our privacy policy",
      "qrCodeInstructions": "Scan this QR code with your mobile wallet app",
      "awaitingPresentationText": "QR scanned, waiting for your information"
    }
  },
  "resultAvailableInFrontChannel": true
}

Simple display mode

The following request creates a web verifier application with a QR code only request web view. Only the QR code instructions and awaiting presentation text are customized. Sending any full-only field alongside "displayMode": "simple" is rejected with an HTTP 400 validation error.

{
  "name": "My Verifier Web Application",
  "type": "web",
  "domain": "example.com",
  "openid4vpConfiguration": {
    "supportedModes": "all",
    "redirectUris": ["https://example.com/presentation/callback"],
    "display": {
      "displayMode": "simple",
      "qrCodeInstructions": "Scan this QR code with your mobile wallet app",
      "awaitingPresentationText": "QR scanned, waiting for your information"
    }
  },
  "resultAvailableInFrontChannel": true
}

For the complete list of verifier application fields and to try the request, see the verifier applications API reference.

Tips

• Keep qrCodeInstructions and awaitingPresentationText short. They are displayed on a single line beneath the QR code and next to the loading state.
• Use privacyPolicyLinkText to match the link wording to your own privacy policy naming, for example "Privacy notice" or "How we handle your data".
• primaryColorHex accepts a standard hex color, such as #1A73E8. Choose a color with enough contrast against the iframe background so that interactive elements remain legible.