amp-user-notification with Server Endpoint

Edit on Github
Open in Playground

Introduction

Use amp-user-notification to display a dismissable notification to the user. Combine it with a server endpoint if you want to store the dismissal state across your AMP articles and your normal articles.

Setup

Import amp-user-notification in the header.

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

amp-user-notification requires amp-analytics to be imported as well.

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

Specify any additional css, by default, the amp-user-notification is positioned in the left bottom corner.

<style amp-custom>
  footer {
    margin-bottom: 50px;
  }
  amp-user-notification {
    padding: 8px;
    background: beige;
  }
</style>

Using Backend service

When using a backend solution, two parameters are available: data-show-if-href and data-dismiss-if-href. They can be used together or separatively.

data-show-if-href needs to point to a server-endpoint returning { "showNotification": true|false }.

The URL defined by data-dismiss-href will be called when the notification is dismissed.

You can find a sample implementation here.

If the notification has already been dismissed and the related item has been added to the localstorage, the notification will not appear even if you have configured data-show-if-href and data-dismiss-href.

Example

This is an amp-user-notification. It uses a backend service to verify if the notification has to be shown.
<amp-user-notification layout="nodisplay"
  id="amp-user-notification1"
  data-show-if-href="https://rocky-sierra-1919.herokuapp.com/amp-user-notification/api/show?timestamp=TIMESTAMP"
  data-dismiss-href="https://rocky-sierra-1919.herokuapp.com/amp-user-notification/api/echo/post">
  This is an amp-user-notification. It uses a backend service to verify if the notification has to be shown.
  <button on="tap:amp-user-notification1.dismiss"
    class="ampstart-btn caps ml1">I accept</button>
</amp-user-notification>