Sometimes you have multiple prompts on a website (e.g. a cookie consent banner and a notification prompt) and for UI / UX reasons you may want to prevent the overlapping of the different prompts. Let's see some solutions.
Please note that if you use Pushpad, you don't need to display a cookie consent banner, because the Pushpad SDK doesn't use cookies. However you may need to display the cookie consent banner on your website for other reasons (e.g. if you use tracking cookies and third-party cookies for marketing and advertising). In this case we suggest different solutions for displaying multiple prompts in a nice way.
Use different positions
A simple solution, if you want to display both prompts when a user lands on your website, is to use a different position in the page for the two prompts.
For example, if you use Pushpad, you can change the position of the prompt from the Widget settings in the dashboard or directly from the code:
// you can use different positions, like "left", "right", "top"
pushpad('widget', { promptPosition: 'left' });
For example, if the cookie consent banner is at the bottom, you can display the notification prompt at the top of the page.
Use different timing
The cookie consent prompt is usually dismissed within a few seconds. For this reason you can choose to display the notification prompt after some time.
For example, if you use Pushpad, you can set a delay for the permission prompt:
pushpad('widget', { promptDelay: '10 seconds' });
Use a callback to create a sequence
If your cookie consent banner provides a callback, you can use it to display the notification permission prompt.
function CookieConsentCallback () {
pushpad('widget');
}
The above code will display a double opt-in prompt for notifications, after the cookie consent prompt. However, since the user has already interacted with the website with a click, you can also display the native prompt for notifications directly:
function CookieConsentCallback () {
pushpad('subscribe');
}
In this case the user will see the cookie consent banner and when they click "Accept", they will see the permission prompt for notifications.
Don't use a prompt for notifications
Another alternative to consider, which also offers a better user experience, is to avoid the notification prompt. Instead, you can wait for an explicit action of the user on an element in the page (a "Subscribe" button for example).
We recommend to read this article which explains the best ways to integrate the notification prompt with the UI of the website.
You can also see some practical examples: for example you can create a button and you can display a message conditionally only to the users who are not subscribed.
Alternative: overlapping with z-index
Finally if you want to keep the overlapping you can use the z-index to control which prompt is displayed above. Usually the cookie consent should stay on top and thus you must assign a greater z-index to it. When the user dismisses it, they will see the notification prompt below.