AMP by Example




Samples & Templates
Samples & Templates

AMP for Ads (A4A)
AMP for Ads (A4A)

View Source

amp-user-notification with Server Endpoint


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.

Show Hidden Code Hide Code
<!doctype html>
<html ⚡>
  <meta charset="utf-8">
  <script async src=""></script>


Import amp-user-notification in the header.

  <script async custom-element="amp-user-notification" src=""></script>

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

  <script async custom-element="amp-analytics" src=""></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;
Show Hidden Code Hide Code
  <link rel="canonical" href="">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

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.

  <amp-user-notification layout=nodisplay
    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">I accept</button>
This is an amp-user-notification. It uses a backend service to verify if the notification has to be shown.