Step 1: Install the WordPress plugin

Navigate to “Plugins -> Install” in WordPress

Then enter “CleverPush” in the search at the top right. Install and activate the CleverPush plugin.

Step 2: Enter API data

Then navigate in WordPress to “Settings -> CleverPush”

Enter the API access data, which can be found in the CleverPush Backoffice under Settings -> API and save them.

Then select the desired channel from the drop-down menu and save again.

When new posts are published, you can now also send push notifications via the sidebar with a click on the right.

Step 3: Place files

f your website runs over HTTPS, please navigate to Channels -> (select channel) in your CleverPush back office.

There you will find the operating mode setting. Set this option to Own Domain (HTTPS).

The cleverpush-worker.js file can then be downloaded by clicking on the button.

This file must now be placed in the main directory of your web server. So it should be available at https://your-domain.com/cleverpush-worker.js.

Der Beitrag How to use the CleverPush WordPress Plugin erschien zuerst auf CleverPush.

Der Beitrag How can my visitors unsubscribe from notifications? erschien zuerst auf CleverPush.

In the panel, which opens with registered users with a click on the bell, the subscriber can view the latest notifications and manage basic settings, such as the subscribed subject areas. Even an event is possible with just a few clicks.

Various settings for the bell can be made in the channel settings:

Now you can use the bell as a smart and user-friendly interaction option with your push message system.

Der Beitrag Customize Notification Bell erschien zuerst auf CleverPush.

Displaying the confirmation message about your own domain has many advantages:

• Sent notifications run entirely through their domain, the user does not see a CleverPush subdomain
• Higher opt-in rates, as users need less clicks

Please note that previously collected subscribers can not be “transferred” to the new domain. Of course, you will still be able to post messages to them, however, the CleverPush subdomain will continue to appear with these users.

You should also note that a redirect from HTTP to HTTPS should be set up on your site, as it can cause problems with CleverPush in parallel operation.

If your not page is over HTTPS, we can give you the DNS provider CloudFlare, which will provide you with a free HTTPS certificate on your site. If you have any questions about DNS conversion, contact your domain provider / web host.

Setup

If your website is using HTTPS, please navigate to CleverPush Backoffice -> Channels -> (Select channel).

You will find the Operation Mode setting there. Set this option to My Domain (HTTPS).

The file cleverpush-worker.js can be downloaded now by clicking the button.

The file must now be placed in the root directory of your web server. So it should be reachable at https://your-domain.com/cleverpush-worker.js.

Note: If you do not have the option to put the file in the main directory of your web page, you can set your own file paths under the operating mode setting.

This completes setting up your own domain on CleverPush.

Der Beitrag How can I use my own domain? erschien zuerst auf CleverPush.

Requirements – if not already done:

1. Create a user account at cleverpush.com/register
2. After logging in, create a channel with the type “Website”

Implementation

1. Please navigate to Channels -> (select channel) in your CleverPush back office.
2. There you will find the operation mode setting. Set this option to Own Domain (HTTPS).
3. The cleverpush-worker.js file can then be downloaded by clicking the button.
4. This file must now be placed in the main directory of your web server. So it should be available at https://your-domain.com/cleverpush-worker.js.Note: If you do not have the option of placing the file in the main directory of your website, you can define your own file paths under the operating mode setting.
   
5. Now only the CleverPush Javascript snippet has to be integrated. The code for this is available in the channel settings in the sidebar under “Implementation”.This can be done in the <head> or in the <body> area of ​​the page.
   Google Tag Manager is also possible (with occasional ad blockers blocking the entire GTM code).
   1. In the Google Tag Manager, our Javascript code can easily be inserted as a “user-defined HTML tag”.
      

Troubleshooting – opt-in does not work:

• Can the worker file be reached with the correct MIME type?
  • cleverpush-worker.js (application/javascript)
• Are you installing your own ServiceWorker yourself in parallel? There are 2 options:
  • Integrate the line of code from cleverpush-worker.js in your ServiceWorker and adapt the file path accordingly to your ServiceWorker
  • Install the CleverPush Worker in a different subdirectory
• When using your own file paths:
  • Paths should usually begin with a slash and do not contain any domains or protocols
  • Paths are absolute and not relative

If you have any further problems, please contact our support.

Der Beitrag Technical implementation of CleverPush in Websites erschien zuerst auf CleverPush.

Der Beitrag Which browsers does CleverPush support? erschien zuerst auf CleverPush.

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. 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)
5. 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>.

Der Beitrag Setup AMP Web Push erschien zuerst auf CleverPush.