How to prevent the opt-in dialog to show on some specific pages of my site?

how-to
web
tech

#1

You have configured the opt-in mode to trigger automatically and are pleased with the overall result, but you would like to make sure that the user is not prompted to subscribe to push notification on some important pages like purchase confirmation and the like.

You have two solutions, the easiest might be not to inject the WonderPush JavaScript SDK code snippet on those pages at all but is has a few drawbacks, the other one is disabling the opt-in dialog on some pages while keeping the WonderPush JavaScript SDK functioning.

Removing the WonderPush JavaScript SDK on some pages

This approach is simple but has the drawback of disabling any interaction with the WonderPush JavaScript SDK, such as tracking visits or updating custom properties.

Your technical team can easily identify such pages and avoid injecting the Wonderpush JavaScript SDK.

Our recommandation, to avoid unexpected JavaScript errors, is to keep the top part of the script and remove only the call to WonderPush.init(), that way you can still use the WonderPush.ready(…) calls in your website without risking Uncaught ReferenceError: WonderPush is not defined errors.

You can also alter the WonderPush JavaScript SDK code snippet to make the call to WonderPush.init() conditional. This is also easier if the SDK is not injected by your technical team.
Here is an example:

// This is the upper part of the WonderPush JavaScript code snippet
(function(w,d,s,i,n){w[n]=w[n]||{q:[],init:function(o){w[n].initOpts=o;},ready:function(c){w[n].q.push(c);}};
setTimeout(function(j,k){if(!d.getElementById(i)){k=d.getElementsByTagName(s)[0];j=d.createElement(s);j.id=i;
j.src="https://cdn.by.wonderpush.com/sdk/1.1/wonderpush-loader.min.js";k.parentNode.insertBefore(j,k);}},0);
}(window,document,"script","wonderpush-jssdk-loader","WonderPush"));

/**
 * List the paths where the WonderPush SDK should not be enabled.
 * Here the path corresponds anything starting with "/" after your domain name.
 * Eg: The path of https://yourwebsite.com/en/news/8974-new-feature-released
 *     is "/en/news/8974-new-feature-released"
 */
var locationsWithWonderPushDisabled = [
    '/thankyou',
    '/purchase',
    // …
];

// Conditionnaly initialize the WonderPush SDK
if (locationsWithWonderPushDisabled.indexOf(location.pathname) < 0) {
  // Put the original call to WonderPush.init here, inside this `if`
  WonderPush.init({…});
} // else, WonderPush won't be initialized

Disabling the opt-in plugins on some pages

Instead of not calling WonderPush.init(), you can modify the initialization options to disable the opt-in plugins.
Here is how your call should look like:

WonderPush.init({
  // … regular options like webKey and optInOptions
  plugins: {
    'optin-dialog': null, // disables the optin-dialog plugin
    'optin-automatic': null, // disables the optin-automatic plugin (in case you're using this one)
  },
})

Putting this together with the above sample script would give:

// This is the upper part of the WonderPush JavaScript code snippet
(function(w,d,s,i,n){w[n]=w[n]||{q:[],init:function(o){w[n].initOpts=o;},ready:function(c){w[n].q.push(c);}};
setTimeout(function(j,k){if(!d.getElementById(i)){k=d.getElementsByTagName(s)[0];j=d.createElement(s);j.id=i;
j.src="https://cdn.by.wonderpush.com/sdk/1.1/wonderpush-loader.min.js";k.parentNode.insertBefore(j,k);}},0);
}(window,document,"script","wonderpush-jssdk-loader","WonderPush"));

/**
 * List the paths where the WonderPush SDK should not ask for opt-in.
 * Here the path corresponds anything starting with "/" after your domain name.
 * Eg: The path of https://yourwebsite.com/en/news/8974-new-feature-released
 *     is "/en/news/8974-new-feature-released"
 */
var locationsWithWonderPushOptinPluginsDisabled = [
    '/thankyou',
    '/purchase',
    // …
];

var wonderpushInitOptions = {
  // … regular options like webKey and optInOptions
};
// Conditionnaly disable WonderPush opt-in plugins
if (locationsWithWonderPushDisabled.indexOf(location.pathname) >= 0) {
  // Ensure the `plugins` key exist, don't alter any other configuration otherwise
  if (!wonderpushInitOptions.plugins) wonderpushInitOptions.plugins = {};
  // Remove the optin plugins
  wonderpushInitOptions.plugins['optin-dialog'] = null;
  wonderpushInitOptions.plugins['optin-automatic'] = null;
}
// Initialize the WonderPush JavaScript SDK
WonderPush.init(wonderpushInitOptions);

Prevent certain pages from showing the Wonderpush popup
Prevent certain pages from showing the Wonderpush popup
#2