Embedding in Plain HTML

Paste the iframe snippet directly into the spot on your page where you want the widget. The widget will automatically resize to fit its content.

Basic Iframe

Use the default layout to embed the widget at 460 pixels wide. This size fits the standard layout without horizontal scrolling.

<iframe src="https://widget.oncade.online/?gameId=GAME_ID&itemId=ITEM_ID"
  width="460"
  height="400"
  frameborder="0"
  allow="payment"
  id="oncade-widget"
></iframe>

Note: Replace GAME_ID and ITEM_ID with your actual game and item IDs from the Developer Portal.

Wide Widget

Follow the steps below to enable the wide layout on your own page:

  1. Start with the basic snippet and append type=wide to the iframe src URL so the widget loads the wide layout.
  2. Increase the iframe width to at least 940 pixels so the wider layout has enough horizontal space without cropping any UI.
  3. Keep the height at 360 pixels (or increase it) to show the expanded layout and avoid scrollbars unless your design needs them.
<iframe src="https://widget.oncade.online/?gameId=GAME_ID&itemId=ITEM_ID&type=wide"
  width="940"
  height="360"
  frameborder="0"
  allow="payment"
  id="oncade-widget"
></iframe>

Note: When using the wide layout you must update both the iframe URL and width. Adjust the width if your page requires additional spacing, keeping the type=wide parameter in the URL.

Auto-Resizing Iframe (Recommended)

Add the listener below to automatically adjust the iframe height after the widget loads new content. Give your iframe an id(for example, id="oncade-widget") so the script can locate it before applying the new height, and update the selector if you choose a different value. Include the script once on the page after your iframe markup.

<script>
window.addEventListener('message', (event) => {
  if (event.data.type === 'oncade-widget-resize') {
    const iframe = document.getElementById('oncade-widget');
    if (iframe) {
      iframe.style.height = event.data.height + 'px';
    }
  }
});
</script>