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
AMP pages.
(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.
By default, iframes created through AMP use a “sandbox,” which restricts what the iframe can do. As apps created through Calcapp use JavaScript pervasively, you must set a special attribute allowing for scripts to run.
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>