Customize the request web view
Learn how to customize the text and appearance of the cross-device request web view that MATTR VII renders during a remote web verification, using the verifier application display configuration.
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. Because these properties belong to the application configuration, you can present a
different request web view to different verifier applications on the same tenant.
You can set them when you create a verifier application and change them at any time afterwards, either in the MATTR Portal or via the MATTR VII API.
The display object applies to the cross-device flow, where the request is rendered as a QR code
in an iframe. It does not affect same-device flows, where the user is redirected straight to a
compliant wallet on the same device.
Display modes
The request web view supports two display modes, set with the displayMode property in the
display object:
fullrenders 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.simplerenders 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
logoImageandheaderText, the mode is inferred asfull. - Any other combination is inferred as
simple. - Omitting the
displayobject entirely also renders the simple QR code only view.
In the Portal you do not set displayMode directly. The Custom branding and supplementary text
checkbox selects it for you, as described in
Configure the request web view.
Customizable properties
All display properties live under openid4vpConfiguration.display on a web verifier
application. The Modes column shows where each property applies, and the Portal field column
gives the equivalent field on the verifier application form. Each optional text field falls back to
a sensible default when omitted.
| Property | Portal field | Description | Modes | Default when omitted |
|---|---|---|---|---|
displayMode | Cross-device flow modal display options: Custom branding and supplementary text | Selects the request web view. full for the branded view, simple for the QR code only view. | Both | Inferred from the other fields |
logoImage.url | Logo URL | Publicly available URL of the logo image shown in the top left corner of the iframe. Recommended size and format are 140 x 42 px as .svg, .png, or .jpg. | full | Required in full mode |
logoImage.altText | Logo alt text | Alternative text for the logo image. | full | Required in full mode |
headerText | Header text | Header text displayed in the iframe. | full | Required in full mode |
bodyText | Body text | Body text explaining the context in which the credentials will be shared. | full | No body text |
primaryColorHex | Primary color | Hex rgb triplet for the primary color of the iframe. | full | #E7E7E7 |
privacyPolicyUrl | Privacy policy link | Privacy policy URL to link from the iframe. | full | No privacy policy link |
privacyPolicyLinkText | Privacy policy link text | Custom text for the privacy policy link. Only takes effect when privacyPolicyUrl is also set. Supplying it without privacyPolicyUrl is rejected with an HTTP 400 validation error. | full | View Privacy Policy |
qrCodeInstructions | Instruction to scan QR code | Instructions displayed beneath the QR code. | Both | Scan QR code with the digital wallet that holds your information |
awaitingPresentationText | Instruction for awaiting presentation | Text displayed after the QR code has been scanned, while awaiting the presentation. | Both | QR scanned, waiting for information... |
Configure the request web view
- Log in to the MATTR Portal and switch to the tenant where you want to create your verifier application.
- Expand the Credential Verification section in the left-hand navigation panel, then select Applications.
- Select the Create new button and use the Type radio button to select Web, or select an existing Web application from the list to open its detail screen.
- In the Remote presentation configuration card, confirm that Supported mode is set to either Cross-device flow only or Both. The request web view only applies to cross-device presentations, so these fields are hidden while an application is same-device only.
- Use the Cross-device flow modal display options checkboxes to select the display mode you want. The Portal displays a different set of fields for each mode, as described below.
Simple display mode
Leave Custom branding and supplementary text clear. The Portal renders the QR code only view and displays no branding fields.
Select Custom instruction text to replace the default wording. The Portal adds a Custom instruction text section to the form holding the only two fields you can edit in this mode:
| Portal field | What it sets | Default value when empty |
|---|---|---|
| Instruction to scan QR code | The text paired with the QR code. | Scan QR code with the digital wallet that holds your information |
| Instruction for awaiting presentation | The text paired with the loading animation shown once the QR code has been scanned. | QR scanned, waiting for information... |
Full display mode
Select Custom branding and supplementary text. The Portal renders the fully branded view and adds a Custom branding and supplementary text section to the form, holding the following fields in this order:
| Portal field | What it sets | Required |
|---|---|---|
| Logo URL | Publicly available URL of the logo shown in the top left corner of the modal. Recommended size and format are 140 x 42 px as .svg, .png, or .jpg. | Yes |
| Logo alt text | Alternative text for the logo image. | Yes |
| Primary color | Primary color of the modal, as an sRGB hex code. Defaults to #E7E7E7. | No |
| Header text | Header displayed alongside the QR code. | Yes |
| Body text | Text explaining the context in which the credentials will be shared. | No |
| Privacy policy link | URL to link to your privacy policy from the modal. | No |
| Privacy policy link text | Display text for the privacy policy link. Only appears once you have entered a Privacy policy link, and defaults to View Privacy Policy. | No |
You can select Custom instruction text alongside custom branding. It adds the same two text boxes described for simple display mode, which apply in both modes.
Previewing and saving
Once you have filled in the fields for your mode:
- Use the Modal preview panel to check your configuration. It updates as you type, and it shows the default wording wherever you have not set an override. Select the information icon in the panel header to show a guide that labels each area of the modal with the field that controls it.
- Select the Create or Update button to save the configuration.
Leaving both checkboxes clear removes the display object from the application configuration
entirely, which renders the QR code only view with all of the default wording.
Tips
- Keep
qrCodeInstructionsandawaitingPresentationTextshort. They are displayed on a single line beneath the QR code and next to the loading state. - Use
privacyPolicyLinkTextto match the link wording to your own privacy policy naming, for example "Privacy notice" or "How we handle your data". primaryColorHexaccepts a standard hex color, such as#1A73E8. Choose a color with enough contrast against the iframe background so that interactive elements remain legible.- If you configured a verifier application before display modes were introduced, opening it in the Portal shows Custom branding and supplementary text already selected whenever the application has both a logo image and header text, which matches the mode MATTR VII infers for it.
How would you rate this page?
Last updated on