Embed code subscribe push notification

English - Subiz Document

Search…

Hello, how do we support you?

Subiz overview

Getting Started

Using advanced Subiz

Product

Automatic interaction

High converting pop-ups

Create a Pop-up campaign

Managing user data

Integration with third parties

Synchronize users data with Subiz API

How to use Js API with Google Tag Manager

Embed code subscribe push notification

Reports

Payment

Embed code subscribe push notification

The article instructs you the way how to invite user to receive browser notifications, in order to when user leave the website, they still receive notification about your message that you sent them.

Subscribe Push Notification is a powerful feature that helps you attract the User back to the website based on the interactive message on the Subiz widget. In this document, we give an example to help you attract more users to agree to receive notifications on the screen.
Implementation script 
The script is to set a popup to ask if the visitor agrees to receive the notification. When users click agree, Subiz API Javascript will call to receive notifications to activate the installation.
The screen asks the customer to agree to receive browser notifications
How to installation in your website 
In order to install Javascript API in your website, please copy the following html code and placed after the Subiz embed code in the website, before the tag. 
1
<style type="text/css">
2
@import url('https://fonts.googleapis.com/css?family=Muli:300,400,700&subset=latin-ext,vietnamese');
3
body{margin:0px; padding: 0px;font-family: 'Muli', sans-serif; font-weight: 400; font-size: 16px; color: #4a4a4a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
4
*{box-sizing: border-box;}
5
.popup-subscribire{position: fixed; top: 20px; width:500px; left: 50%; margin-left:-250px; padding: 18px; border-radius: 3px; background: #FFF; box-shadow: 0px 0px 20px rgba(5,25,62, .15);z-index:99999;display: none;}
6
.popup-logo{ display: inline-block; vertical-align: top; width:80px; margin-right:20px;}
7
.popup-logo img{max-width:100%;}
8
.popup-summary{display: inline-block; width:calc(100% - 80px - 25px); line-height: 21px;}
9
.popup-bottom{position: relative; width:100%; padding: 5px 0 0 0; text-align: right;}
10
.popup-bottom a{ display: inline-block;vertical-align: middle; margin:0 3px; height: 40px; line-height: 38px; padding: 0 25px; color: #1890ff; font-size: 16px; font-weight:500; text-transform: uppercase; text-decoration: none; border-radius: 3px;}
11
.popup-bottom a.ok{ color: #FFF; background-color: #1890ff;}
12
</style>
13
​
14
<div class="popup-subscribire">
15
  <div class="popup-logo"><img src="logo.png" alt=""></div>
16
  <div class="popup-summary">Click vào ĐỒNG Ý để nhận được các thông tin hữu ích từ Subiz.</div>
17
  <div class="popup-bottom">
18
    <a href="javascript:void(0);" onclick="closePopUp();">Không, cảm ơn</a>
19
    <a href="javascript:void(0);" class="ok" onclick="subiz('subscribePushNotification');closePopUp()">Đồng ý</a>
20
  </div>
21
</div>
22
​
23
<script type="text/javascript">
24
  function closePopUp(e) {
25
    document.querySelector('.popup-subscribire').style.display = 'none'
26
    if ( typeof(Storage) !== 'undefined') {
27
        sessionStorage.setItem('closePopUp', 1);
28
    }    
29
  }
30
  navigator.getBattery().then(function(battery) {
31
    if (battery.charging && battery.chargingTime === 0) {
32
      console.log("I'm a desktop")
33
      if(!window.subiz) {
34
        console.log('Have no code subiz')
35
        return
36
      }
37
      subiz('checkPushNotification', function(status) {
38
      if(status || (typeof(Storage) !== 'undefined' && sessionStorage.getItem('closePopUp'))) return
39
        document.querySelector('.popup-subscribire').style.display = 'block'
40
      })
41
    }
42
  });
43
</script>
Copied!
Noted:
Replace the path of logo.png with the path of your logo.
Custom styles and colors to match them by Customize CSS. You should also match CSS with css file of the web to make it neat.
The question popup will show up until the user closes.

How to use Js API with Google Tag Manager

Reports

Last modified 2yr ago

Copy link

Contents

Implementation script

How to installation in your website