Customizing Permission Opt-in Prompts

Permission opt-in prompts are the gateway to building your web push subscriber base. When visitors land on your website, a well-timed, customized permission prompt significantly increases your opt-in conversion rate while preventing users from permanently blocking notifications.

HyperPush X allows full customization of prompt timing, visual layout, text copy, brand colors, and trigger conditions. You can customize your push opt-in prompts in two places:

1. HyperPush X Web Console (/websites): For self-hosted websites, custom JavaScript integrations, React, Vue, Next.js, and standalone web apps.
2. HyperPush X Pro WordPress Plugin (WP-Admin): For WordPress site owners directly inside your WordPress administration dashboard.

📷 Live System Interface: Web Console Prompt Customizer Modal

📷 Live System Interface: WordPress Plugin Opt-in Prompt Customizer

📐 Opt-in Prompt Architecture & 2-Step Workflow

🎨 Method 1: Customizing Prompts in HyperPush X Web Console

If you manage your site via the HyperPush X Web Console (/websites), follow these steps to customize your permission prompt:

Step 1: Open Prompt Customization Modal

1. Log into your HyperPush X console and navigate to Websites (/websites).
2. Locate your domain card and click Prompt Customization (or the prompt settings icon).

Step 2: Configure Layout & Timing Settings

• Prompt Mode: Choose between Custom Soft Prompt (Customized Modal), Native Browser Prompt, or Floating Bell Widget.
• Soft Prompt Layout: Select visual layout style (Slide-Down Banner, Centered Modal, or Floating Card).
• Display Delay (Seconds): Set the waiting period (e.g. 3 or 5 seconds) before the prompt appears to allow visitors to absorb page content first.

Step 3: Customize Text Copy & Brand Styling

• Prompt Title: Enter a catchy headline (e.g. "Stay Updated with Flash Deals! ⚡").
• Prompt Message Description: Provide a clear value proposition (e.g. "Would you like to receive instant notifications for new updates and exclusive offers?").
• Allow Button Label: Customize the primary acceptance button (e.g. "Allow", "Subscribe Now").
• Cancel Button Label: Customize the soft decline button (e.g. "No Thanks", "Later").
• Button Accent Color: Select your brand accent color (e.g. #3B82F6 blue or #10B981 green).
• Text Main Color: Set high-contrast primary text color (e.g. #1E293B).

Step 4: Test with Live Mockup Preview

• Use the Live Prompt Mockup preview pane on the right side of the modal to verify your layout, text wrapping, and color scheme before saving.
• Click Save Customizations to apply changes instantly to your website without updating any JavaScript code!

🔌 Method 2: Customizing Prompts in HyperPush X Pro WordPress Plugin

If your site runs on WordPress, you can configure your opt-in prompts directly inside WP-Admin:

Step 1: Access WP-Admin Prompt Customizer

1. Log into your WordPress dashboard.
2. Navigate to HyperPush X -> Settings -> Opt-in Prompt tab.

Step 2: Configure Settings Sub-Tabs

The WordPress plugin features three dedicated configuration sub-tabs:

1. Layout & Triggers Sub-Tab

• Prompt Layout: Choose Slide-in Banner, Centered Dialog, Floating Bell Widget, or Native Browser Prompt.
• Position: Set placement on screen (Bottom Right, Bottom Left, Top Right, or Top Banner).
• Time Delay (Seconds): Set delay time before showing the prompt (default: 3 seconds).
• Scroll Trigger (%): Trigger prompt after visitor scrolls down a specific percentage of the page (e.g., 50% scroll depth).

2. Content & Labels Sub-Tab

• Customize Headline Text, Body Copy, Allow Button Label, and Later Button Label.

3. Appearance & Colors Sub-Tab

• Customize Button Background Color, Button Text Color, Card Background, and Bell Widget Position.

Step 3: Live WP-Admin Preview & Save

• Observe the Live Mockup Preview container on the right side of the WP-Admin screen.
• Click Save Settings.

⚡ 2-Step Soft Prompt vs. Native 1-Step Prompt: Why Soft Prompts Win

[!IMPORTANT] Why You Should Always Use a 2-Step Custom Soft Prompt:
If you trigger a raw Native Browser Prompt immediately on page load and the visitor clicks Block, the browser permanently blocks notifications for your domain! Re-enabling blocked notifications requires the user to manually dive into browser settings.

By contrast, HyperPush X's Custom Soft Prompt intercepts the interaction:

• Tapping Allow triggers the native browser prompt when intent is high.
• Tapping Later or No Thanks simply closes the soft banner without triggering a hard browser block, allowing HyperPush X to re-prompt the visitor after a set delay (e.g., 7 days).

💡 Best Practices for High Opt-in Conversion Rates

[!TIP] 1. Add a 3 to 5 Second Time Delay
Prompting users immediately on page load feels intrusive. A 3-5 second delay increases opt-in conversion rates by up to 2.5x.

[!TIP] 2. Combine Scroll Depth with Time Delay
Setting a 50% scroll depth trigger ensures visitors have engaged with your article or product before asking for notification permission.

[!NOTE] 3. Automatic iOS PWA Smart Prompts
On iOS devices (iOS 16.4+), standard web prompts are restricted by Apple. HyperPush X automatically detects iOS visitors and displays an interactive "Add to Home Screen" step-by-step guide to ensure mobile Apple visitors can subscribe effortlessly.