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:

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

Widget Name	Description	Example	With Currency Sales
premium_1 (default)	Default premium widget template with standard layout.
premium_2	Alternative premium template with a different design.
no_offers	Default layout when there are no offers available

Example Usage

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

<!-- 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:

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

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.

🎨 CSS

Add these styles to your page:

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

The .fullscreen class is used as a fallback when the browser's native fullscreen API is not available or as a CSS-based alternative.

👩🏻‍💻 Javascript

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

// 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 === 'TYR_SDK_LOADED') {
      enterFullscreen(sourceIframe);
    }

    // Handle widget loaded event - exit fullscreen
    if (data.action === 'WIDGET_LOADED') {
      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'));
    }
  });
});