AMP is a technology used to create speedy websites, originally introduced by Google in 2015. AMP sites derive their speed advantage from the simpler HTML mandated by AMP and from caching.
AMP pages can embed apps created with Calcapp using the amp-iframe tag. (There are some restrictions, though, including the fact that iframes must not appear close to the top of the document — refer to the AMP documentation for more information.)
However, up until now, AMP pages have not been able to use the auto-height feature we introduced last year. Our auto-height feature resizes the containing iframe so that it matches the height of your app as it changes size, including when users navigate to a new panel and when users cause fields to become visible or invisible.
The issue is that AMP pages cannot include arbitrary scripts, such as our
calcapp-iframe.js script, which enables containing iframes to be resized.
Instead, AMP requires that their own “AMP runtime” is the only script running on
(This isn’t strictly true — AMP supports running third-party scripts using the amp-script tag. This facility appears to be quite limited, though.)
Luckily, the AMP runtime supports resizing iframes, but only if the iframe in
question supports AMP explicitly. Calcapp now emits events when the height
changes, both for our own
calcapp-iframe.js library (used on regular websites)
and — as of today — for AMP.
calcapp-iframe.js supports constraining the height by setting minimum and
maximum values. This does not work for AMP. Instead, AMP itself ensures that an
iframe is not sized such that it occupies fewer than 100 vertical pixels.
Use this AMP HTML markup to embed an app you have created:
<amp-iframe width="320" height="480" sandbox="allow-scripts allow-same-origin" layout="responsive" frameborder="0" src="https://connect.calcapp.net/?app=abc123"> </amp-iframe>