# Widget

The **Tyr SDK** offers multiple widgets to embed campaigns within your app, each designed for different use cases and campaign types. 

***

This widget is accessible via the `/widget` route and supports different layout:

```markup
https://sdk.tyrads.com/widget?token=<TOKEN>&name=<WIDGET_NAME>
```

### 🧩 Premium Widget

The **Premium Widget** is designed specifically to showcase **premium campaigns** within your app. It uses predefined template layouts to present these campaigns with a polished, high-quality appearance.

#### 🚩 Available Widget

<table><thead><tr><th width="181.9453125">Widget Name</th><th>Description</th><th>Example</th><th>With Currency Sales</th></tr></thead><tbody><tr><td><code>premium_1</code> (default)</td><td>Default premium widget template with standard layout.</td><td><img src="https://347922413-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbqqMYRbr0w4Hv3JxQUF7%2Fuploads%2FJLeP3XboORjeHAW3MNfj%2FPremium%20option%2015.png?alt=media&#x26;token=0299a5eb-75be-4170-aeb3-60afefe0755c" alt=""></td><td><img src="https://347922413-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbqqMYRbr0w4Hv3JxQUF7%2Fuploads%2FMPPvHt4675JR7gBL8U3T%2FPremium%20option%2017.png?alt=media&#x26;token=d5961066-0211-4c29-851f-5c45c56f40b9" alt=""></td></tr><tr><td><code>premium_2</code></td><td>Alternative premium template with a different design.</td><td><img src="https://347922413-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbqqMYRbr0w4Hv3JxQUF7%2Fuploads%2Fy1UyOBXp9FiEKFzziOVX%2FFrame%201171276648.png?alt=media&#x26;token=163c10c0-747f-4e6b-acfe-fe461c4c9eff" alt="" data-size="original"></td><td><img src="https://347922413-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbqqMYRbr0w4Hv3JxQUF7%2Fuploads%2FldqpSH0PiQ4Y2YRkHbHE%2FFrame%201171276631.png?alt=media&#x26;token=8a0aa4f4-d7f7-42f2-ad5f-442f3d1e7cf0" alt="" data-size="original"></td></tr><tr><td><code>no_offers</code></td><td>Default layout when there are no offers available</td><td><img src="https://347922413-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbqqMYRbr0w4Hv3JxQUF7%2Fuploads%2FtEFMNZUSXjAL4UnbJeRs%2FFrame%201171276650.png?alt=media&#x26;token=28026d36-1cea-46b4-890b-46dd35335a18" alt="" data-size="original"></td><td></td></tr></tbody></table>

#### Example Usage

You can load the widget by using the `/widget` route and specifying a layout:

```html
<!-- This URL will load the Premium Widget using the `premium_2` layout -->
https://sdk.tyrads.com/widget?token=<TOKEN>&name=premium_2
```

### 🔎 FullScreen Integration

We're supports fullscreen mode to provide an immersive user experience. When integrated properly, the widget automatically enters fullscreen when the SDK loads.

Add the widget iframe to your page with `allowfullscreen` attribute:

```html
<iframe
  class="tyr-sdk-iframe"
  src="https://sdk.tyrads.com/widget?token=<TOKEN>&name=premium_2"
  allowfullscreen
  title="Tyr SDK Widget"
></iframe>
```

{% hint style="danger" %}
**Note:** The `allowfullscreen` attribute is required for the browser's fullscreen API to work. Without it, the widget will fall back to CSS-based fullscreen.
{% endhint %}

#### 🎨 CSS

Add these styles to your page:

```css
.tyr-sdk-iframe.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: 9999;
}
```

{% hint style="info" %}
The `.fullscreen` class is used as a fallback when the browser's native fullscreen API is not available or as a CSS-based alternative.
{% endhint %}

#### 👩🏻‍💻 Javascript

Add this script to handle fullscreen communication between the widget and your page:

```javascript
// Define allowed origins for security
const allowedOrigins = ['https://sdk.tyrads.com'];

// Get all widget iframes on the page
const iframes = document.querySelectorAll('.tyr-sdk-iframe');

// Function to enter fullscreen mode
function enterFullscreen(iframe) {
  if (iframe.requestFullscreen) {
    iframe.requestFullscreen();
  } else if (iframe.webkitRequestFullscreen) {
    iframe.webkitRequestFullscreen();
  } else if (iframe.mozRequestFullScreen) {
    iframe.mozRequestFullScreen();
  } else if (iframe.msRequestFullscreen) {
    iframe.msRequestFullscreen();
  } else {
    // Fallback to CSS-based fullscreen
    iframe.classList.add('fullscreen');
  }
}

// Function to exit fullscreen mode
function exitFullscreen(iframe) {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else if (document.webkitFullscreenElement) {
    document.webkitExitFullscreen();
  } else if (document.mozFullScreenElement) {
    document.mozCancelFullScreen();
  } else if (document.msFullscreenElement) {
    document.msExitFullscreen();
  } else {
    iframe.classList.remove('fullscreen');
  }
}

// Listen for messages from the widget
window.addEventListener('message', event => {
  // Verify message origin for security
  if (!allowedOrigins.includes(event.origin)) return;

  try {
    const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
    const sourceIframe = Array.from(iframes).find(iframe => iframe.contentWindow === event.source);
    
    if (!sourceIframe) return;

    // Handle SDK loaded event - enter fullscreen
    if (data.action === 'sdkLoaded') {
      enterFullscreen(sourceIframe);
    }

    // Handle widget loaded event - exit fullscreen
    if (data.action === 'widgetLoaded') {
      exitFullscreen(sourceIframe);
    }
  } catch (err) {
    console.error('Invalid message:', err);
  }
});

// Cleanup when user exits fullscreen manually
['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'msfullscreenchange'].forEach(eventName => {
  document.addEventListener(eventName, () => {
    if (!document.fullscreenElement && !document.webkitFullscreenElement && 
        !document.mozFullScreenElement && !document.msFullscreenElement) {
      iframes.forEach(iframe => iframe.classList.remove('fullscreen'));
    }
  });
});
```