What is a web push?

If a user who accesses your homepage accepts the "Notification" pop-up consent, you can send them a message. Notifications are received on any PC or mobile device with a web browser.

Similar to Push messages in Android or iOS mobile apps, but without the user having to install the app. All you need to do is allow the "notification" pop-up in your web browser to receive all messages, which is effective for marketing.


Notification consent popup example:



Advantages of Vivoldi Web push

- Receiving rates are much higher than email, and messages can be received from any device with a web browser, such as a desktop PC, mobile phone, or tablet.
  (However, you will not receive notifications in older Microsoft Internet Explorer web browsers.)
- You can send more content than SMS text messages. (Can attach company logo and image)
- When a user clicks on the notification message, they can be directed to a specific website.
- Simply insert JavaScript code provided by Vivoldi on your homepage to instantly subscribe to and receive notifications.

How web push are used

1. Insert the JavaScript code below at the bottom of your home page.
<script src="https://resource.vivoldi.com/common/js/webpush.min.js?ver=20200128" type="text/javascript"></script>
<script>
webpush.register({
    apiKey: 'Your API Key',
    publicKey: 'Your domain public key',
    customKey: 'Member id',
    customField1: '',
    customField2: '',
    customField3: '',
    serviceWorkerPath: '/sw.js',
    callback: function(isSuccess, response){
        console.log(isSuccess);
        console.log(response);
        console.log('pushId:' + response.result);
    }
});
</script>
- apiKey: You can create an API KEY on the "Dashboard >> Developer API" page.
- publicKey: You can check it after registering a domain on the "Dashboard >> Web Push >> Domain" page.
- customKey: Enter the user ID of the user who logged into your website. Leave blank for not login users.
   (Value must not be duplicated.)
   Typically, you enter the user ID stored in Session.
- customField1, customField2, customField3: Enter additional information to identify the user in the Vivoldi dashboard.
- serviceWorkerPath: Enter the relative location of the sw.js file. Normally save sw.js file in homepage root (/).
   The sw.js file is required for users to subscribe to notifications.
- callback.isSuccess: A value of true means notification subscription succeeded; a value of false fails.
- callback.response: The pushId is stored in the result value.
   If you want your website to send notifications individually to users using Vivoldi's API, store the pushId value in your database.
   PushId is required for the message sending API provided by Vivoldi.
   PushId is not required when sending messages individually from Vivoldi dashboard.
2. sw.js file download
- Download the sw.js file and upload it to your homepage root (/) using FTP.
3. Notification subscription
- Once you have accessed your homepage, click the "Allow" button when the "Notify" window appears.
4. Company logo change
- If you do not upload a company logo from the dashboard, the Vivoldi logo is displayed in the message by default.
- Upload your company name and company logo from the "Dashboard >> Settings >> Company Settings" page.
5. Send message
- Go to the "Dashboard >> Message >> Domain subscription message" page and click the "Send Message" button to send the notification message.

If you are an individual or company that pays for the first time, Vivoldi supports script insertion and functionality.