Product
Docs
Resources
Log In

Sign Up

3 Ways to Implement Wix Browser Push Notifications

Wix is a cloud-based platform that helps to create websites that offer online hosting and design services. Its user-friendly drag-and-drop features and the abundance of pre-made templates enable us to create websites without needing technical expertise.

Web push notifications, often referred to as browser push notifications, are interactive messages that websites send to visitors' devices using browsers. These messages are relevant, timely, personalized, and work best for engaging, re-engaging, and keeping website visitors on the page.

In this guide, we will discuss three methods to implement push notifications to a website created with Wix, along with their pros, cons and implementation guide.

1. Using WonderPush

There are multiple push notification platforms available. WonderPush is one of them, which makes sending push notifications to apps and websites simple and affordable. It has a RESTful API, is GDPR compliant, fully functioning, and provides an online dashboard for creating alerts and assessing their outcomes. Furthermore, it is compatible with all widely used native mobile and online platforms.

Pros of Using WonderPush

  • Features available such as segmentation, scheduling options, and easy automation.
  • Great customer support.

Cons of Using WonderPush

  • The price is a little bit high and gives only 14 days of the trial period.
  • Support is available only in English.

Tutorial: How to Implement Push Notifications with WonderPush

To implement push notifications with WonderPush on Wix, we have to use the Custom Code feature. However, to use Custom Code, we have to upgrade our Wix plan to a premium and connect a custom domain.

Step 1 - Create a new project

First, create a new project on WonderPush. In there, select "Website" as the project type and "Wix" as the way to install WonderPush.

WonderPush Create New Wix Project

Then, provide website information such as the website URL, HTTPS notification domain, and the site icon. The site URL is the URL under which we registered our Wix website.

WonderPush Wix Project Setup

Step 2 - Select notification subscription prompts

Then, select notification subscription prompts. These are how the notifications subscribed by the user will appear on the user's side.

WonderPush Wix Selecting Notification Prompts

Step 3 - Add custom code to the Wix site

WonderPush gives a code snippet that has to be included in our Wix site.

WonderPush Wix Install JavaScript SDK

Head back to the Wix dashboard and go to Settings. There we can find the Custom Code feature. In there, paste the code snippet copied from WonderPush. Also, select the "Load code on each new page" option and it is better to place the code in "Body - end".

WonderPush Wix Add Custom Notifications Code

Step 4 - Subscribe for notifications

If the notification setup is done correctly, a popup message asking to subscribe to notifications on the site will appear when a user opens the website in a new tab, as shown below.

WonderPush Wix Browser Notification Popup Preview

After users subscribe, they will receive the following notification sent from the site URL we provided in step 1.

WonderPush Wix Test Push Notification Now go to the WonderPush dashboard. There we can see the notification analytics, and also we can create new notifications to send to subscribed users.

WonderPush Wix Push Notification Analytics

Step 5 - Send new push notifications

To create notifications, go to the "Notifications" section and click "Create notifications."

WonderPush Wix Push Notification Dashboard

In there, fill the necessary information and create a notification. Also, we can add test users to see a push notification preview before sending it publicly.

WonderPush Wix Create New Notification

If the notification is sent publicly, the subscribed users will see the new push notification as below.

WonderPush Wix Test Web Notification

2. Using OneSignal

Another platform for providing push alerts, OneSignal, is comparable to WonderPush. Push notifications can be simply integrated into web and mobile apps thanks to the OneSignal notification service. It has features like segmentation, automatic messaging, and real-time reporting. It is also very scalable.

Pros of Using OneSignal

  • Rich features such as omnichannel support.
  • Great documentation.

Cons of Using OneSignal

  • The price is relatively higher.
  • Support is available only in English.
  • Performance monitoring might be challenging at the beginning.

Tutorial: How to Implement Push Notifications with OneSignal

Similar to the previous method, we have to use Wix Custom Code. To use Custom Code, we have to upgrade our Wix plan to a premium plan and add a custom domain.

Step 1 - Create a new app

After signing up for OneSignal, create a New App/Website. These steps are similar to the WonderPush implementation. So I will not explain each step in depth.

OneSignal Wix Push Notification - Create New

We need to add the configuration details, as shown below as well.

OneSignal Select Wix

Step 2 - Add custom code to the Wix site

Copy the code snippet provided by the OneSignal.

OneSignal Wix Add Custom Code

Then, add it to the Wix site as we did in the previous section. It is better to add it to the "Head" this time.

OneSignal Wix Push Notification Snippet

Step 3 - Subscribe for notifications

Then, open the website in a new tab. It will pop up a message asking to subscribe to notifications on the site.

OneSignal Wix Preview NotificationAfter we subscribe, we can see the following notification.

OneSignal Wix Test Push Notification

Step 4 - Send new push notifications

To send a new push notification, we have to create one first, as shown in the screenshot below.

OneSignal Wix New Message

Then, fill in the notification campaign information as shown below.

OneSignal Wix Custom Notification

3. Using Simple Push Notifications

We can implement push notifications to a Wix site using apps from Wix App Market. It has a vast collection of plugins that can be installed on our websites. In this guide, I will discuss about one such app called Simple Push Notifications. It allows our Wix website to send push notifications to subscribed users.

Pros of Using Simple Push Notifications

  • Easier to set up compared to the other two methods.
  • Supports automation.
  • Great customer support.

Cons of Using Simple Push Notifications

  • The price is high, and the free plan allows you to send only 10 notifications per month
  • Limited features compared to third-party push notification platforms.

Tutorial: How to Implement Push Notifications with Simple Push Notifications

Simple Push Notifications is a Wix app available in Wix App Market. These apps can be added to our Wix site to enable different features. This method also requires the site to have a premium plan and a connected domain.

Step 1 - Add Simple Push Notifications to the site

First, go to Wix App Market. Find the "Simple Push Notifications" app and add it to the site.

Wix App Market

Step 2 - Send users the subscription prompt

Then navigate to "Simple Push Notifications" in the "Apps" section in Wix Dashboard. There will be a set of instructions on how to use Simple Push notifications. At the end of the tutorial, click on "Setup the Prompt."

Simple Push Notifications for Wix

In there, create a popup to send the users asking to subscribe for push notifications from the website.

Wix Simple Push Notifications Manage Notifications

Step 3 - Subscribe for push notifications

After creating the notification, we can send it to users, and it will pop up on our website as below. By clicking "Allow", the user can subscribe to receive push notifications.

Subscribe for Wix Website Notifications

Step 4 - Send new push notifications

Now we can create push notification campaigns and send them to subscribed users. For that, click on "New Campaign."

Wix Push Notifications Management Dashboard

Then, give a title and message to configure a push notification. Finally, click on "Send Now" to send the notification.

Wix Simple Push Notification Create New Campaign

The push notification will be displayed on subscribed users' screens as below.

Wix Simple Push Notification Test Web Push

Also, we can see the information about the push notification campaigns in the dashboard.

Wix Simple Push Notification View Campaign Information

Wrapping It Up

Throughout this guide, we discussed three easy ways to implement push notifications in websites created with Wix. The first method uses the WonderPush, and the second method uses OneSignal, which can be embedded into our Wix site with the Custom Code feature. The third method uses a push notification plugin called Simple Push Notifications from Wix App Market, which can be directly added to the site and create push notifications. With the methods mentioned above, you can implement push notifications to your Wix website and improve user engagement.

View More Guides

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Get started for free

Email & push notification

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Get started for free

Email & push notification

Product

Pricing

Providers

Developers

Documentation

API

Libraries

Status

© 2022 Courier. All rights reserved.