JSFiddle - React, Tailwind, and code Playground

by Marco Abate

HTML

<div id="nais-widget" data-type="contest" data-id="5bc20d6331d1d036d69a6a82"></div>

JavaScript

const widgetContainer = document.getElementById('nais-widget');
    if(widgetContainer) {
        const type = widgetContainer.getAttribute('data-type');
        const id = widgetContainer.getAttribute('data-id');
        const BASE_URL = 'https://widget.naisapp.local';
        const availableTypes = ['topic', 'contest'];
        let iframeSource = '';
        if(type && availableTypes.indexOf(type) > -1 && id) {
            iframeSource = [BASE_URL, type, id].join('/');
            let iframe = document.createElement("iframe");
            iframe.setAttribute('src', iframeSource);
            iframe.setAttribute('scrolling', 'no');
            iframe.setAttribute('frameborder', '0');
            iframe.setAttribute('width', '100%');
            iframe.setAttribute('height', '0');
            widgetContainer.appendChild(iframe);
            window.addEventListener('message', (e) => {
                console.log(e)
                if(e.data && e.data.height) {
                    iframe.setAttribute('height', e.data.height);
                }
            })
        }
    }