Embedding the UI - Pion

Adding the Script

Add the <script> shown below inside the <head> tag of the HTML for the page you want to embed the Beans iD Whitelabel UI within:

<script
  src="https://cdn.studentbeans.com/third-party/all.js"
  id="beansid-script"
  data-whitelabel
  async
></script>

Insert the UI

Once the script has been setup, a custom HTML element will be made available allowing you to embed the Beans iD Whitelabel Embedded UI on your page. This can be done by pasting the below snippet into your page in the location that you want the UI to be embedded:

<beansid-whitelabel-ui
  verification-id="15ab7f14-fc08-445a-a830-84c2f11ef2ef"
  redirect-url="https://example.com/verification"
></beansid-whitelabel-ui>

Attribute	Required	Description
`verification-id`	✅	This UID returned from creating a verification during the previous step.
`redirect-url`	✅	The URL to send a user to once they have completed their verification via the UI. For security, this needs to match a `redirectUrl` associated with the `clientUid` used to start the verification, which can be configured via the Pion Portal.
`language`	❌	A list of valid codes can be found here.
`title`	❌	This property controls what screen readers will read when describing the iFrame used to embed the UI.
`width`	❌	This property controls the width of the embedded iFrame. This can be set to a `px` or a `%` value.
`height`	❌	This property controls the height of the embedded iFrame. This can be set to a `px` or a `%` value. The iFrame has an enforced minimum height to ensure all the relevant content is always visible to a user.