Setup AMP Web Push – CleverPush

If you use AMP (Accelerated Mobile Pages) for your site, and really only then, we will show you in this guide how you still do not have to do without web push notifications. You can also get push entries from AMP users.

3 steps are necessary for this.

1. Embed Web Push Script

Include the official amp-web-push script inside your <head>:

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

2. Insert Web Push Element

For HTTPS Sites:

cleverpush-amp-helper-frame.html and cleverpush-amp-permission-dialog.html should be downloaded and uploaded to any directory in your site, we recommend the root directory. The files have to lie in the same directory as the cleverpush-worker.js file.

Add this code on any place within your <body> of the AMP code:

<amp-web-push
    id="amp-web-push"
    layout="nodisplay"
    helper-iframe-url="https://DOMAIN.COM/cleverpush-amp-helper-frame.html"
    permission-dialog-url="https://DOMAIN.COM/cleverpush-amp-permission-dialog.html"
    service-worker-url="https://DOMAIN.COM/cleverpush-worker.js"
  >
</amp-web-push>

(DOMAIN.COM should be replaced with your AMP site's domain)

For HTTP Sites:

Folgenden Code an einer beliebigen Stelle im <body> des AMP Quelltexts einfügen:

<amp-web-push
    id="amp-web-push"
    layout="nodisplay"
    helper-iframe-url="https://SUBDOMAIN.cleverpush.com/amp-helper-frame"
    permission-dialog-url="https://SUBDOMAIN.cleverpush.com/amp-permission-dialog"
    service-worker-url="https://SUBDOMAIN.cleverpush.com/worker.js"
  >
</amp-web-push>

(SUBDOMAIN should be replaced with the subdomain from your channel settings)

3. Insert opt-in widget

So that the user can now also register for the push messages, at least one of our widgets must be installed.
There are 2 variants that can also be used in combination:

Variant 1: Button widget
Variant 2: Overlay Widget (Beta)

Button Widget:

Add the following code within the <head> of your site. If a <style amp-custom> tag already exists, add the styles to the existing tag. You can of course customize the styles to match your branding.

<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 .subscribe-icon {
  margin-right: 10px;
}

amp-web-push-widget button.subscribe:active {
  transform: scale(0.99);
}

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>

Insert the following code where the opt-in button should appear (we recommend after the content of the article and before the comments):

<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
  <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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTUuMTM3IDMuOTQ1Yy0uNjQ0LS4zNzQtMS4wNDEtMS4wNy0xLjA0LTEuODJ2LS4wMDNjMC0xLjE3Mi0uOTM5LTIuMTIyLTIuMDk3LTIuMTIycy0yLjA5Ny45NS0yLjA5NyAyLjEyMnYuMDAzYy4wMDEuNzUxLS4zOTYgMS40NDYtMS4wNDEgMS44Mi00LjY2NyAyLjcxMi0xLjk4NSAxMS43MTUtNi44NjIgMTMuMzA2djEuNzQ5aDIwdi0xLjc0OWMtNC44NzctMS41OTEtMi4xOTUtMTAuNTk0LTYuODYzLTEzLjMwNnptLTYuNzI4IDEyLjA1NWgtMS44ODJjMS4yNDUtMi43NDEuODc5LTkuMDEyIDMuODczLTEwLjY1NS0xLjc2MSAyLjA2Ny0uOTUgNy41MDQtMS45OTEgMTAuNjU1em0zLjU5MS0xM2MtLjU1MiAwLTEtLjQ0OC0xLTEgMC0uNTUxLjQ0OC0xIDEtMXMxIC40NDkgMSAxYzAgLjU1Mi0uNDQ4IDEtMSAxem0tMyAxOGg2YzAgMS41OTgtMS4zOTMgMy0yLjk3MSAzLTEuNTc5IDAtMy4wMjktMS40MDItMy4wMjktM3oiIGZpbGw9IiNmZmZmZmYiIC8+PC9zdmc+">
    </amp-img>
    Enable notifications
  </button>
</amp-web-push-widget>

<amp-web-push-widget visibility="subscribed" layout="fixed" width="230" height="45">
   <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">Disable notifications</button>
</amp-web-push-widget>

(SUBDOMAIN should be replaced with the subdomain from your channel settings)

Overlay Widget:

If amp-script is not being used already, add this script to your <head>:

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

If amp-bind is not being used already, add this script to your <head>:

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

Insert the following code within the <head> of your page. If there is already a <style amp-custom> tag, please add the following styles within the existing style tag. You can customize the styled to match your branding, of course.

.cleverpush-btn {

position: fixed;

z-index: 2;

bottom: 60px;

left: 20px;

background-color: #fa6909;

width: 48px;

height: 48px;

border-radius: 50%;

border: 0;

outline: none;

display: flex;

align-items: center;

justify-content: center; }

.cleverpush-unsubscribe {

opacity: .6;

width: 32px;

height: 32px; }

.cleverpush-confirm {

left: 10px;

right: 10px;

padding: 15px;

bottom: 0;

position: fixed;

background-color: #fff;

border-top-left-radius: 15px;

border-top-right-radius: 15px;

box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); }

.cleverpush-confirm-title {

font-size: 17px;

font-weight: bold;

margin-bottom: 5px; }

.cleverpush-confirm-text {

font-size: 14px;

margin-bottom: 10px;

color: #555; }

.cleverpush-confirm-buttons {

display: flex;

align-items: center;

margin-top: 15px; }

.cleverpush-confirm-button {

color: #555;

background-color: transparent;

padding: 10px;

width: 50%;

margin-right: 5px;

text-align: center;

border: none;

font-size: 16px;

font-weight: bold;

cursor: pointer;

border-radius: 5px; }

.cleverpush-confirm-button:hover {

opacity: 0.9; }

.cleverpush-confirm-button-allow {

background-color: green;

color: #fff;

margin-left: 5px;

margin-right: 0; }

amp-consent {

background: none; }

Insert the following code at the top within <body> of your page and replace CHANNEL_ID with your channel ID:

    <amp-script layout="fixed-height" height="1" src="https://static.cleverpush.com/channel/amp/CHANNEL_ID.js">
        <div>&nbsp;</div>

        <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="300" height="300" hidden [hidden]="cleverpushConfirmVisible != true">
            <div class="cleverpush-confirm">
                <div class="cleverpush-confirm-title">Enable push notifications</div>

                <div class="cleverpush-confirm-text">Can be disabled at any time in the browser settings</div>

                <div class="cleverpush-confirm-buttons">
                    <button id="cleverpush-button-deny" class="cleverpush-confirm-button" on="tap:AMP.setState({cleverpushConfirmVisible: false})">
                        No, thanks
                    </button>
                    
                    <button id="cleverpush-button-allow" class="cleverpush-confirm-button cleverpush-confirm-button-allow" on="tap:amp-web-push.subscribe">
                        Enable
                    </button>
                </div>
            </div>
        </amp-web-push-widget>
    </amp-script>

Due to the limitations of the total amp-script sizes on one page, we will always try to keep the script as small as possible, currently it is <1KB in size.
Hints:
1. If the <amp-script tag is not built into the body at the top, AMP may not load it until it comes into the visible area. We therefore recommend installing it as high up as possible.
2. At best, the integrated amp-script is hosted locally so that no amp-script hash has to be placed in the <head>.