Google AMP - User Notification

Google amp-user-notification is used to show dismissible dialog box messages to the user. We can use it to notify user about cookies on the page.

To work with amp-user-notification we need add following script on the page −

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

Amp-user-notification tag format −

<amp-user-notification id = "my-notification" layout = "nodisplay">
   <div>Example of amp-user-notification. 
      <button on = "tap:my-notification.dismiss">I accept
      </button>
   </div>
</amp-user-notification>

Let us understand the amp-user-notification using a working example −

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Selector</title>
      <link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
      <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>
   
      <script async custom-element = "amp-user-notification" 
         src = "https://cdn.ampproject.org/v0/amp-user-notification-0.1.js">
      </script>
   
      <style amp-custom>
         div {
            font-size: 15px;
            background-color : #ccc;
            padding: 10px 10px;
            border-radius: 2px;
         }
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            cursor: pointer; 
            float: right;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp User Notification</h3>
      <amp-user-notification
         id = "my-notification"
         layout = "nodisplay">
         <div>Example of amp-user-notification. 
            <button on = "tap:my-notification.dismiss">I accept
            </button>
         </div>
      </amp-user-notification>
   </body>
</html>

Output

The output of the working example code given above is as shown below −

Amp Font User Notification

Once the user clicks the button, the notification is dismissed. Once dismissed, the notification will not be displayed even if you reload the page.

The data of the user notification is stored in the browser localStorage.If the localstorage is cleared and the page is refreshed, you will be able to see the notification again. You can try the same using localStorage.clear() in the browser console.

Using dismiss action the notification can be dismissed, by using the action on a button as follows

<button on = "tap:my-notification.dismiss">
   I accept
</button>

When user taps on the button the notification will be dismissed.

Advertisements