Search…
AMP Support
You may also prompt your visitors for Web Push permissions via AMP pages.

Download the following files:
In the pushly-amp-helper-frame.html and pushly-amp-permission-dialog.html files replace the REPLACE_WITH_DOMAIN_KEY placeholder text with the Domain Key from the platform.
Place all 3 files in a publicly accessible directory on the domain for which you are going to opt-in visitors.

Include the following script tag on your AMP pages in the HTML head section. Ensure that the AMP page does not include the main Pushly SDK snippet.
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>

Include the following `amp-web-push` tag within the HTML body on your AMP pages.
Ensure the URLs to each of the files placed in Step 1 are accurate in the final snippet.
<amp-web-push
id="amp-web-push"
layout="nodisplay"
helper-iframe-url="https://www.example.com/pushly-amp-helper-frame.html"
permission-dialog-url="https://www.example.com/pushly-amp-permission-dialog.html"
service-worker-url="https://www.example.com/pushly-sdk-worker.js"
></amp-web-push>

Add the following code blocks to the page wherever you want the subscribe and unsubscribe widgets to show.
We recommend placing these widgets between article paragraphs and/or at the bottom of each article.

<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="245" height="45">
<button class="subscribe" on="tap:amp-web-push.subscribe">
<amp-img
class="subscribe-icon"
width="24"
height="24"
layout="fixed"
src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=">
</amp-img>
Subscribe to updates
</button>
</amp-web-push-widget>

<amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
<button class="unsubscribe" on="tap:amp-web-push.unsubscribe">Unsubscribe from updates</button>
</amp-web-push-widget>

You may customize the CSS and widgets as long as you ensure the amp-web-push-widget and subscribe/unsubscribe buttons exist.
Copy link
On this page
Integration Steps
Step 1: Download & Place Required Files
Step 2: Include the AMP Project Javascript
Step 3: Include the `amp-web-push` component
Step 4: Add Widgets
Customization