Customizable Pre-Dialog Opt-In Prompt

A pre-dialog opt-In prompt is an HTML element that calls the normal browser opt-in prompt upon user interaction.   The main advantage for using it is that it can be fully customized so that you can more effectively communicate with your website visitors.  Because the user must interact with the pre-dialog prompt, as well as the normal browser prompt, this strategy makes subscribing to push notifications a 2-step process.

View an example here: Pre-Dialog Example

Implementation

The standard page script, which calls our push functions, should already be on your pages.  It looks like this:

<script> (function(document, window) {
 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = "https://trk-syntrex.com/scripts/push/script/[YOUR-PARTNER-ID]?url=" + encodeURI(self.location.hostname);
 script.onload = function() {
 push_init();
 push_subscribe();
 };
document.getElementsByTagName("head")[0].appendChild(script);
})(document, window); </script>

Remove the push_subscribe() function from the JavaScript that you have on your pages.  The above code block is for example purposes, the exact script that you have on your pages may use a different domain for the script.src and will contain a Partner ID that is linked to your account. 

The push_subscribe() function is what calls the browser's push opt-in prompt.  We are removing it because we want it to be linked to the Pre-Dialog element rather than running it when the page is loaded.  After removing the push_subscribe() function, your script should now look like this:

<script> (function(document, window) {
 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = "https://trk-syntrex.com/scripts/push/script/[YOUR-PARTNER-ID]?url=" + encodeURI(self.location.hostname);
 script.onload = function() {
 push_init();
 };
document.getElementsByTagName("head")[0].appendChild(script);
})(document, window); </script>

Design your own pre-dialog prompt 

You can design your own opt-in prompt and configure the push_subscribe() function so that it is called when a user clicks a button on your HTML element.  An example would look like this:

<a onclick="push_subscribe()"><button id="allow-button">Allow</button></a>

When a user clicks the button the browser's push opt-in prompt will be displayed.

Use our example

If you don't want to design your own HTML element, you can use and customize the one we have on our example page.  To do this follow these steps:

1.   Download, host, and link the following CSS file on your web pages:
     notify-styles.css
    

2.  Place the following HTML on pages where you want to collect push subscriptions:

   <div id="notifyai-popover-container" class="notifyai-popover-container notifyai-reset slide-down">
    <div id="notifyai-popover-dialog" class="notifyai-popover-dialog">
    <div id="normal-popover">
    <div class="popover-body">
    <div class="popover-body-icon"><img alt="notification icon" class="" src="https://notifyai.io/wp-content/uploads/2019/06/notify-A.png"></div>
    <div class="popover-body-message">We'd like to show you notifications for the latest news and updates.</div>
    <div class="clearfix"></div>
    </div>
    <div class="popover-footer"><a onclick="push_subscribe()"><button id="notifyai-popover-allow-button" class="align-right primary popover-button" onclick="document.getElementById('notifyai-popover-container').style.display='none'">Allow</button></a><button id="notifyai-popover-cancel-button" class="align-right secondary popover-button" onclick="document.getElementById('notifyai-popover-container').style.display='none'">No Thanks</button>
    <div class="clearfix"></div>
    </div>
    </div>
    </div>
   </div>

   You can edit the above HTML to include your own message text, button text, and image.