AMP Web Push

Implement web push notifications on AMP web pages

To integrate our web push notifications tool on your page you need:

And the following files:

⚠️

if the links of AMP website are broken, you can download these versions of our storage: AMP html push files

Integration

  • Developers compose widgets that appear based on a user's subscription state. Widgets are composed of AMP elements and can be as simple as a button or a text link.
  • Clicking the subscription widget pops up a page prompting the user for notification permissions and signals the service worker (configured below) to subscribe the user to push in the background. Clicking the unsubscription widget signals the worker to unsubscribe the user from push in the background.
<amp-web-push-widget
  visibility="unsubscribed"
  layout="fixed"
  width="250"
  height="80"
>
  <button on="tap:amp-web-push.subscribe">Subscribe to Notifications</button>
</amp-web-push-widget>

<!-- An unsubscription widget -->
<amp-web-push-widget
  visibility="subscribed"
  layout="fixed"
  width="250"
  height="80"
>
  <button on="tap:amp-web-push.unsubscribe">
    Unsubscribe from Notifications
  </button>
</amp-web-push-widget>

Configuration

The amp-web-push component requires extra integration on your site. You will need to upload two HTML files (provided) on your site as well as an amp-web-push compatible service worker JavaScript file. These three files form the configuration described below.

<head>
   <script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
</head>

<amp-web-push
  layout="nodisplay"
  helper-iframe-url="https://example.com/helper-iframe.html"
  permission-dialog-url="https://example.com/permission-dialog.html"
  service-worker-url="https://example.com/worker-amp.min.js?appKey=YOUR_APP_KEY"
></amp-web-push>

All properties are required, and all URLs must begin with the same origin (e.g. https://example.com).

On service worker params, you have the following options:

appKey: your personal appKey

🚧

The appKey value is unique and personal. You can get it by accessing your account> settings> App Key value

Custom Initialization

<head>
   <script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
</head>

<amp-web-push
  layout="nodisplay"
  helper-iframe-url="https://example.com/helper-iframe.html"
  permission-dialog-url="https://example.com/permission-dialog.html"
  service-worker-url="https://example.com/service-worker-amp.js?appKey=YOUR_APP_KEY&logLevel=LOG_LEVEL&urlDeviceApi=YOUR_DOMAIN"
></amp-web-push>

logLevel: INFO/DEBUG/WARNING/ERROR. We recommend DEBUG level.

urlDeviceApi: if you are ENTERPRISE CUSTOMER you have to add this parameter in the configuration so that the SDK points to the correct environment.