Web Push Subscription

To send push notifications to website visitors, you must first obtain the browser’s push notification permission.

Vivoldi provides a JavaScript SDK that simplifies this process. By adding the script to the <head>...</head> tag, permission requests and subscription data storage are handled automatically.

Users who grant permission can be viewed on the [Push Messages → Website Push] page in the dashboard. You can then send messages to all subscribed users at once.

example.html 
<html>
<head>
<title>example page</title>
<script src="https://opencdn.vivoldi.com/js/webpush.min.js?v=202507301"></script>
<script>
const apiKey = 'oc3w9m4ytso9mv5e8yse9XXXXXXXXXX';
// Public Key of the domain registered on the “Push Message -> Domain Management” page.
const publicKey = 'XXXXXYTRlpG8mXXXXXiuBZ6BtjyOfgPsDArFYWF2PxZbY4egmDNias1gEfN_5wftScr39K8BbcjXXXXX';
const params = {apiKey:apiKey, publicKey:publicKey};
// Display notification permission pop-up (the pop-up will not appear if permission has already been granted)
function showNotificationPermission() {
    webpush.register(params);
}
</script>
</head>

<body>

<button type="button" onclick="showNotificationPermission()">Permission Request</button>

</body>
</html>
sw.min.js 
'use strict';const a0_0x5374e1=a0_0xe038;(function(_0x1227c0,_0x51a60b){const _0x31ab77=a0_0xe038,_0x20d84d=_0x1227c0();while(!![]){try{const _0x12de05=parseInt(_0x31ab77(0x189))/0x1+-parseInt(_0x31ab77(0x188))/0x2+-parseInt(_0x31ab77(0x175))/0x3+parseInt(_0x31ab77(0x196))/0x4+parseInt(_0x31ab77(0x191))/0x5*(parseInt(_0x31ab77(0x179))/0x6)+parseInt(_0x31ab77(0x190))/0x7*(-parseInt(_0x31ab77(0x18a))/0x8)+parseInt(_0x31ab77(0x181))/0x9*(parseInt(_0x31ab77(0x173))/0xa);if(_0x12de05===_0x51a60b)break;else _0x20d84d['push'](_0x20d84d['shift']());}catch(_0x40c5f5){_0x20d84d['push'](_0x20d84d['shift']());}}}(a0_0x3c7d,0xc9d27));function a0_0xe038(_0x596680,_0x1be660){const _0x3c7dc3=a0_0x3c7d();return a0_0xe038=function(_0xe03880,_0x22c065){_0xe03880=_0xe03880-0x170;let _0x16ce5f=_0x3c7dc3[_0xe03880];return _0x16ce5f;},a0_0xe038(_0x596680,_0x1be660);}function a0_0x3c7d(){const _0x45d9ad=['waitUntil','notification','20673aXYLrA','navigator','title','focus','icon','toLowerCase','image','168378lbyyZD','193689SqVukM','41896sLUVSk','macintosh','close','registration','userAgent','body','1253fKQvUq','2054765fkWElD','install','includes','openWindow','badge','4620004XrYmFj','notificationclick','ko-KR','url','showNotification','parse','바로가기','window','platform','mac','actions','1490bVkBER','action','1993722LznGRH','navigate','button','activate','12Yewkpl','push','matchAll','data','then','addEventListener'];a0_0x3c7d=function(){return _0x45d9ad;};return a0_0x3c7d();}self['addEventListener'](a0_0x5374e1(0x192),_0x220cef=>{self['skipWaiting']();}),self[a0_0x5374e1(0x17e)](a0_0x5374e1(0x178),_0x4e57ea=>{const _0x4e29f9=a0_0x5374e1;_0x4e57ea[_0x4e29f9(0x17f)](clients['claim']());}),self[a0_0x5374e1(0x17e)](a0_0x5374e1(0x17a),function(_0x5b8772){const _0x578b75=a0_0x5374e1,_0x6a0810=JSON[_0x578b75(0x19b)](_0x5b8772[_0x578b75(0x17c)]['text']()),_0x41c647=navigator['language'],_0x3709b8=_0x41c647==='ko'||_0x41c647===_0x578b75(0x198),_0x398015=self[_0x578b75(0x182)]['platform']['toLowerCase']()[_0x578b75(0x193)](_0x578b75(0x171)),_0x570dee=self[_0x578b75(0x182)]['userAgent']['toLowerCase']()[_0x578b75(0x193)](_0x578b75(0x18b)),_0x417e2c={'tag':'renotify','renotify':!![],'body':_0x6a0810[_0x578b75(0x18f)],'icon':_0x6a0810[_0x578b75(0x185)],'badge':_0x6a0810[_0x578b75(0x195)],'requireInteraction':!![],'vibrate':[0x12c,0x64,0x190,0xc8,0x1f4],'data':_0x6a0810,'actions':[{'action':'go','type':_0x578b75(0x177),'title':_0x3709b8?_0x578b75(0x19c):'GO'},{'action':_0x578b75(0x18c),'type':'button','title':_0x3709b8?'닫기':'CLOSE'}]};_0x6a0810[_0x578b75(0x187)]&&(_0x417e2c[_0x578b75(0x187)]=_0x6a0810[_0x578b75(0x187)]),(_0x398015||_0x570dee)&&delete _0x417e2c[_0x578b75(0x172)],_0x5b8772['waitUntil'](self[_0x578b75(0x18d)][_0x578b75(0x19a)](_0x6a0810[_0x578b75(0x183)],_0x417e2c));}),self[a0_0x5374e1(0x17e)](a0_0x5374e1(0x197),function(_0x278188){const _0x1737d2=a0_0x5374e1;_0x278188['notification'][_0x1737d2(0x18c)]();const _0x381024=self['navigator'][_0x1737d2(0x170)][_0x1737d2(0x186)]()[_0x1737d2(0x193)]('mac'),_0x419533=self[_0x1737d2(0x182)][_0x1737d2(0x18e)][_0x1737d2(0x186)]()[_0x1737d2(0x193)](_0x1737d2(0x18b));if(_0x381024||_0x419533)_0x278188[_0x1737d2(0x17f)](clients[_0x1737d2(0x17b)]({'type':_0x1737d2(0x19d)})[_0x1737d2(0x17d)](_0x55a8eb=>{const _0x25611a=_0x1737d2;_0x55a8eb['length']>0x0?(_0x55a8eb[0x0][_0x25611a(0x176)](_0x278188[_0x25611a(0x180)][_0x25611a(0x17c)][_0x25611a(0x199)]),_0x55a8eb[0x0][_0x25611a(0x184)]()):clients[_0x25611a(0x194)](_0x278188[_0x25611a(0x180)]['data'][_0x25611a(0x199)]);}));else switch(_0x278188[_0x1737d2(0x174)]){case'go':_0x278188[_0x1737d2(0x17f)](clients[_0x1737d2(0x194)](_0x278188[_0x1737d2(0x180)][_0x1737d2(0x17c)][_0x1737d2(0x199)]));break;case _0x1737d2(0x18c):break;default:_0x278188['waitUntil'](clients[_0x1737d2(0x194)](_0x278188[_0x1737d2(0x180)][_0x1737d2(0x17c)][_0x1737d2(0x199)]));}});

Push Notification Setup

  1. 1 In the [Developer API] menu of the dashboard, generate an API Key, then register your domain in [Push Messages → Domain Management] and check the publicKey.
  2. 2 Automatic execution immediately after page load may be blocked by the browser. Call webpush.register() within a user interaction, such as a button click.
  3. 3 Save the sw.min.js file and upload it to the root path of your site. Example: https://example.com/sw.min.js

Check on the sample page whether the Permission Request button displays the notification permission popup. If you click Allow, you can view the subscription data in the dashboard on the [Website Push Delivery] page.

What is Web Push Subscription?

Web push subscription is the process of registering a user to receive push notifications after they grant permission in the browser.

  • Request browser notification permission
  • Create user subscription data
  • Register the user as a push notification recipient

In short, it is the starting point for sending push notifications.

Web Push Flow

Web push operates through the following steps.

  1. Request notification permission from the user
  2. User grants permission
  3. Subscription data is created in the browser
  4. Subscription data is registered on the server
  5. Push notifications can then be sent

When to Use Push Subscription

Use this feature when you want to re-engage visitors even after they leave your website.

Users who grant browser notification permission can receive announcements, promotions, and personalized alerts directly from your website without installing an app, making it highly effective for improving retention and conversion rates.

Required Components for Web Push Integration

To successfully integrate Vivoldi push notifications, the following three components are required.

  1. API Key and Public Key: Unique keys generated in the dashboard, included in the SDK script to communicate with Vivoldi servers.
  2. JavaScript SDK: Inserted into the section of your webpage to manage notification permission prompts.
  3. Service Worker (sw.min.js): A required file for receiving push messages in the browser background, which must be uploaded to the root directory of your site.

Requesting Notification Permission & Best Practices

According to browser policies, notification permission requests should be triggered only after a direct user interaction, such as a click.

Bind the webpush.register() function in your example code to a button event to create a natural subscription flow.

If a user denies permission, the browser will not show the prompt again until it is manually changed in settings, so choosing the right timing for the request is critical.

Subscribers = Reachable Audience

The number of users who grant permission directly represents the audience that can receive push notifications.

For example, if 100 users grant permission, all 100 will receive messages when a push notification is sent.

Subscription status can be monitored in real time from the dashboard, and a larger subscriber base increases the reach of your push notifications.
Users who deny permission cannot receive push messages.

Use cases

Use your subscriber list to deliver targeted messages and communicate announcements or special offers more effectively.

  • Marketing campaigns: Promote events, discounts, and announcements
  • Re-engagement: Send notifications that encourage users to return to your service
  • Real-time alerts: Notify users of order status or ongoing events