Setup AMP Web Push

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; }

Download the following script and make it available on your site: https://static.cleverpush.com/channel/amp/CHANNEL_ID.js (replace CHANNEL_ID with your channel ID)

Insert the following code at the top within
<body> of your page:

    <amp-script layout="fixed-height" height="1" src="/cleverpush/cleverpush-amp.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>.