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

# Embeddable Widgets

Use the ViewFi embeddable widgets to publish your rewarded campaigns. Accessible from the publish page.

### Social Embed Links

This campaign link is the easiest way to share your campaign. The format is \[BrandName].viewfi.io/\[campaignID]. It will play the video on the full page. Note you can chose to host this on your own domain. Learn more [here](/publish/connect-sub-domain.md)

**Example:**

```
https://veloce1.viewfi.io/C/5QVD48S9J2
```

```
video.Veloce.com/C/5QVD48S9J2
```

### Embed Code

Just like embedding a YouTube video on your site. You can make certain edits to the size and change the code:

*Example Code:*

```
<div id='VW-area' style="--aspect-ratio: 16/9;max-width: 960px;min-height:510px;" campaignId="5QVD48S9J2"></div><script src="https://api.viewfi.io/lib/js/loader.min.js"></script>
```

### iFrame Code

This is another option to embed the code within your container on your site.&#x20;

*Example code:*

```
<iframe src=https://veloce1.viewfi.io/C/5QVD48S9J2 width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" hspace="0" vspace="0" scrolling=no bordercolor='#000000'></iframe>
```

### QR Code

This will generate a campaign QR code for you to download and add to your campaign.&#x20;

<figure><img src="https://1941361103-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ffqex03H0w2V2ot4xD5Yz%2Fuploads%2FH35VxXF8vEcctu9Pq1RE%2FScreenshot%202023-09-28%20at%2010.12.52%20AM.png?alt=media&amp;token=13df1e6a-103a-46e8-9429-f41ecb7e13ad" alt=""><figcaption><p>Example QR Code. Scan to view.</p></figcaption></figure>

### Get Overlay Widget

This allows you to add a text link anywhere on your site to launch the reward. This widget displays your campaign video as a text link, which then loads in an overlay modal in large player format.

*Example Code:*

```
<a id="VMOverlay" campaignId="5QVD48S9J2" href="javascript:void(0);">WATCH AND CLAIM NFT</a><script src="https://api.viewfi.io/lib/js/loader.min.js"></script>
```

### ViewPlay Float

Paste this HTML snippet into your page header. A floating campaign image will display on your page in bottom right corner and will load the player modal in large player format once clicked. User will remain on the page throughout the whole experience.&#x20;

*Example Code*

```
<div id='vieworks-area' viewfi-launch='true' container-position='left' style="--aspect-ratio: 16/9;max-width: 854px;" campaignId="5QVD48S9J2"></div><script src="https://api.viewfi.io/lib/js/earn-reward-large.min.js"></script><script src="https://api.viewfi.io/lib/js/loader.min.js"></script>
```

{% @arcade/embed flowId="qOvLNfoTdLoMBLPaIp7f" url="<https://app.arcade.software/share/qOvLNfoTdLoMBLPaIp7f>" %}

### **Video Leaderboard Embed**

Here you can chose to embed your campaign leaderboard into your site directly using light mode or dark mode. Learn more [here](/features/referral-system.md)

```
<iframe src=https://hugoboss01.viewfi.io/l/KD88JFYF3T/leaderboard width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" hspace="0" vspace="0" scrolling=no bordercolor='#000000'></iframe>

```

### An Overview Of Common Resolutions

In aspect ratio 16:9:

| Standard | Resolution | Fancy Name |
| -------- | ---------- | ---------- |
| 480p     | 720x480    | DVD Video  |
| 720p     | 1280x720   | Fake HD    |
| 1080p    | 1920x1080  | Full HD    |
| 2160p    | 3840x2160  | 4K         |
| 4320p    | 7680x4320  | 8K UHD     |