What are AMP pages?
AMP is an open-source HTML framework for the uncomplicated creation of websites with short loading times that focus on the user experience. AMP pages are marked with a lightning bolt icon in Google search, and AMP stands for Accelerated Mobile Page.
Where does AMP Web Push work?
The AMP Web Push extension only works on Android smartphones and tablets. Currently, iOS devices are not supported. iOS devices generally support AMP pages but not the AMP Web-Push extension.
How does the integration of Web Push into AMP pages work?
Attention: These instructions are only for integration in AMP pages. Please ensure that the codes are installed correctly.
Create your AMP page/templates
Follow this AMP setup tutorial to create your AMP-enabled site. If you have already done this step, you can continue with the following.
Add AMP web push extensions
Add the following script to the AMP <head> section of your AMP pages. For many cases and themes, you will need to do this in the master template. Again, please make sure to do this for your AMP pages only. Your regular website must not be adapted with AMP code.
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
Configure AMP web push extension
Please download the following files (right-click, save link as) and copy them into the root directory of your website. Please unzip the PushPandaWorker.zip file before copying it to the server, and it contains a Javascript file
PushPandaWorker.js :
As a next step, please paste the following code into the AMP <body> of your page:
replace DOMAIN with the domain you registered for PushPanda
replace PID with the Project-ID, which you can find in the PushPanda backend here in your project details
<amp-web-push id="amp-web-push" layout="nodisplay"
helper-iframe-url="https://DOMAIN/amp-helper-frame.html?p=PID"
permission-dialog-url="https://DOMAIN/amp-permission-dialog.html?p=PID"
service-worker-url="https://DOMAIN/PushPandaWorker.js?p=PID"
service-worker-scope="https://DOMAIN/"
></amp-web-push>Installation of the AMP widget
Now that the configuration of AMP Web Push is complete, you can install the AMP Web Push widget at your desired position in the AMP template of your page. By installing the widget, corresponding logging-in and logging-out buttons are automatically displayed at this position. The following example illustrates this:
We recommend inserting the buttons at the end of the main content. At the beginning of the page, the buttons would distract the user from the displayed content.
Furthermore, it is also essential that the visitor identifies with the displayed content, which increases the likelihood that the visitor will subscribe to web push messages. The position at the end of the content is suitable for a good conversion.
For the widgets, the CSS definitions must first be loaded into the <head> area of the template. These instructions can be adapted according to the design specifications of the website.
<style amp-custom>
amp-web-push-widget button.subscribe {
display: flex;
align-items: center;
border-radius: 4px;
border: 0;
box-sizing: border-box;
margin: 0;
padding: 10px 15px;
cursor: pointer;
outline: none;
font-size: 15px;
line-height: 1.4em;
font-weight: 400;
background: #0be6af;
color: #333;
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 .pp-icon, amp-web-push-widget button.unsubscribe .pp-icon {
margin-right: 10px;
color: white;
}
amp-web-push-widget button.subscribe:active {
transform: scale(0.99);
}
amp-web-push-widget.amp-invisible {
display: none;
}
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);
}
</style>Next, the following code must be inserted at the point in the AMP template where the login and logout buttons are to be displayed.
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="45">
<button class="subscribe" on="tap:amp-web-push.subscribe">
<amp-img
class="pp-icon"
width="24"
height="24"
layout="fixed" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik00NjYuOTYsMzgwLjkxYy0yLjAzMy0xMC44NTctMTIuNDgzLTE4LjAwOS0yMy4zNDEtMTUuOTc0Yy0xMC44NTYsMi4wMzUtMTguMDA5LDEyLjQ4NS0xNS45NzUsMjMuMzQxDQoJCQljMS41MSw4LjA1NS0yLjAzMSwxMy43OTUtNC4yNzUsMTYuNWMtMi4yMzksMi42OTctNy4yMTUsNy4yMjMtMTUuMzgsNy4yMjNIMTA0LjM5N2MtOC4xNjUsMC0xMy4xNDEtNC41MjUtMTUuMzgtNy4yMjMNCgkJCWMtMi4yNDQtMi43MDUtNS43ODUtOC40NDUtNC4yNzUtMTYuNWM1LjY3My0zMC4yNzIsMTcuMDU2LTUwLjE4MywyOC4wNjQtNjkuNDM5QzEyNi4xNzYsMjk1LjQ1NSwxNDAsMjcxLjI3NCwxNDAsMjM0di0zMA0KCQkJYzAtNjMuMDY3LDUxLjI2My0xMTUuMDcyLDExNC4zMDItMTE1Ljk4N2gzLjc4MUMzMjAuOTA4LDg4LjkyNSwzNzIsMTQwLjkzLDM3MiwyMDR2MzBjMCwzMS43MjMsMTAuMzc3LDUzLjU1MiwyMC4xMDQsNzEuNTIzDQoJCQljMy42Miw2LjY4OCwxMC41LDEwLjQ4NCwxNy42MDYsMTAuNDg0YzMuMjE1LDAsNi40NzctMC43NzcsOS41MDItMi40MTVjOS43MTUtNS4yNTcsMTMuMzI3LTE3LjM5NSw4LjA2OS0yNy4xMDgNCgkJCUM0MTcuNjA0LDI2OC42MDIsNDEyLDI1NC4yODEsNDEyLDIzNHYtMzBjMC00MS4xNjEtMTUuOTQzLTgwLjAzNy00NC44OTQtMTA5LjQ2NkMzNDIuMjk2LDY5LjMxMiwzMTAuNDM5LDUzLjU3NCwyNzYsNDkuMjNWMjANCgkJCWMwLTExLjA0Ni04Ljk1NC0yMC0yMC0yMGMtMTEuMDQ2LDAtMjAsOC45NTQtMjAsMjB2MjkuMjg5QzE1OS41NDIsNTkuMjA5LDEwMCwxMjUuMTgxLDEwMCwyMDR2MzANCgkJCWMwLDI2LjY0Ny05LjY3Myw0My41NjYtMjEuOTE5LDY0Ljk4NmMtMTIuMDY0LDIxLjEwNC0yNS43MzksNDUuMDIzLTMyLjY1NSw4MS45MjRjLTMuMzAxLDE3LjYxNiwxLjM2OSwzNS42MjYsMTIuODEzLDQ5LjQxNA0KCQkJQzY5LjY3Myw0NDQuMSw4Ni40OTcsNDUyLDEwNC4zOTcsNDUyaDkxLjk4OWMwLDMzLjA4NCwyNi45MTYsNjAsNjAsNjBzNjAtMjYuOTE2LDYwLTYwaDkxLjYwM2MxNy45LDAsMzQuNzI1LTcuOSw0Ni4xNTgtMjEuNjc2DQoJCQlDNDY1LjU5MSw0MTYuNTM2LDQ3MC4yNjEsMzk4LjUyNiw0NjYuOTYsMzgwLjkxeiBNMjU2LjM4Nyw0NzJjLTExLjAyOCwwLTIwLTguOTcyLTIwLTIwaDQwDQoJCQlDMjc2LjM4Nyw0NjMuMDI4LDI2Ny40MTUsNDcyLDI1Ni4zODcsNDcyeiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMTA4LjM2Myw0NS4wOThjLTguMjMtNy4zNjgtMjAuODc0LTYuNjY4LTI4LjI0MSwxLjU2MkM0MS4zNTIsODkuOTcsMjAsMTQ1Ljg1LDIwLDIwNC4wMDZjMCwxMS4wNDYsOC45NTQsMjAsMjAsMjANCgkJCXMyMC04Ljk1NCwyMC0yMGMwLTQ4LjI5OCwxNy43My05NC43MDMsNDkuOTI1LTEzMC42NjdDMTE3LjI5Miw2NS4xMDksMTE2LjU5Myw1Mi40NjUsMTA4LjM2Myw0NS4wOTh6Ii8+DQoJPC9nPg0KPC9nPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik00MzEuODc4LDQ2LjY2Yy03LjM2Ny04LjIyOS0yMC4wMTItOC45MjktMjguMjQxLTEuNTYycy04LjkyOSwyMC4wMTEtMS41NjIsMjguMjQxDQoJCQlDNDM0LjI3LDEwOS4zMDQsNDUyLDE1NS43MDgsNDUyLDIwNC4wMDZjMCwxMS4wNDYsOC45NTQsMjAsMjAsMjBjMTEuMDQ2LDAsMjAtOC45NTQsMjAtMjANCgkJCUM0OTIsMTQ1Ljg1LDQ3MC42NDgsODkuOTcsNDMxLjg3OCw0Ni42NnoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==">
</amp-img>
Benachrichtigungen erhalten</button>
</amp-web-push-widget>
<amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="45">
<button class="unsubscribe" on="tap:amp-web-push.unsubscribe">
Benachrichtigungen abmelden</button>
</amp-web-push-widget>This code can also be adapted to the requirements. It is important that the on="tap:amp-web-push.subscribe" property is set for both buttons within the <amp-web-push-widget>. If this is forgotten, the buttons will not work:
Login button
<amp-web-push-widget ....>
<button .... on="tap:amp-web-push.subscribe">Logoff button
<amp-web-push-widget ....>
<button .... on="tap:amp-web-push.unsubscribe">👍 Once these points are completed, your page is AMP web push ready.