| info |
AMP Web Push Integration Prerequisites
|
AMP Web Push
Web Push Notification does not work by using the MoEngage Web SDK and serviceworker.js.
Google has recently published a separate plugin to support the integration that enables News Publishers, Bloggers, or anyone who uses AMP to deliver their webpages quickly by encouraging users to subscribe using Push Notification.
| info |
Note Only Android devices are supported. |
Follow these steps to integrate AMP Web Push:
Add AMP Web Push script
Add this line in the <head> section of your .amp file where you want to use Web Push.
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
Add Helper files
Download the files corresponding to the dashboard you are using and ensure the files are available in the root directory of your website. Right-click and click Save Link as... to save the files:
| Dashboard host | Files |
| dashboard-01.moengage.com | |
| dashboard-02.moengage.com | |
| dashboard-03.moengage.com | |
| dashboard-04.moengage.com |
Add Code
Add the following code inside <body> tag:
<amp-web-push
id="amp-web-push"
layout="nodisplay"
helper-iframe-url="https://DOMAIN.COM/amp-helper-frame.html"
permission-dialog-url="https://DOMAIN.COM/amp-permission-dialog.html"
service-worker-url="https://DOMAIN.COM/serviceworker_amp.js?app_id=Workspace_ID"
></amp-web-push>Replace the following:
- DOMAIN.COM with your actual domain.
- Workspace ID available at MoEngage Dashboard > Settings > General.
| info |
Note Ensure all files are available at the same source path and suffixed with HTTPS. |
Add the Subscribe or Unsubscribe Buttons
Subscribe / Unsubscribe buttons or Amp Web Push Widgets are needed to subscribe or unsubscribe the user from AMP Web Push Notifications.
The following code adds the subscribe or unsubscribe buttons:
<div class="web-push">
<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="45">
<button class="subscribe" on="tap:amp-web-push.subscribe">Subscribe to Notifications</button>
</amp-web-push-widget>
<!-- An unsubscription widget -->
<amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="45">
<button class="unsubscribe" on="tap:amp-web-push.unsubscribe">Unsubscribe from Notifications</button>
</amp-web-push-widget>
</div>
Use <button> or <a> with on="tap:amp-web-push.subscribe" for the button to work. You can:
- Modify the exact call to action of the button.
- Use your own text or leave it as it is.
Style the Widgets using the code in CSS
Subscribe or Unsubscribe widget layout is fixed. However, you can design the button and layout by modifying the CSS. The default CSS is:
<style amp-custom>
amp-web-push-widget button.subscribe {
display: inline-flex;
align-items: center;
border-radius: 2px;
border: 0;
box-sizing: border-box;
margin: 0;
padding: 10px 15px;
cursor: pointer;
outline: none;
font-size: 15px;
font-weight: 400;
background: #4A90E2;
color: white;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
amp-web-push-widget button.subscribe:active {
transform: scale(0.9);
}
amp-web-push-widget button.unsubscribe {
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
border: 0;
margin: 0;
cursor: pointer;
outline: none;
font-size: 15px;
font-weight: 400;
background: transparent;
color: #B1B1B1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-color: #eee;
border-radius: 2px;
}
amp-web-push-widget button.unsubscribe:active {
transform: scale(0.9);
}
</style>