Use Velo to Notify Customers When an Item is Back-in-stock

Asaf Shevach
- 6 min read

Communicating with your users or customers requires a special balance. On one hand, you don’t want to be too pushy, and on the other, you don’t want to miss opportunities to send your customers information that they will find helpful.

The best way to communicate with users is to send them information they’ve asked for specifically, and that’s all the more true when the information is about a product they are interested in. That’s exactly the motivation behind back-in-stock notifications.

Everyone has experienced that sinking feeling when you find exactly the item you want to buy, but sadly, the store just doesn’t have it in stock. However, when there’s an option to be notified when the item becomes available again, it’s a win-win. Customers get targeted information about a product that they’ve already displayed a high level of intent about, and store owners can provide users with meaningful, actionable information that will convert to sales.

With Velo, you can add this functionality to your Wix Store and the tutorial below will walk you through the steps:

Back-in-Stock Notifications, Step by Step

Requirements:

Wix Stores installed with some products added

Wix Ascend installed

Wix Members installed for your customers

Two triggered emails:

Back-in-stock Sign-up: A verification email that confirms the user's email address and 'subscribes' them to the product
Back-in-stock Notification: letting the user know their item is back in stock

Create a Collection

Turn Dev Mode on.

Create a new Collection in the Content Manager named: backInStock. In the ‘What is this collection for?’ field, make sure to select - Site content.

In the Collection create the following fields by clicking on the ‘+’ button in the table:

product - The ‘Field Type’ should be a ‘Reference’ to a product in your store. The referenced collection should be the collection that contains your store products
contactId - Text field type
notificationSent - Boolean field type
emailConfirmed - Boolean field type

Go to the product page and add a button for your Back-in-stock notification. Change the text of the button to ‘Notify me when back in stock’. In the properties panel:

Make it Hidden by checking the checkbox
Give it an ID of backInStockButton

One the Product Page, make sure the product element ID is "productPage" in the properties panel. In the left side bar, click on the page, then click on the app inside the page and add the ID in the properties panel.

Create the function that will display the button if the product is out of stock. The function checks the status of the product, and displays the “Notify me when back in stock’ button when the product isn’t available. Additionally, it creates an onClick event that opens a lightbox for the user to add their details when the button is clicked

Note: It’s best practice to create an async function outside of the onReady, to optimize performance

Copy and paste the function code to your product page code editor:

If you noticed in the code, you need to import the wixWindow API in order to open a lightbox that will let customers subscribe to the product.

Create a Lightbox

Now it’s time to build the lightbox. Go to the Add button -> Interactive -> Lightbox, and choose one from the “Subscribe” category:

Click the Lightbox settings button and set the automatically display on pages to - No
Change the lightbox name to “Enter Details”

Now, customize the lightbox by deleting the existing text fields and adding a few new elements. Click on the Add button -> Input and drag three text inputs and add the text “First Name”, Last Name”, and “Email” to the inputs.

Then, give the text inputs the following IDs in the properties panel:

firstNameInput
lastNameInput
emailInput

Add a submit button to subscribe to the product. Go to Add+ -> Button and drag one you like and give it an ID: submitBackInStockButton.

Now, drag a Text element into the Lightbox and place it under the Submit button to show the user a result text after subscribing. Give it the ID resultsText and set it to hidden in the properties panel. The text should say “You will soon receive an email verifying your email address and that you wish to be notified when this product is back in stock.”

Make sure that you’re on the lightbox page and paste the following code into the code editor of the lightbox:

This code includes:

Init page function - this will automatically pull the contact details if the user is logged in to the Lightbox’ fields.
On click event - runs the functions when a customer clicks on the ‘Submit back in stock button.’

Backend Function

Lets create the backend function: Go to the left sidebar -> click on ‘Code files’ -> and hover over the backend files - click plus and add a .jsw file. Call it “backInStock.jsw”.

Paste the code below to the backend file page. In the code, make sure to update the URL to the URL of your website.

About this code:

Gets the user and product data and inserts it to the backInStock collection
This big function checks different use cases whether customers are logged in, exist or need to be created. Then it inserts the data to the collection
After inserting to the collection it sends the triggered email
sendConfirmationEmail function - sends the validation email with all the details
confirmEmail function - triggers the email with the confirmation and updates the ‘emailConfirmed’ field to True
sendBackinStockNotification - checks if the item is back in stock and triggers the back in stock email to the customer, using a cron job that runs every hour
emailContact function - sends the triggered email with the products details

Dynamic Page

Now it's time to create the dynamic page that you’ll use for the email validation of the customer.

Go to Databases on the left tree - click on backInStock collection - and Add a Dynamic Page. Once it’s created you’ll automatically get into the page.

Now, in the Dynamic Pages section on the left tree, hover on BackInStock (Title) page, then click the menu --> Settings, and in the settings under ‘Page Info’, change the URL to: backinstock/emailconfirmation/{ID}.

Important! The name of your dynamic will change automatically to: BackInStock Emailconfirmation (ID). Rename it to: EmailConfirmation.

Under SEO (Google) - hide this page from search results, as you don’t want non-relevant people to get to this page.

This Dynamic page will be displayed when the user confirms their email address from the verification email. In the dynamic page, drag a few text elements and an image:

Customer Name
Confirmation Text - Give it an ID of “confirmedText” in the properties panel
Image

Now you can connect these elements to the database by clicking on each element -> Connect button -> and choose the correct field from the Products collection:

Name -> Title
Confirmation Text - You don't need to connect this text, as it will be pulled in from the code we added earlier.
Image -> Product main media (image)

Change the ID of the Dataset to ‘backInStockDataset’.

Insert the following code to the dynamic page code panel:

This function sends the dynamic page ID to confirmEmail function.

Scheduled Jobs

Build the cron job that will run every hour and checks if the product is back in stock, and if true - triggers the email.

Click on Code Files on the left tree -> go to Backend Files and click +. Click on Job Scheduler and it will automatically create a file named ‘jobs.config’. Add the code below to ‘jobs.config’:

{

"jobs": [{

"functionLocation": "/backInStock.jsw",

"functionName": "sendBackInStockNotification",

"description": "Send A Back In Stock Notification",

"executionConfig": {

"cronExpression": "0 * * * *"

}

}]

}

Emails

Now it's time to create your triggered emails. One email is the Verification Email and the second is the Back-in-Stock Notification.

Go to your site dashboard under Marketing & SEO --> Dev tools --> Triggered emails.

The first email is the verification. Format the email as follows:

Subject: Verify Your Email Address

Title: Please Verify Your Email Address

Body Text:

Note! In this email, you need to use three variables: userName, productName, and link. Click Add Variable on the left side to so.

Hi ${userName},

Confirm your email in the link below to get notified when ${productName} is back in stock:

${link}

Happy Shopping

Make sure to click Save & Publish. Once you publish the email, you’ll get a screen with the ID of the email. Copy it and insert it to the backInStock.jsw backend code file, in the "sendConfirmationEmail” function - and change the ID to the one you created and copied.

Now it's time to create the Back-in-stock triggered email. You can follow the same steps and use the same variables. Your email should look like this: