How the button will look like on your website (click to launch the widget):

^{*Width is determined by the parent block width}

Code to be inserted into your website

<!-- https://perpendicular.pro Free stair calculators -->

<link rel="stylesheet" type="text/css" href="https://perpendicular.pro/widget/css/popup.css" /><link rel="stylesheet" type="text/css" href="https://perpendicular.pro/widget/JS/highslide.css" /><script type="text/javascript" src="https://perpendicular.pro/widget/JS/highslide-full.js"></script><script type="text/javascript">hs.graphicsDir = 'https://perpendicular.pro/widget/JS/graphics';hs.outlineType = 'rounded-white';</script><a href="#" style="cursor: pointer" id="popup__toggle" onclick="if(navigator.userAgent.match(/iPhone|iPad|iPod/i)) { var win = window.open('?widget=1&referer='+window.location, '_blank');win.focus();}else{window.parent.document.getElementById('popup').style.display='block';} document.getElementById('frame_calc').src='?widget=1';"><div class="calc" style="width:px; background-color:#;-moz-border-radius: px; -webkit-border-radius:px; border-radius:px;"><div style="display: flex;display: -ms-flexbox; display: flex;-ms-flex-direction: row;flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap;   align-items: center;  margin: 0 10px auto; width:px;  "><div class="reset-this"><img class="reset-this" src=""  style="cursor:pointer;width: px; vertical-align: middle;"></div><div style=""><p class="reset-this" align="justify" style="cursor:pointer;color:#; font-size: px; font-family:; margin: 0px 5px;"></p></div></div><div style="clear: both"></div></div></a><div class="popup" id="popup"><a href="#" class="popup__close" onclick="document.getElementById('popup').style.display='none';">X</a><iframe frameborder="0"  width="99%" height="95%"  src="" id="frame_calc"></iframe></div><a href='?widget=1'></a>

<!-- https://perpendicular.pro Free stair calculators -->

Simple widget link (without a button)

Code to be inserted into your website

<link rel="stylesheet" type="text/css" href="https://perpendicular.pro/widget/css/popup.css" /><link rel="stylesheet" type="text/css" href="https://perpendicular.pro/widget/JS/highslide.css" /><script type="text/javascript" src="https://perpendicular.pro/widget/JS/highslide-full.js"></script><script type="text/javascript">hs.graphicsDir = 'https://perpendicular.pro/widget/JS/graphics/';hs.outlineType = 'rounded-white';</script><a href="#" id="popup__toggle" onclick="if(navigator.userAgent.match(/iPhone|iPad|iPod/i)) { var win = window.open('?widget=1&referer='+window.location, '_blank');win.focus();}else{window.parent.document.getElementById('popup').style.display='block';}document.getElementById('frame_calc').src='?widget=1';"><p></p></a><div class="popup" id="popup"><a href="#" class="popup__close" onclick="document.getElementById('popup').style.display='none';">X</a><iframe frameborder="0" width="99%" height="95%" src="" id="frame_calc"></iframe></div><a href='?widget=1'></a>