> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wearepion.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding the UI

### **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:

```text theme={null}
<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:

```text theme={null}
<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 [<u>the previous step</u>](/api-reference/create-a-new-verification).                                                                                                                       |
| `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](/documentation/language-and-territories/overview).                                                                                                                                                      |
| `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.*                                  |

 
