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>
  /* Center the notification content */
  amp-user-notification > div {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</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 id="my-notification"
  layout="nodisplay">
  <div>This is an amp-user-notification. It uses local storage to store the dismissed state.
    <button on="tap:my-notification.dismiss"
      class="ampstart-btn caps ml1">I accept</button>
  </div>
</amp-user-notification>