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:

  1. 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.
  2. 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:

  1. 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:

  1. 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>
    
  2. 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:

  1. 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>
    
  2. 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>
    
  3. 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; }
  4. 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>.

Start your free trial now

Non-binding test phase, ends automatically after 30 days
Cookie consent by Real Cookie Banner