1. Add the following iFrame snippet to your website HTML, adding in your public roadmap URL:
   

   <div> <iframe id="IframeId" src="YOUR_ROADMAP_URL" style="width:100%;" onload="setIframeHeight(this)"></iframe> </div>
   

2. Next you need to add the following JavaScript snippet to your website HTML:
   

window.addEventListener('message', function (event) {
if (event.data.hasOwnProperty("FrameHeight")) {
        $("#IframeId").css("height", event.data.FrameHeight);        
    }
});

Next you need to add another JavaScript snippet (below). On iFrame load you have to send message to iFrame window content with "FrameHeight" message. This function is already being called through the "onload" property on the iFrame snippet from step 1, but it's not been added to your website HTML yet, so add this:

function setIframeHeight(ifrm) {
   var height = ifrm.contentWindow.postMessage("FrameHeight", "*");   
}

3. You're done! The public Productstash roadmap page takes care of the next step and dynamically sets the iFrame height accordingly based on the content. For clarity, the third step from the StackOverflow solution (outlined below), does not need to be done by you - this is already implemented within Productstash.
   

window.addEventListener('message', function (event) {

   if (event.data == "FrameHeight") {
        var body = document.body, html = document.documentElement;
        var height = Math.max(body.scrollHeight, body.offsetHeight,
            html.clientHeight, html.scrollHeight, html.offsetHeight);

        event.source.postMessage({ "FrameHeight": height }, "*");       
    }
});