Realtime Notifications on Wix with Velo Code

Hi there in this video we will be building a notification system for your Wix website together! The system will be able to send out general and user-specific notifications that are displayed to the user in real-time.

This is a code-along style tutorial so you will see my entire thought, planning, and execution process.

Creating real-time notifications on Wix with Velo Code involves using Wix's built-in capabilities along with the Velo API. Here's a general guide on how you can achieve this:

1. Set up your Wix site:

• Create a new Wix site or open an existing one.

• Make sure you have the necessary permissions to use Velo Code.

2. Create a Database Collection:

• Go to the Wix Editor.

• Add a Database Collection to store the data you want to notify users about.

3. Design the Notification UI:

• Add a strip or box at the top or bottom of your page to display notifications.

• Design it as per your preferences.

4. Write Velo Code:

• Open the Velo Code editor by clicking on "Code" in the site menu.

• Choose "Create a new file" and name it appropriately.

• 
  

Sample Velo Code for Real-time Notifications:

import { local } from 'wix-storage';

// Function to show a notification

function shownotification(message) {

$w('#notificationBox').text = message;

$w('#notificationBox').expand();

setTimeout(() => {

$w('#notificationBox').collapse();

}, 5000); // Adjust the time the notification is displayed

}

// Function to handle new data and trigger notifications

function handleNewData(newData) {

// Check conditions to determine if a notification should be shown

if (newData.someCondition) {

showNotification("New data received!");

}

}

// Function to fetch real-time data (replace with your own data fetching logic)

function fetchRealTimeData() {

// Use Wix data hooks or other methods to fetch real-time data

// For example, fetching data from a collection:

const data = wixData.query("YourCollectionName")

.find()

.then(results => {

const newData = results.items;

handleNewData(newData);

})

.catch(error => {

console.error(error);

});

}

// Set up a periodic data refresh (adjust the time interval as needed)

setInterval(fetchRealTimeData, 60000); // Refresh every minute

5. Add the Notification UI Element:

• Drag a text box or any other UI element to your page for notifications.

• Set the ID to notificationBox or adjust the code accordingly.

• 
  

6. Add Events:

• Go back to the Wix Editor.

• Add a ready event to the page to initialize the Velo Code.

• Add events to handle user interactions or data updates, triggering the notification functions.

7. Test and Debug:

• Preview your site and test the real-time notification functionality.

• Use the Velo Console to debug any issues.

Remember to customize the code according to your specific requirements, such as data fetching, conditions for notifications, and UI design. The provided code is a basic template, and you might need to adapt it based on your specific use case and data structure.