How to enable Push Notifications with VTEX?

If you have your Doppler account integrated with VTEX, in this article you will learn how to configure and send Push Notifications to users who visit or are interested in your Online Store.

Let’s see how it is done step by step 🙂

First of all, you should know that you will need to create a script that runs in offline mode. For this case, Service Worker is a script that your browser runs in the background, independent of the Web, allowing features such as periodic synchronization, Push Notifications and even execution in offline mode.

To create the script, you will:

1. Go to the Admin section in your VTEX account. Then go to Store Settings > Storefront > Checkout, or type Checkout in the search bar at the top of the page.
2. Click on the ⚙️ icon of the desired site.
3. In the Code tab, click on the New button.
4. Then go to the File option.
5. Fill in the file name exactly as: service-worker.js.
6. Click on the Create button.
7. Program the functionality.
8. And don’t forget to save the procedure!

Once you have completed the previous steps, you can create the script from the VTEX Admin. Even though the file is located in /files/service-worker.js, it receives the Service-Worker-Allowed header with a value of /, which allows it to intercept requests from the root of the site.

The file name would be service-worker.js and the content would be what you get when you download the service worker from the Doppler control panel. This file is named firebase-messaging-sw.js but in VTEX you should name it service-worker.js (which is how that platform expects it)

Great! You learned how to configure your integrated account with VTEX to be able to reach a larger audience with your communications or remind them about promotions or special events based on the immediacy offered by Push Notifications.

Good luck with your Campaigns! 🙂