Using Hugo/Forestry

Use the HTML editor in your Markdown file or create a shortcode that outputs the iframe widget.

Direct HTML in Markdown

Switch to the HTML editor and paste the iframe code directly:

<iframe 
  id="oncade-widget"
  src="https://widget.oncade.online/?gameId=GAME_ID&itemId=ITEM_ID" 
  width="460" 
  height="400" 
  frameborder="0"
  allow="payment"
  style="border: none; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
</iframe>

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

Hugo Shortcode

Create a shortcode file at layouts/shortcodes/oncade-widget.html:

{{ $gameId := .Get "gameId" }}
{{ $itemId := .Get "itemId" }}
{{ $widgetId := printf "oncade-widget-%s" $itemId }}

<iframe 
  id="{{ $widgetId }}"
  src="{{ $widgetUrl }}/?gameId={{ $gameId }}&itemId={{ $itemId }}" 
  width="460" 
  height="400" 
  frameborder="0"
  allow="payment"
  style="border: none; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
</iframe>

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

Using the Shortcode

Use the shortcode in your content files:

{{< oncade-widget gameId="your-game-id" itemId="your-item-id" >}}