Customization and optimizations of the opt-in process

Overview

You can collect opt-in users from any website, any domain or subdomain (such as yourwebsite.comyourwebsite.de, or shop.yourwebsite.com…), whether http or https, and have a unified database for your Web Push Notification messages.

In order to send Web Push Notifications to your website users, you first need to obtain their permission (‘opt-in’). We call the whole procedure to obtain user permission, the ‘opt-in process’.

This process has a strong impact on the volume of opt-in users.

Before explaining how to customize the opt-in process, we want to make you familiar with it and the different steps.

The user permission to send Web Push Notifications is obtained via a browser permission message, which is not customizable. It has a set design and wordings are decided by the browser.

Accengage provides you with 2 opt-in process :

  • One is done on the Accengage's domain (or a custom domain):
    • the opt-in process will be done through the Accengage's domain (or a custom domain) and users will be ask to opt-in through a landing page which, when displayed, will call the browser's native permission
    • This optinization process is available for websites in HTTP and HTTPs
    • Check out this documentation  to implement it
  • The other is done directly on your own domain :
    • the opt-in process will be done through your own domain and the browser's permission will be called directly without the display of a landing page (but you can set up one if needed)
    • to use this method you must integrate our SDK 3.3.x and activate this optinization method in your Accengage dashboard
    • this optinization process is available only for websites in HTTPs
    • Please, check out our FAQ to know how to implement this new process !

Through Accengage domain or a custom one

Also, once the users have answered to this permission request (either with ‘allow’ or ‘block’), you will not be able to ask this permission again. If users have denied them previously, the only way users can allow them again, is to go through the browser settings... Not ideal !

For this reason, Accengage recommends to first ask the user for its intention, with a customizable, full-html and attractive message (which is called ‘Alert’), and then, once the user has expressed will allow Web Push Notifications, to trigger the native browser permission.

If the user does not express its intent to allow Web Push Notifications, then the permission will not be triggered, which allows you to ask for permission at a later stage. This is a great way to achieve better opt-in performance than by just triggering the native browser permission.

The Accengage Web SDK provides a Pop-in ‘Alert’ by default, with numerous options for it to be customized simply (see the ‘basic customization’ paragraph). But Accengage also provides a library of more advanced and efficient scenarios, such as interstitial, full-length banners, buttons… (see the ‘advanced scenarios’ paragraph).

We highly recommend you to customize the ‘opt-in’ process, as this can enhance significantly opt-in results.


Also, as Web Push Notification permission can only be triggered on HTTPS websites, and users must give their permission for each domain or subdomain which want to send Web Push Notifications, Accengage has developed a solution to ease the process.

This solution consists of the following:

  • Once the users have expressed their intention to accept Web Push Notifications through the ‘Alert’
  • A new Window is opened and displays an HTTPS landing page, with a unique MASTER DOMAIN (provided by Accengage)
  • In this landing page, the native browser permission is prompted (see below)
  • Once the permission is granted, the landing page registers the user to the Web Push Notifications and communicates all relevant information to Accengage.


As a result, you can collect opt-in users from any website, any domain or subdomain (such as yourwebsite.comyourwebsite.de, or shop.yourwebsite.com…), whether http or https, and have a unified database for your Web Push Notification messages.

See below an illustrated example used on our website in which we have customized some steps:

Through your own domain

Starting from version 3.3.x of the SDK Push Web, Accengage allows you to ask for the opt-in through your own domain name.

This optout-to-optin process will follow these requirements : a link in your page > display of the browser's native permission

In order to benefit this process we recommend you to follow these steps after each other :

(1/3) Edit the version number of your application :

To get access to the new opt-in process of the SDK Web you should set your application version to 3.3.x.

To do so, please go into your Accengage Dashboard : Settings > Manage application > Edit > Field Version : change it to our last version available "v3.3.x"

Click on "Save".

Changes will take approximately half an hour before getting live.

(2/3) Download and host to your web server the mandatory files :

Once you've upgraded the version number of your application, to operate the new opt-in process needs a zip file to be downloaded from our interface.

To download the zip file, please go to our interface > Settings > Manage Application > Click on the download icon at the right :

Once you've downloaded the ZIP file, you should extract files from this ZIP. You should obtain 3 files :

  • acc_sw.js
  • acc_ww.js
  • manifest.json

Once extracted, before going to the next step, please upload those files to the root directory of your website.

The files "acc_sw.js" and "acc_ww.js" will be called by the SDK and the file "manifest.json" just has to be referenced in the pages where the snippet will be present.

 

The optinization on your own domain needs a service worker running on your domain to operate (acc_sw.js)

If you already host a service worker on your website, you'll have to merge the Accengage one with yours.

To do so, add the lines below at the end of your service worker script :

var swURI = 'https://' + this.location.hostname + '/acc_sw.js';
importScripts(swURI);

(3/3) Enable optin on your own domain name :

Finally to set up the opt-in process you should enable it through the Accengage dashboard and the "modify web application" modal screen, to do so please go to our interface > Settings > Manage Application > Edit your Web App > check "Use my own domain name"

Requesting directly the browser's native permission

Starting from SDK 3.3.x, Accengage gives you different ways to ask a user to opt-in:

  • Display the pop-in alert (called showAlert) and then the browser's native permission (2 steps)

or

  • Display the browser's permission when a user clicks on a specific link of your website
  • Display the browser's permission when a user opens specific pages (1 step)

or

  • Display the browser's permission when a user clicks on a specific link of your website

What are the benefits of each process ?

  • Pop-in alert :

It allows you to explain the benefits of your web push notification to the user.

It can be customized to match with you're website appareance.

Your optin process will contain 2 steps - more details in the section "3.2.1 Edit the JSON plugin configuration"

  • Display the browser's native permission on specific pages :


You can display automatically the browser's native permission when a user opens a specific page of your website with your own domain name.

To use this scenario you have to :

  1. Edit your JSON configuration on the Accengage Dashboard and set your scenario as "none" (it will prevent the display of the pop-in alert) - more details in the section "3.2.1 Edit the JSON plugin configuration" .
  2. Add the snippet on every page in which you want to display the browser's permission a. You want to ask the permission everywhere except page X ? Then add the snippet everywhere except page X. b. You want to ask the permission only on page Y; Z, W ? Then add the snippet only on these pages

This method allows you to only have one step in your optinization process.

  • Calling directly the browser's native permission :

It gives you the possibility to display the browser's permission when a user clicks on a specific link of your website

To do so :

  1. Edit your JSON configuration and set your scenario as "none" (it will prevent the display of the pop-in alert) - more details in the section "3.2.1 Edit the JSON plugin configuration" .
  2. Trigger the call-to-action method "requestBrowserPermission" when a user clicks on a specific link of your website :
Argument Required Type Description
options yes <array> of <string> containing selected anchors to bind. The value must start with "#" or "." (ID or ClassName)
callbacks optional <object>
  • "onSuccess" : <array> provided elements that have been utterly binded
  • "onError" <string> label error

For example

ACC.push([
    "push:requestBrowserPermission",
    [
        "#myLink",
        ".myOtherLinks"
    ]
]);

Quick integration vs. customization

Our solution can be fully configured. You can legitimately configure it to create the most adapted process according to the look and feel of your website.

When you play the video, click on HD to enhance video quality

In the following paragraphs, we will look at:

  • How to customize very easily the default Popin Alert which Accengage provides, as well as the Landing page and certain options
  • How to customize the Popin Alert in a more advanced way
  • How to create more advanced and efficient opt-in scenarios, to maximize results (we highly recommend you to create these)
  • Some useful commands to help you during these steps.

Basic Opt-in process customization

Edit the JSON Configuration

As explained in the overview, there are 2 ways to turn a website visitor into an opt-in user :

Through the Accengage domain (or a custom one) or your own domain.

Depending on the optin process you're using, some customization are available.

When asking the optin through the Accengage domain you will :

  1. Show an opt-in ‘Alert
  2. Trigger a ‘Landing Page’ containing the native Browser permission.

Optimizing the ‘opt-in’ process by customizing the opt-in alert and the landing page can enhance significantly the volumes of opt-in users, generating better results for your campaigns. 

We highly recommend you to customize them and we have created many tools and options to help you to do so.

Starting from SDK 3.3.x, you have different ways to ask a user to opt-in through your domain:

  • Display a pop-in alert (called showAlert) and then the browser's native permission (2 steps)

    • Show the pop-in 'Alert'
    • Trigger the browser's permission when a user has clicked on the pop-in "Alert"

or

  • Display the browser's permission when a user opens specific pages of your website (1 step)

or

  • Trigger the browser's permission when a user has clicked on a specific link of your website

Displaying directly the browser's permission (without the display of the pop-in 'Alert') or triggering it on specific links (option 2 and 3) can also enhance significantly the volumes of opt-in users.

If you want to use this process please click here.

Those scenarios have to be managed in the JSON configuration available in the Accengage Dashboard.  Please read carefully the indications below.

Accengage has developed a Popin Alert by default, which is customizable and designed to encourage users to accept your Web Push Notifications.

In this first step, you will learn how to very easily and quickly  customize the wording , the basic design and some display rules for this Popin Alert, directly from the Accengage  dashboard with just some HTML knowledge .

Then we will look at how to easily customize the Landing Page, which contains the native Browser permission.

Of course, if you would like to have a more successful and customized experience, you will be able to add your own CSS and also go further in terms of scenarios, by following the steps in the next paragraphs.

This basic customization will imply modifying a Json file configuration within the application settings in the Accengage Dashboard.

To edit these options, you can go directly on our interface. Go to  Settings  Manage Applications  Edit your application  Plugins configuration .


Within the "push" property in the Plugin configuration, you will be able to set these parameters:

Parameter Type Default Description
scenario <string> "none"

This determines which action is automatically launched as soon as the library is  loaded .

Available values :

  • "none" : use this value if you do not want to show automatically the Popin Alert
    • typically if you want to customize when to launch it
    • or if you want a more customized experience
    • or if you want to display the the permission only on specific pages (starting from SDK 3.3.x)
    • or if you want to trigger the browser's permission once a user clicks on a specific link of your website (starting from SDK 3.3.x)  
  • "showAlert" : use this value to show automatically the  HTML alert
alertOptions <object> see below

Object containing the parameters for the  HTML alert

landingOptinOptions <object> see below

Object containing the parameters for the Landing page

customError <object> see below

Object containing the parameters for the customizing the Chrome Error Notification. This message is displayed as a Web Push Notification in case the servers cannot be reached.

For Instance:

// Plugins configuration
{
    ...

    // Set the "push" plugin options
    "push": {
        "scenario": "showAlert",
        "alertOptions": {
            ...
            "contents": {
                ...
            }
        },
        "landingOptinOptions": {
            ...
            "contents": {
                ...
            }
        }
    }

    ...
}

Basic customization of the Html Popin Alert

The HTML Popin alert is an interactive block injected by the library inside your page in order to incite users to receive push notifications and to detect their intent when they are not yet opt-in. It is an optional feature and it is the first step of the opt-in process.

Choose when to display the alert

You can choose the period to display the Popin Alert:

  • Automatically when a user arrives on the website (in that case, set the "scenario" option to "showAlert", click here for more information)
  • At a specific moment that you decided thanks to the method `push:showAlert` (click here to see how this command can be used in your pages)

Customize the overall Popin Alert parameters

By editing the following parameters inside the JSON configuration file within  the Accengage dashboard, you'll also be able to customize the wording, the basic design, the position as well as some display rules for the Popin Alert:

Parameter Type Default Description
contents <object> see below Lists the wordings and logos displayed to the user on the Popin Alert.
theme <string> "light"

Choose the theme's desgin to stylize the HTML Popin Alert. Available themes are:

  • "modern"
  • "light"
  • "custom" : no CSS will be injected, you have to customize the alert on your own (see Section 3)
position <string> "topRight"

Set the positions of the HTML Popin Alert. Available values are :

  • "topLeft", "topCenter", "topRight"
  • "middleLeft", "middleCenter", "middleRight"
  • "bottomLeft", "bottomCenter", "bottomRight"  
overlay <boolean> false

If true, this will add a semi-transparent layer between your page and the Alert. With this option activated, users won't be able to click on your page's elements

(only applied on "modern" theme)

reAskingDelay <number> 24

If the user clicks on the "close" button, or hasn't interacted with the alert in a previous page, this parameter defines the number of hours to wait before showing the HTML Popin Alert again.

reAskingDelay2 <number> 24

If the user clicks on the "deny" button, this parameter defines the number of days to wait before showing the HTML alert again.

Customize the Popin Alert Contents

Below is the 3 contents fields used in the HTML Popin Alert that you can modify by updating the push.alertOptions.content object. Note that you can include some HTML code within the content.

Content field Description Default value
misc

Value can be a:

- Valid HTML <string> - Plain string <string>  

the <string> value hydrating all the ".acc--miscContent" DOM Elements contained in the HTML alert

none
deny

Value can be a:

- Valid HTML <string> - Plain string <string>

Hydrating all the ".acc–denyContent" component

none
accept

Value can be a:

- Valid HTML <string> - Plain string <string>

Hydrating all the ".acc–acceptContent" component

none

Below are some examples of how you can modify these contents:

Modification examples
Simple text changing example
  "contents": {
    "misc": "Hello, do you want to receive our push notifications ?
    You will receive nice offers and discounts !",
    "deny": "No ! I prefere to pay full price",
    "accept": "Yes, please !"
  }
Add HTML to add a logo
    "contents": {
        "misc": "<div style='text-align:center;padding:0 0 15px'><img src='https:\/\/websdk.accengage.net\/images\/accengage_logo.png'width='175'>
        <\/div><div style='position:relative;width:100%;display:flex'><div style='width:15%;position:relative;padding:10px 0 0'>
        <img src='https:\/\/websdk.accengage.net\/images\/alert_content_bell.png' 
        width='100%' style='max-width:55px;display:block;margin:0 auto'><\/div><div style='width:80%;padding-left:5%'>
        <divstyle='color:#0088C3;font-size:16px;padding:0 0 10px;font-weight:bold'>Receive all our promotions ! <\/div><div style='font-size:13px'>
        Subscribe to our web alerts and don't miss any offer. You will be noticed as soon as a deal is online.<\/div><\/div><\/div>",
        "deny": "No ! I prefere to pay full price",
        "accept": "Yes, please Sir !"
      }

Customize the Popin Alert Theme

Accengage offers preset design templates (or themes) that you can very easily choose from. We also give you the possibility to add your own design and CSS (see Section 3).

To do so, use the content object "theme" inside the above JSON Plugin file configuration. Changing the teme will only alter the CSS file that is injected and not the HTML Popin Alert HTML markup. 

Below are how the different themes look like:

Theme Images
modern
light
custom (no theme apply)

Customize the Popin Alert Position

You can easily choose the position of the Popin Alert by modifying the position property in the JSON configuration file.

Activate an overlay effect for the Popin Alert

You can decide to add a semi-transparent layer between your page and the Popin Alert. In that case, users won't be able to click on your page elements. Obviously, this will highlight the Popin Alert and will drive maximum attention to it, maximizing the volume of opt-in users!

Customize when to ask for the permission

In order to maximize the number of opt-in users, it is important to ask the user for his permission at the right moment, and in several occasions. In order to customize when to ask the user for his permission, Accengage provides you with several options.

First of all, as seen above, you can determine specifically when to trigger the permission thanks to the method `push:showAlert` ( click   here to see how this command can be used in your pages).

Second of all, Accengage provides you with the Re-Asking delay options. Indeed, as long as the user has not answered to the native browser permission, you may ask them again for their opt-in, and you can set delays you wish.

   Accengage provides 2 Re-Asking delay options in the  JSON Plugin configuration :

Type Description
reAskingDelay Delay, expressed in hours (decimals are possible), before showing the HTML alert again, after the user has clicked on the "close" button of the Alert, or hasn't interacted with the alert.
reAskingDelay2 Delay, expressed in days (decimals are possible), before showing the HTML alert again, after the user has clicked on the "deny" button of the Alert.

Basic customization of the Landing Page

As a reminder the Landing Page is a new window which is triggered when the user has expressed its intention to opt-in thanks to the Popin Alert, and in which the native browser permission is displayed.

You can see in the screenshot below that the native notification permission is displayed inside.

It is also interesting to customize its text and design, in order to maximize the volume of opt-in users, as it is the last element which can encourage the users to give their permission.

Typically, it can be interesting to reassure the user on the fact that they can unsubscribe in just 1 click, that they will receive interesting content etc.

Accengage also lets you customize the Landing page easily via the Plugin configuration, by modifying the  push.landingOptinOptions ** property.

Below you will find the elements that can be edited in the JSON configuration:

Parameter Type Default Description
contents <object> see below Lists the contents displayed to the user (see below)
theme <string> "light"

Selected theme to customise the landing page  . Available themes :

  • "white"
  • "light"
  • "dark"
  • "black"
height <number> 135 Pixel value defining the height of the popup window
width <number> 462 Pixel value defining the width of the popup window
withAppIcon <boolean> false a flag defining if you want to display your Application Icon (The one determined in the section Getting started > Configure the Accengage Dashboard)

Here are the wordings that can be customized in the landing page, set in the  push.landingOptinOptions.contents ** object:

Content field Description Default value
ask Custom <string> value which is displayed immediately on the landing page (for instance to explain the benefits of web push notifications and reassure on the unsubscription) none
granted Custom <string> value which is displayed when the user has granted the notification permission none
denied Custom <string> value which is displayed when the user has denied the notification permission
none
error Custom <string> value which is displayed when an error occurs during the opt-in process
  • "en" : "An error occured, please try again later"
  • "fr" : "Une erreur est apparue, veuillez recommencer plus tard"
close Custom <string> value which is displayed when the page does not close itself
  • "en" : "You can now close the page"
  • "fr" : "Vous pouvez désormais fermer la fenêtre"

Custom Error option

In very rare occasions, when the integration is not properly made or if servers cannot be reached, an error message might be displayed as a Web Push notification.

This message can be customized in the JSON Configuration:

Parameter Type Default Description
contents <object> see below a list of selected contents displayed to the user
Content field Description Default value
message notification's message "An error occurred while displaying a notification"
title notification's title "Oups"

 If you would like to know all the details about how to set the ‘contents’ object, you can read below the part Useful Commands for more details.

Advanced design customization for the pop-in alert

In the previous paragraphs, we’ve looked at how to customize the default opt-in process in a simple way, with  little HTML knowledge  and for maximum efficiency.

In this section, we’ll look at how to go further in customizing the user experience, and adapting the design to your own design.

You can easily add your own javascript file to override the CSS properties included in the plugin. Please find below two cases where CSS files have been added to modify the esthetics of the Alertbox

Alertbox HTML Structure

Html structure

<div class="acc-alert--desktop acc-alert--visible" id="acc-alert">
    <div id="acc-alert-body">
        <a class="acc--closeLink" href="#" id="acc-alert-close"></a>
        <div class="acc--miscContent" id="acc-alert-content">
            MISC OBJECT CONTENT
        </div>
    </div>
    <div id="acc-alert-buttons">
        <a class=
        "acc-alert-button acc-alert-success acc--acceptLink acc--acceptContent"
        href="#">ACCEPT OBJECT CONTENT</a><a class=
        "acc-alert-button acc-alert-error acc--denyLink acc--denyContent"
        href="#">DENY OBJECT CONTENT</a>
    </div>
</div>

Example 1: Modifying pre-existing Light theme.

We saw before that themes are CSS properties added to your page when the plugin is loaded. You can override a few properties with your own CSS files.

Simple design modification

Css addition

/* Switch "deny" and "accept" buttons' position */
#acc-alert-buttons {
  direction: rtl;
}
#acc-alert-buttons .acc-alert-button.acc-alert-error {
  margin-right: 10px;
}
#acc-alert-buttons .acc-alert-button.acc-alert-success {
  margin-right: 0;
}

/* Delete "close" cross button */
#acc-alert-close {
  display: none;
}

/* Edit component border-radius */
#acc-alert {
  border-radius: 20px;
}

Example 2: Fresh start from the blank theme

When choosing a theme for the Pop-in within the JSON configuration, you can set it to “custom” (which corresponds to a blank theme).

When you choose the blank theme, the HTML structure of the Alertbox is included to the DOM but NO CSS will be added.

You can then add your own CSS file without having to override the already existing properties.

For example

Css addition  Expand source

#acc-alert * {
  box-sizing: border-box;
}

#acc-alert {
  position: fixed;
  width: 100%;
  background: #FBFBFB;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  z-index: 999;
}

#acc-alert-body {
  position: relative;
  width: 100%;
  z-index: 1;
}

#acc-alert-buttons {
  position: relative;
  width: 100%;
  text-align: right;
}

#acc-alert-close {
  position: absolute;
  top: 6px;
  height: 12px;
  width: 12px;
  opacity: 0.5;
  z-index: 2;
  cursor: pointer;
}

#acc-alert-close:hover {
  opacity: 1;
}

#acc-alert-close:before,
#acc-alert-close:after {
  position: absolute;
  left: 3px;
  content: " ";
  width: 2px;
  background-color: #000;
}

#acc-alert-close:before {
  transform:rotate(45deg);
}

#acc-alert-close:after {
  transform:rotate(-45deg);
}

#acc-alert-content {
  position: relative;
  color: #505050;
}

#acc-alert-buttons {
  direction: rtl;
}

#acc-alert-buttons .acc-alert-button.acc-alert-success {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border-radius: 1px;
  background: #50B766;
  color: #fff;
  font-weight: bold;
  margin-left: 35px;
  cursor: pointer;
}

#acc-alert-buttons .acc-alert-button.acc-alert-success:hover {
  background: #45A85A;
}

#acc-alert-buttons .acc-alert-button.acc-alert-error {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: #808080;
  cursor: pointer;
}

#acc-alert-buttons .acc-alert-button.acc-alert-error:hover {
  color: #505050;
}

#acc-alert.acc-alert--desktop.acc-alert--left {
  right: initial!important;
  left: 10px;
}

#acc-alert.acc-alert--desktop.acc-alert--bottom {
  top: initial!important;
  bottom: 10px;
}

.acc-alert--hidden {
  display: none;
}

#acc-alert.acc-alert--desktop {
  top: 10px;
  right: 10px;
  width: 450px;
  border-radius: 1px;
}

.acc-alert--desktop #acc-alert-body {
  height: auto;
  min-height: 78px;
  padding: 20px 20px 0;
}

.acc-alert--desktop #acc-alert-buttons {
  padding: 10px 20px 15px;
}

.acc-alert--desktop #acc-alert-close {
  right: 5px;
}

.acc-alert--desktop #acc-alert-close:before,
.acc-alert--desktop #acc-alert-close:after {
  height: 10px;
}

.acc-alert--desktop #acc-alert-buttons .acc-alert-button.acc-alert-success {
  height: 35px;
  line-height: 35px;
  width: auto;
  padding: 0 8px;
  min-width: 125px;
}

#acc-alert.acc-alert--mobile {
  width: 100%;
  bottom: 0;
  left: 0;
}

.acc-alert--mobile #acc-alert-close {
  right: 8px;
}

.acc-alert--mobile #acc-alert-close:before,
.acc-alert--mobile #acc-alert-close:after {
  height: 20px;
}

.acc-alert--mobile #acc-alert-buttons .acc-alert-button.acc-alert-success {
  height: 45px;
  line-height: 47px;
  padding: 0;
  width: 155px;
  max-width: 47%;
  min-width: 100px;
}

.acc-alert--mobile #acc-alert-body {
  padding: 25px 5% 0;
}

.acc-alert--mobile #acc-alert-buttons {
  padding: 15px 5% 8px;
}

Here is an example of a full customization

Advanced opt-in scenarios

We’ve seen in the previous sections how to customize the Show Alert which is provided by Accengage by default. However, if you would like to collect more opt-in users, we recommend you to combine and try different scenarios as well as different contexts to ask for the user permission. 

For instance, you may ask for the user permission on the home page, but also after a specific action performed (purchase, newsletter registration etc.).

For this reason, Accengage also provides some examples of other types of ‘Alert’ displays, such as banners, interstitials, switch buttons etc.

You also have the possibility to create your own template.

Below are some examples of what you can do, feel free to use these examples and adapt them to your website and ideas.

Instertitial

This example is impactful given the attention it drives. 

Also, the volumes of opt-in users are maximized as the overlay disables the navigation behind.

You can achieve high numbers using interstitials! 

You can visualize it on our demo page and re-use the code if needed.

Illustration of an instertitial

Full width banner

This example is a good compromise between impact and non-intrusiveness.

It looks very similar to the banners which are displayed for cookie acceptancy, so users are accustomed to seeing them on websites.

It has the advantage that you can show it at the top of all the pages of your website during the user navigation. You could also decide to display it from the bottom as the user scrolls down, in which case we recommend you use it in combination with another display seen from the top.

You can visualize it on our demo page and re-use the code if needed.

Opt-in Button

This example can be very useful if you would like to maintain a permanent button on your website to encourage users to give their permission, similar to a “register to our newsletter” button.

The example below shows an animated bell that you can position as an overlay on your website

You can visualize it on  our demo page and re-use the code if needed.


Switch Button


This example can be very useful if you would like to maintain a permanent button on your website to encourage users to give their permission. It can also be added during a form registration. 

  The Accengage website ( http://www.accengage.com ) shows an example at the top of the screen. 

You can visualize an example on  our demo page and re-use the code if needed.

 

Check box in a form

 

Taking advantage of a form is a good additional way to ask for the user permission.

Note that we recommend not to only rely on this form, as a lot of users do not go through forms. But it’s a good way to catch a high percentage of your more engaged users.

You can visualize an example on  our demo page and re-use the code if needed.


The Accengage website ( http://www.accengage.com ) shows a nice example of that.

You can access the  demo page  to see an example of the SDK's integration.

3.5 Scenario triggering options

Together with the design, the timing of the Alert display can prove to be a key factor for the opt-in process performance. 

Asking the user's permission directly from the Home Page is an important and recommended step, however, asking them in other contexts (e.g.: at the end of a purchase, of a registration, on a deep page etc.) is also important and should be used in combination with a request on the Home Page.

Triggering the Popin Alert when you want

If you want to use the default or customized Show Alert, Accengage gives you the opportunity to choose when to display this it  :

  • Automatically when a user arrives on the website (set the push plugin "scenario" option to "showAlert", click here for more information)
  • At a specific moment that you decide thanks to the method `push:showAlert ` (click here to see how this command can be used in your pages)

Use the push:showAlert command when you want to show the HTML alert to the user.

Argument Required Type Description
options optional <object>

a new set of parameters that can override the configuration of your application (see the "alert configuration" section to check all the possibilities)

callbacks optional <object>
  • "onSuccess" : <void>
  • "onError" : <string> label error

For Instance:

ACC.push(["push:showAlert"]);

/*********************************/

// or, let's say you have a configuration so that every alert are injected with a specific content
// for this command execution, you can provide other contents (or any other options !):
var params = {
    theme: "modern",
    contents: {
        misc: "a unique content can be now display!"
    }
};
ACC.push(["push:showAlert", params]);

Triggering Landing Page following a custom scenario

In order to launch your own custom scenarios at a desired moment, Accengage has created a method to let you trigger the landing page (where the native web push permission is asked) following your custom Alert scenario.

It's the push:launchLandingOnClick command.

Use this command to bind one or more DOM Anchor Elements (</a> tag) to launch the optout-to-optin landing page on click.

Argument Required Type Description
options yes <array> of <string> containing selected anchors to bind. The value must start with "#" or "." (ID or ClassName)
callbacks optional <object>
  • "onSuccess" : <array> provided elements that have been utterly binded
  • "onError" <string> label error

For Instance:

ACC.push([
    "push:launchLandingOnClick",
    [
        "#myLink",
        ".myOtherLinks"
    ]
]);

Before launching your custom opt-in scenario, you may want to know if the user is compliant with Web Push Notification requisites , and/or if the user is already opt-in or not.

To know whether the user is already opt-in to Web Push Notifications, you can use the core:isCompliantWithPushPlugin command.  It can also tell you why the user is optout,

e.g. if he has denied the native notification permission.

Use this command to know if the user is compliant with the Push Plugin

Argument Required Type Description

options

not used    
callbacks yes <object>
  • "onSuccess" : <void>
  • "onError" : <void>

For instance

ACC.push([
    "core:isCompliantWithPushPlugin",
    null,
    {
        "onSuccess": function() {
            console.log( "this user is compliant with the push plugin !" );
        },
        "onError": function() {
            console.log( "this user is NOT compliant with the push plugin" );
        }
    }
]);

You can add some custom listeners to the events which are triggered by the library such as when the landing page is displayed, when the user has granted permission etc.  

Please refer to the API Documentation for complete details JS doc.

Useful commands

How to set up the contents object in the JSON plugin configuration

The contents <object> contains a list of propertiesaccording to the plugin configuration itself.

 Hence, here is a possible example of configuration, to manage for instance multi-lingual messages:

{
    // In this example, the contents object contains two properties "welcome" and "goodbye"
    "contents": {

        // You can set the field with a <string>
        "welcome": "Hello ! How are you ?",

        // Or you can set the field with an <object>
        "goodbye": {

            // The key is used for a specific language code
            // So, if the browser language is set to "en", it will display this content :
            "en": "See you !",

            // Same thing, if the browser language is set to "fr", it will display this content instead :
            "fr": "Au revoir !"

            // Which content is displayed if the browser is, for example, set to "es" ?
            // -> It will take the first provided language code. In this case, it will display "See you !"

            // Please, use a lower-cased value for the provided language code.

         }
    }
}

Enable Debug Mode to bypass cache settings

Our solution provides a Debug Mode allowing you to keep a stack trace accessible through your browser console. 

 Also, as explained above, when modifying the JSON plugin configuration options, you need to wait for approximately half an hour to see the changes live in your pages. However, with the Debug mode, you can bypass the application's settings cache and speed things up to see the changes.

 

To use the debug mode, just follow these steps:

Enable debug mode to bypass cache settings

Our solution provides a Debug Mode allowing you to keep a stack trace accessible through your browser console.

The debug mode can also bypass the application's settings cache. For example, you have made some changes on our interface for your application, and you don't want to wait thirty minutes to see the modifications. Use the debug mode avoid this wait and see the changes (it won't destroy the current cache though, other users will keep seeing the cached version).

To use the debug mode, just follow these steps :

  1. Enable the checkbox on our interface > Settings > Manage Applications > My application > Allowing debugging.
  2. It will create an "ACCdebugKey". To activate the debug mode, you just have to include it in your page URL as query string parameter
  3. For example, if your current page is http://myWebsite.com/page.html, just add : http://myWebsite.com/page.html?ACCdebugKey=XXXX\

On Google Chrome (or Firefox), you can access the console by

  • Using the keyboard shortcuts

    • On Windows and Linux: F12
    • On Mac: Cmd + Option + I
  • Then go to the ‘Console’ panel