- Google AMP - Discussion
- Google AMP - Useful Resources
- Google AMP - Quick Guide
- Google AMP - Cors
- Google AMP - Custom Javascript
- Google AMP - Caching
- Google AMP - Validation
- Google AMP - Basic Syntax
- Html Page To Amp Page
- Google AMP - Media
- Google AMP - Social Widgets
- Google AMP - Analytics
- Google AMP - ADS
- Google AMP - Layout
- Google AMP - Data Binding
- Google AMP - Animations
- Google AMP - Actions And Events
- Google AMP - Dynamic CSS Classes
- Styles And Custom CSS
- Google AMP - Attributes
- Google AMP - Next Page
- Google AMP - User Notification
- Google AMP - List
- Google AMP - Font
- Google AMP - Link
- Google AMP - Selector
- Google AMP - Story
- Google AMP - Date Picker
- Google AMP - Date Countdown
- Google AMP - Fit Text
- Google AMP - Mathml
- Google AMP - Timeago
- Google AMP - Button
- Google AMP - Video
- Google AMP - Iframes
- Google AMP - Form
- Google AMP - Images
- Google AMP - Introduction
- Google AMP - Overview
- Google AMP - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
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"> <span>Example of amp-user-notification. <button on = "tap:my-notification.dismiss">I accept </button> </span> </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> <pnk 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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty: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> span { 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"> <span>Example of amp-user-notification. <button on = "tap:my-notification.dismiss">I accept </button> </span> </amp-user-notification> </body> </html>
Output
The output of the working example code given above is as shown below −
![Amp Font User Notification](/google_amp/images/amp_font_user_notification.jpg)
Once the user cpcks 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