Dynamic iframe / Embed widget Height – AppointmentCore Help Center

This requires some advanced coding knowledge. Below is some code to add to the booking link "Custom Header" in order to allow dynamic resizing.

Below is also code for embedding on the page where the widget will be added.

If you haven't yet embedded the widget, here is some code to be included on the website where the iframe is being embedded:

<iframe src="[BOOKING LINK URL HERE]" style="width: 100%;height: 900px;border: 0px none;" frameborder="0"></iframe>

<script src="//appointmentcore.com/frontend/js/lib/iframe-resizer-4.2.11/iframeResizer.min.js"></script> 
<script type="text/javascript">
(function(){
  var elms = document.getElementsByTagName('IFRAME');
  for (var i = 0; i < elms.length; i++) {
  var src = elms[i].getAttribute('src') + '';
    if (/appointmentcore\.com/i.test(src)) {
      iFrameResize({checkOrigin: false}, elms[i]);
    }
  }
})()
</script>

Those who have included the iframe:

<script src="//appointmentcore.com/frontend/js/lib/iframe-resizer-4.2.11/iframeResizer.min.js"></script> 
<script type="text/javascript">
(function(){
  var elms = document.getElementsByTagName('IFRAME');
  for (var i = 0; i < elms.length; i++) {
    var src = elms[i].getAttribute('src') + '';
    if (/appointmentcore\.com/i.test(src)) {
      iFrameResize({checkOrigin: false}, elms[i]);
    }
  }
})()
</script>

Interested to learn more about our product or schedule a demo, you can book through here.

Comments