amp-app-banner provides a minimal UI for a cross-platform, fixed-position banner showing a call-to-action to install an app. In particular,
amp-app-banner works inside an AMP viewer such as the Top Stories carousel in Google Search. Outside of the AMP viewer, the native app banners will be displayed instead of
amp-app-banner in Safari on iOS and in Chrome on Android.
<script async custom-element="amp-app-banner" src="https://cdn.ampproject.org/v0/amp-app-banner-0.1.js"></script>
Declare the iOS app in the meta data. This enables Safari's build-in app install banner as well.
Deep links into your apps are calculated based on your AMP's canonical link. Here we link to an article on Medium as we don't have a native AMP by Example app.
amp-app-banner can be fully customized by the developer as long as the height doesn't exceed 100px. One required UI element is a button with the attribute
[open-button], which triggers the app install, or opens the deep-link if the app is already installed.
<amp-app-banner layout="nodisplay" id="my-app-banner"> <amp-img src="https://cdn-images-1.medium.com/max/50/1*JLegdtjFMNgqHgnxdd04fg.png" width="50" height="43" layout="fixed"></amp-img> <div class="banner-text">Learn more in the app.</div> <button open-button>View in app</button> </amp-app-banner>
The custom app banner shows up in AMP Viewers. The banner action opens the document's canonical URL as deep-link inside the app:
<amp-video width="1920" height="1080" src="/video/amp-app-banner-android-app-installed.mp4" layout="responsive" controls> </amp-video>
...and if the app is not installed, the banner action shows the app in the Play Store / App Store:
<amp-video width="1920" height="1080" src="/video/amp-app-banner-android-app-not-installed.mp4" layout="responsive" controls> </amp-video>
amp-app-banner will only show in browsers that don't provide their own app install banner. This means Chrome on Android or Safari on iOS will not show the
amp-app-banner, but the native install banner. For testing
amp-app-banner you can open this page:
- On a mobile device: in browser without native install banner, e.g. Firefox on Android or Chrome on iOS.
- On Desktop: in mobile device emulation mode append
#webview=1to the page URL. The other option is to use a custom user agent in mobile emulation mode, for example:
Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) CriOS/51.000.21 Mobile/13B143 Safari/601.1
If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.Go to Stack Overflow An unexplained feature?
The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.Edit sample on GitHub
Written by @juliantoledo