· Education  · 10 min read

How to Setup Alertwise Push Notification

A step-by-step guide to setting up Alertwise push notifications on your website, from app creation to sending your first notification.

A step-by-step guide to setting up Alertwise push notifications on your website, from app creation to sending your first notification.

Setup Alertwise Push Notification - In today’s digital world, connecting with your audience effectively is crucial. While traditional channels like email and SMS are widely used, web push notifications offer a powerful and privacy-friendly alternative.
With AlertWise, you can turn your website visitors into engaged subscribers effortlessly — even when they’re not actively browsing your site.

This comprehensive guide will walk you through every step of installing, setting up, and using AlertWise to boost your engagement rates.

What is AlertWise?

AlertWise is a smart web push notification service that allows you to engage your visitors after they leave your website. Unlike email marketing or SMS campaigns that require collecting personal data (like email addresses or phone numbers), web push notifications preserve user privacy — no personal information is collected. A subscriber becomes part of your audience simply by clicking “Allow” on the subscription prompt.

Alertwise Web Push Notifications Overview

Why Choose Web Push Notifications?

  • Instant communication with users, even after they leave the site

  • No personal information required

  • High opt-in rates compared to email forms

  • Works across desktops and mobile browsers

  • Easy to implement and manage

Setup Alertwise Push Notification

Let’s dive into setting up AlertWise on your website, step-by-step.

https://youtu.be/oj5OGY9n-Fc?si=Gr-WLhG89EdM9v7E

Step 1: Add an App to AlertWise

After logging into the AlertWise platform, the first thing you need to do is add an app.

Here’s how:

  1. Enter an App/Site Name:
    This will be the default title of your notifications if you don’t set a specific title for each notification. Example: If your site is “Healthy Recipes Hub,” this will show up in your notifications.

  2. Enter Site URL:
    The site URL must exactly match your website’s address following the Same-Origin Policy.
    Important:
    If your site is https://mydomain.com, don’t enter https://www.mydomain.com.
    (Browsers treat them as different origins.)

  3. Enter Badge Icon URL:
    The badge icon is a smaller icon shown in some browsers alongside your notification.
    Ideally, this should be a simple, recognizable logo.

  4. Upload or Use an Existing Notification Icon URL:
    This is the main icon displayed in notifications. It should be:

    • Square shape
    • 256x256 pixels
    • PNG or JPG format

alertwise setup

What Happens After Adding the App?

Once the app is added:

  • Site name and site URL are saved.

  • Icons are set as default for all your web push notifications.

  • Your website is ready to start sending notifications once integrated with the installation code.

Note:
Both Site Name and Site URL are mandatory fields — missing either will prevent registration.

Step 2: Install the AlertWise Code

After creating your app, the platform provides you with two important things:

  1. Installation Code

  2. service-worker.js File

alertwise setup

You must:

  • Copy the installation code snippet and add it inside the <head> section of your website’s HTML.

  • Download the service-worker.js file provided.

  • Upload the service-worker.js file to your site’s root directory (the main directory), so it is publicly accessible.

Why is the service worker important?
It listens for push messages and displays them even when the browser is not open. It’s the backbone of web push functionality.

Step 3: Configure the Subscription Opt-in

Once the code is installed, the next step is to set up how users will subscribe to your notifications.

Here’s how you do it:

  1. Navigate to Settings ➔ Subscription Prompt.

  2. You will see options to enable/disable the subscription prompt.

  3. Choose the Opt-in Type:

    • Single-Step Opt-in:
      Users subscribe with just one click. Best for faster opt-ins and higher conversion.
    • Double-Step Opt-in:
      Users first click to subscribe and then confirm again. Allows more customization but might reduce subscription rates.

  4. Customize the Style:
    Change colors, texts, positioning, and icons to match your brand identity.

  5. Save and Activate:

    • Click Save after editing.
    • Go to Choose Display Options and Save and Enable Prompt.

Tip:
Single-step opt-ins usually perform better for mos t websites. However, use double-step if you want more control over branding and design.

Step 4: Create Your First Notification

With your subscription prompt active, you can now create your first notification!

alertwise setup

Here’s how:

  1. Navigate to Notifications ➔ Send.

  2. Under New Notification, enter the following:

    • Title:
      Keep it catchy and relevant.
      Example: “Get 20% Off Your Next Purchase!”
    • Message:
      Add a short and engaging message to grab attention.
    • URL:
      Set the landing page URL where users will be directed after clicking the notification.
    • Image:
      Add an optional notification image. Recommended size matches the 1:1 aspect ratio (square).

alertwise setup

Best Practices for Notification Content:

  • Keep titles under 50 characters.

  • Limit message text to 100 characters.

  • Always add a relevant call-to-action (CTA) like “Learn More” or “Shop Now.”

Step 5: Sending Your Notification

Once your notification is ready:

  • Click Save.

  • Move to the Audience Tab.

  • Choose Send to All Subscribers.

  • Click Send.

✅ Congratulations! Your first push notification is live.

Understanding Key Concepts in AlertWise

Subscriber Resubscription

Once a user subscribes, they will automatically resubscribe when they revisit your website, provided they haven’t revoked permissions manually from their browser settings.

This ensures you retain your subscribers without bothering them with repeated subscription prompts.

Difference Between Icons

TypeUsage
Default IconGeneral fallback icon for notifications
Badge IconDisplayed in the browser’s notification center
Notification IconMain icon shown with push notification

Having high-quality, recognizable icons improves trust and engagement rates.

Why AlertWise is a Game-Changer

  • Privacy-First: No email or phone collection needed

  • Faster Subscriber Growth: No forms or fields to fill out

  • Highly Visible: Appears directly on the user’s device

  • Cost-Effective: No SMS charges or email costs

  • Flexible Targeting: Send personalized notifications to segments of users

Troubleshooting and Tips

  • Always ensure the site URL matches exactly (including https://, no extra www. unless necessary).

  • Test your notification on multiple browsers (Chrome, Firefox, Edge) and devices (Desktop + Mobile).

  • Use engaging, time-sensitive CTAs to increase click-through rates.

  • Monitor performance from the Alert Wise Dashboard.

Conclusion

AlertWise provides a straightforward, efficient, and privacy-respecting way to build a loyal audience and re-engage website visitors.
By following this setup guide - from app creation to your first live notification - you’re well on your way to building stronger connections with your audience without collecting personal data.

Web push notifications are the future of instant, respectful marketing - and AlertWise makes it easier than ever to get started.

Share:
Back to Blog

Related Posts

View All Posts »