> For the complete documentation index, see [llms.txt](https://umay-protocol.gitbook.io/umay-protocol/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://umay-protocol.gitbook.io/umay-protocol/protocol/umay-iframe.md).

# Umay iFrame

## Step 1 - Integration

* Simply Include IFrame Script,
* You can call any function you want from the injected umayApi.

## Step 1.1 - Frame Script

<figure><img src="https://125098424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKt6yRGZ0WZ1jIUZ8FIC%2Fuploads%2FvlolocVW2FM9OhWPd0oo%2FScreenshot%202024-08-24%20at%2019.06.31.png?alt=media&amp;token=51694464-c1ef-4c97-ac51-3781db99ba88" alt=""><figcaption></figcaption></figure>

* Add Listener Frame,
* You can simply use iframes as “listen” and “content”.

## Step 1.2 - Listener Frame

<figure><img src="https://125098424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKt6yRGZ0WZ1jIUZ8FIC%2Fuploads%2FR9F6NXkz3vEc71QRCx8n%2FScreenshot%202024-08-24%20at%2019.07.25.png?alt=media&amp;token=e3edc623-3daa-4b18-8035-e4030cc87142" alt=""><figcaption></figcaption></figure>

<figure><img src="https://125098424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKt6yRGZ0WZ1jIUZ8FIC%2Fuploads%2FRkHyJS1fStnOuBhqIKLC%2FScreenshot%202024-08-24%20at%2019.07.49.png?alt=media&amp;token=7744f303-4a4c-4266-a3f9-ce6bec649f51" alt=""><figcaption></figcaption></figure>

* Connect
* For example, you can use the wallet connection For example, you can use the wallet connection by calling the “connect” function in umayApi.

## Step 1.3 - Call Connect code in your wallet connection event

<figure><img src="https://125098424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKt6yRGZ0WZ1jIUZ8FIC%2Fuploads%2FRNVMxVEbC5HG2g6GIpAj%2FScreenshot%202024-08-24%20at%2019.08.32.png?alt=media&amp;token=1cf9d132-5084-4fb5-b128-a2fc7ee9d5c9" alt=""><figcaption></figcaption></figure>

When you connect you can use these features:

## Step 1.4 - Edit Profile

<figure><img src="https://125098424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKt6yRGZ0WZ1jIUZ8FIC%2Fuploads%2F3CTHtAs2drdh2eTsHehv%2FScreenshot%202024-08-24%20at%2019.09.13.png?alt=media&amp;token=5b0d1d4a-3245-4007-87c0-46ef3c76cd79" alt=""><figcaption></figcaption></figure>

## Step 1.5 - View Profile

<figure><img src="https://125098424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKt6yRGZ0WZ1jIUZ8FIC%2Fuploads%2FD0s4eHWM2iBv0YmLvP8Y%2FScreenshot%202024-08-24%20at%2019.09.41.png?alt=media&amp;token=bd414f35-3a37-4477-9448-91eed684f237" alt=""><figcaption></figcaption></figure>

<figure><img src="https://125098424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKt6yRGZ0WZ1jIUZ8FIC%2Fuploads%2Fq1L4CLkyxGNq5z22GEkb%2FScreenshot%202024-08-24%20at%2019.10.08.png?alt=media&amp;token=93fdd28a-fe90-4dd5-9589-454b00772e0f" alt=""><figcaption></figcaption></figure>

## Step 1.6 - Optional: Size of the IFrame

<figure><img src="https://125098424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKt6yRGZ0WZ1jIUZ8FIC%2Fuploads%2FKVIFd9o6ulCyiuw8KtfD%2FScreenshot%202024-08-24%20at%2019.10.44.png?alt=media&amp;token=c3b499ba-8d72-4c61-ae25-db13d5e1d9d7" alt=""><figcaption></figcaption></figure>