amp-user-notification

Edit on Github
Open in Playground

Introduction

Use amp-user-notification to display a dismissable notification to the user. Use this to implement a dialog to notify users about cookies.

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, default css class will put the amp-user-notification element in the left bottom corner.

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

</style>

Using Local Storage

When the user agrees to the cookies policy, the status is saved in the local storage.

Example

This is an amp-user-notification. It uses local storage to store the dismissed state.
<amp-user-notification layout="nodisplay"
  id="amp-user-notification1">
  This is an amp-user-notification. It uses local storage to store the dismissed state.
  <button on="tap:amp-user-notification1.dismiss"
    class="ampstart-btn caps ml1">I accept</button>
</amp-user-notification>