AMP Web Push
Implement web push notifications on AMP web pages
AMP pages support mobile web pushes on Android devices only.
AMP is an open-source Google framework for developing user-first web pages loading nearly instantaneously.
Integrating the AMP Web Push component into your AMP web pages, you can reach out to your customers when they’re surfing the web on their mobile browsers.
Add the following files to your website’s root directory:
There are two customizable blocks in the
permission-dialog.html file: Subscribe to push notifications
<div class="subscribe" permission="default">
<p class="message">
{Subscribe to push notifications}
</p>
</div>
Unblock push notifications
<div class="blocked" permission="denied">
<p class="message">
{Unblock push notifications in your browser settings}
</p>
</div>
Where:
- {Subscribe to push notifications} — a CTA message asking users to allow push notifications;
- {Unblock push notifications in your browser settings} — a CTA message prompting users to unblock push notifications in their browser settings (in case push notifications are explicitly blocked by a user).
To customize the permission dialog appearance, add the following code to the
<head> tag: <style amp-custom>
.subscribe {
/* your css here */
}
.blocked {
/* your css here */
}
</style>
Permission dialog
To do so, follow these two steps:
1. Add the following script to the
<head> tag: amp-web-push
<head>
...
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
...
</head>
2. Add the following code to the
<body> tag: amp-web-push
<body>
<amp-web-push
id="amp-web-push"
layout="nodisplay"
helper-iframe-url="https://{domain}/helper-iframe.html"
permission-dialog-url="https://{domain}/permission-dialog.html"
service-worker-url="https://{domain}/service-worker.js?applicationCode={applicationCode}&senderId={senderId}&applicationServerKey={applicationServerKey}"
></amp-web-push>
...
<!-- Start Subscribe to notifications button -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
<button class="subscribe" on="tap:amp-web-push.subscribe">
{Text on Subscribe button}
</button>
</amp-web-push-widget>
<!-- End the Subscribe to notifications button -->
<!-- Start Unsubscribe from notifications button -->
<amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
<button class="unsubscribe" on="tap:amp-web-push.unsubscribe">
{Text on Unsubscribe button}
</button>
</amp-web-push-widget>
<!-- End Unsubscribe from notifications button -->
<!-- Start Fallback if a user blocks notifications -->
<amp-web-push-widget visibility="blocked" layout="fixed" width="250" height="80">
<div class="fallback">
{Fallback if a user blocks notifications}
</div>
</amp-web-push-widget>
<!-- End Fallback if a user blocks notifications -->
...
</body>
Where:
- {domain} — your website URL,
- {applicationCode} — your Pushwoosh app code,
- {senderId} — Sender ID from your Firebase console,
- {applicationServerKey} — Server Key from your Firebase console,
- {Text on Subscribe button} — a text on a button enabling push notifications,
- {Text on Unsubscribe button} — a text on a button disabling push notifications,
- {Fallback if a user blocks notifications} — a fallback block that is displayed when a user blocks push notifications.
To customize buttons’ style, add the following code to the <head> tag:
<style amp-custom>
amp-web-push-widget button.subscribe {
/* your css here */
}
amp-web-push-widget button.unsubscribe {
/* your css here */
}
amp-web-push-widget .fallback {
/* your css here */
}
</style>