How can I move my web subscription prompt to the top of the screen and prevent it from blocking user interaction with my site?

You can customize the behavior and position of your web subscription prompt with a couple of adjustments to your site's code.

1. Prevent the Prompt from Blocking Page Interaction

If your subscription prompt creates an "invisible layer" that prevents users from clicking on other parts of your website, you can resolve this by adjusting its configuration.

In your custom prompt's configuration code, add the overlay: true parameter. This ensures that the prompt and its overlay are handled correctly, allowing users to properly dismiss it and interact with your site.

2. Move the Prompt to the Top of the Screen

To change the prompt's position from the default (bottom) to the top of the screen, you can use custom CSS. Add the following CSS rules to the <style> section of your website's HTML.

A simple way to move the prompt to the top is to unset its bottom positioning, which will allow your other styles to position it at the top:

#pwSubscribePopup {
  bottom: unset;
}

For more precise control, you can specify the exact position. The following example places the prompt 20px from the top and 10px from the left and right edges:

#pwSubscribePopup {
  bottom: unset;
  top: 20px;
  left: 10px;
  right: 10px;
}

Note: It is often desirable to apply these styles only for mobile devices. You can achieve this by wrapping the CSS in a media query. For example:

@media (max-width: 768px) {
  #pwSubscribePopup {
    bottom: unset;
    top: 20px;
  }
}