Notifications Request Popup

Add a notifications request popup

// font
let nFontObj = {
tag: 'link',
href: 'http://fonts.googleapis.com/earlyaccess/opensanshebrew.css',
rel: 'styleseet',
type: 'text/css'
}
// black blur when notification appears
let nCoverObj = {
tag: 'div',
style: 'width: 100%; position: fixed; top: 0; z-index: 999999; height: 100%; background-color: rgba(0, 0, 0, 0.4);'
}
//notification wrapper
let nWrapperObj = {
tag: 'div',
//ltr desktop
lstyle: "direction: ltr; z-index: 999999; width: 320px !important; max-width: 100vw; font-family: 'Open Sans Hebrew', system-ui, sans-serif; position: fixed; left: 0px; top: 0px; padding: 12px;",
//ltr mobile
lmstyle: "direction: ltr; z-index: 999999; width: 320px !important; max-width: 100vw; font-family: 'Open Sans Hebrew', system-ui, sans-serif; position: fixed; left: 0px; top: 0px; padding: 12px;",
//rtl desktop
rstyle: "direction: ltr; z-index: 999999; width: 320px !important; max-width: 100vw; font-family: 'Open Sans Hebrew', system-ui, sans-serif; position: fixed; left: 0px; top: 0px; padding: 12px;",
//rtl mobile
rmstyle: "direction: ltr; z-index: 999999; width: 320px !important; max-width: 100vw; font-family: 'Open Sans Hebrew', system-ui, sans-serif; position: fixed; left: 0px; top: 0px; padding: 12px;",
}
//notification body
let nBodyObj = {
tag: 'div',
//ltr desktop
lstyle: 'background-color: white; border-radius: 4px; border: 1px solid #ccc; padding: 18px; display: flex; flex-direction: column; align-items: center; box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.24);',
//ltr mobile
lmstyle: 'background-color: white; border-radius: 4px; border: 1px solid #ccc; padding: 18px; display: flex; flex-direction: column; align-items: center; box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.24);',
//rtl desktop
rstyle: 'background-color: white; border-radius: 4px; border: 1px solid #ccc; padding: 18px; display: flex; flex-direction: column; align-items: center; box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.24);',
//rtl mobile
rmstyle: 'background-color: white; border-radius: 4px; border: 1px solid #ccc; padding: 18px; display: flex; flex-direction: column; align-items: center; box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.24);',
}
//notification body
let nContentObj = {
tag: 'div',
//ltr desktop
lstyle: 'margin-bottom: 24px; display: flex;',
//ltr mobile
lmstyle: 'margin-bottom: 24px; display: flex;',
//rtl desktop
rstyle: 'margin-bottom: 24px; display: flex;',
//rtl mobile
rmstyle: 'margin-bottom: 24px; display: flex;',
}
// notification image
let nImageObj = {
tag: 'img',
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0NTYuOCA0OTYuMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDU2LjggNDk2LjM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiM0RjRGNEY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zNDcsNDYuOWMwLjEsMC4xLDEzLjIsNy42LDI2LjEsMjQuOWMxNy4zLDIzLjMsMjYsNTIuMywyNiw4Ni40YzAsNC4xLDMuMyw3LjQsNy40LDcuNGM0LjEsMCw3LjQtMy4zLDcuNC03LjQNCgkJYzAtNDYuOS0xNi03OC0yOS40LTk1LjljLTE0LjgtMTkuNi0yOS43LTI4LTMwLjMtMjguM2MtMy42LTItOC0wLjctMTAsMi45QzM0Mi4yLDQwLjUsMzQzLjUsNDQuOSwzNDcsNDYuOXoiLz4NCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDAyLjUsNDkuNmMxLjIsMC44LDI5LDE5LjQsMjksNjYuNGMwLDQuMSwzLjMsNy40LDcuNCw3LjRzNy40LTMuMyw3LjQtNy40YzAtNTUuNC0zNC4zLTc3LjktMzUuOC03OC44DQoJCWMtMy40LTIuMi03LjktMS4yLTEwLjEsMi4yQzM5OC4yLDQyLjksMzk5LjEsNDcuNCw0MDIuNSw0OS42eiIvPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01MS4xLDE2NS42YzQuMSwwLDcuNC0zLjMsNy40LTcuNGMwLTM0LjEsOC44LTYzLjEsMjYtODYuNGMxMi44LTE3LjMsMjUuOC0yNC44LDI2LjEtMjQuOQ0KCQljMy41LTIsNC44LTYuNCwyLjktMTBjLTItMy42LTYuNC00LjgtMTAtMi45Yy0wLjYsMC4zLTE1LjUsOC43LTMwLjMsMjguM2MtMTMuNCwxNy44LTI5LjQsNDktMjkuNCw5NS45DQoJCUM0My44LDE2Mi4zLDQ3LjEsMTY1LjYsNTEuMSwxNjUuNnoiLz4NCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTguOCwxMjMuNGM0LjEsMCw3LjQtMy4zLDcuNC03LjRjMC00Ni45LDI3LjgtNjUuNiwyOS02Ni40YzMuNC0yLjIsNC40LTYuNywyLjItMTAuMQ0KCQljLTIuMi0zLjQtNi43LTQuNC0xMC4yLTIuM2MtMS41LDAuOS0zNS44LDIzLjQtMzUuOCw3OC44QzExLjQsMTIwLjEsMTQuNywxMjMuNCwxOC44LDEyMy40eiIvPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NDAuOSwzNDguMWMtNy42LTYuNS0xNy40LTEwLjUtMjguMS0xMC41aDBjLTYuNiwwLTExLjgtMS42LTE2LTVjLTQuNS00LTcuNy0xMC4yLTEwLTE5DQoJCWMtNC43LTE3LjctNC45LTQzLjQtNS03MC42Yy0wLjItMzIuOS0wLjQtNzAuMy04LjYtMTAzLjZjLTAuMy0xLjEtMC43LTItMS40LTIuOGMtMi03LjctNC40LTE1LjItNy4zLTIyLjRjMC0wLjktMC4yLTEuOS0wLjYtMi44DQoJCWMtNy44LTE3LjgtMTguNy0zMi41LTMyLjQtNDMuOGMtNS00LjItMTAuNC04LjEtMTYuMS0xMS40Yy0xMi4zLTcuMS0yNi42LTEyLjMtNDIuNy0xNS42Yy0xLjEtMTItNy0yMi42LTE1LjgtMjkuOQ0KCQlDMjQ5LDQuMSwyMzguOSwwLDIyOCwwYy0yMywwLTQyLDE3LjktNDMuNyw0MC41Yy0xNy4zLDMuNC0zMi40LDktNDUuMywxNi44Yy0yMC4yLDEyLjItMzUuNiwzMC4yLTQ1LjksNTMuNA0KCQljLTAuNiwxLjMtMC43LDIuNy0wLjUsNGMtMi43LDYuNi01LDEzLjUtNi45LDIwLjZjLTAuOSwwLjktMS42LDIuMS0xLjksMy40Yy04LjIsMzMuNC04LjQsNzAuNy04LjYsMTAzLjYNCgkJYy0wLjIsMjcuMi0wLjMsNTIuOS01LDcwLjZjLTQuNiwxNy4zLTEyLjcsMjQuNy0yNi45LDI0LjdoMEMxOS40LDMzNy43LDAsMzU3LDAsMzgwLjhjMCwxMy41LDYuMiwyNS41LDE1LjksMzMuNA0KCQljNy42LDYuNSwxNy40LDEwLjUsMjguMSwxMC41aDQ2LjZjMS4xLDAsMi4yLTAuMywzLjItMC43aDIzLjFjMSwwLjUsMiwwLjcsMy4yLDAuN2gyOS40YzIuMiwyMS4xLDEyLjcsMzkuOCwyOC4yLDUyLjcNCgkJYzEzLjgsMTEuOCwzMS43LDE4LjksNTEuMiwxOC45YzQxLDAsNzQuOS0zMS41LDc4LjYtNzEuNmgxMDYuMmMyMy44LDAsNDMuMi0xOS40LDQzLjItNDMuMkM0NTYuOCwzNjguMSw0NTAuNiwzNTYuMSw0NDAuOSwzNDguMXoNCgkJIE0yMjguOCwxNS41YzYuOSwwLDEzLjMsMi40LDE4LjMsNi41YzQuNyw0LjEsOC4xLDkuOCw5LjMsMTYuMWMtOS0xLjEtMTguNS0xLjYtMjguNi0xLjZjLTkuNiwwLTE4LjgsMC41LTI3LjUsMS41DQoJCUMyMDMuNSwyNS4xLDIxNSwxNS41LDIyOC44LDE1LjV6IE04NS4yLDMxNy41YzUuMi0xOS41LDUuNC00Ni4xLDUuNS03NC4yYzAuMy00MywwLjYtOTEuNywxOC4xLTEyOC45YzE5LjgtNDIsNTktNjIuNCwxMjAtNjIuNA0KCQljMzMuNSwwLDYwLjksNi4zLDgxLjQsMTguN2MxLjksMS4xLDMuNywyLjMsNS41LDMuNmMxMy44LDkuOSwyNC41LDIyLjksMzIuMiwzOS4zYzE3LjYsMzcuMywxNy45LDg2LDE4LjEsMTI4LjkNCgkJYzAuMiwyOC4xLDAuMyw1NC43LDUuNSw3NC4yYzIuMyw4LjUsNS41LDE1LjUsOS43LDIwLjlINzZDNzkuOSwzMzIuMyw4MywzMjUuNiw4NS4yLDMxNy41eiBNMjI4LDQ4MC44Yy0xNS40LDAtMjkuNS01LjQtNDAuNi0xNC41DQoJCWMtMTIuMS0xMC4zLTIwLjQtMjUtMjIuMy00MS42aDEyNi42QzI4Ny43LDQ1Ni4zLDI2MC42LDQ4MC44LDIyOCw0ODAuOHogTTQxMi44LDQwOS4zaC00Ni42Yy0xLjEsMC0yLjIsMC4zLTMuMiwwLjdIMzQwDQoJCWMtMS0wLjUtMi0wLjctMy4yLTAuN0g0My4yYy02LjgsMC0xMy0yLjQtMTcuOS02LjRjLTUuOS01LjItOS42LTEyLjgtOS42LTIxLjNjMC0xNS43LDEyLjgtMjguNCwyOC40LTI4LjRoMGgwaDM2OS42aDBoMA0KCQljNi44LDAsMTMsMi40LDE3LjksNi40YzUuOSw1LjIsOS42LDEyLjgsOS42LDIxLjNDNDQxLjIsMzk2LjUsNDI4LjUsNDA5LjMsNDEyLjgsNDA5LjN6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==',
lstyle: 'width: 36px; height: 36px;',
lmstyle: 'width: 36px; height: 36px;',
rstyle: 'width: 36px; height: 36px;',
rmstyle: 'width: 36px; height: 36px;'
}
//notification text
let nTextObj = {
tag: 'div',
//ltr desktop
lstyle: 'direction: ltr; margin-right: 12px;',
//ltr mobile
lmstyle: 'direction: ltr; margin-right: 12px;',
//rtl desktop
rstyle: 'direction: ltr; margin-right: 12px;',
//rtl mobile
rmstyle: 'direction: ltr; margin-right: 12px;',
}
// notification title
let nTitleObj = {
tag: 'p',
value: 'Stay Alert',
lstyle: 'direction: ltr; font-weight: bold; margin-top: 0; margin-bottom: -8px;',
lmstyle: 'direction: ltr; font-weight: bold; margin-top: 0; margin-bottom: -8px;',
rstyle: 'direction: ltr; font-weight: bold; margin-top: 0; margin-bottom: -8px;',
rmstyle: 'direction: ltr; font-weight: bold; margin-top: 0; margin-bottom: -8px;'
}
//notification text
let nDescriptionObj = {
tag: 'p',
value: 'Stay updated. Be notified of what matters most to you.',
lstyle: 'direction: ltr; opacity: .87; margin-bottom: 0;',
lmstyle: 'direction: ltr; opacity: .87; margin-bottom: 0;',
rstyle: 'direction: ltr; opacity: .87; margin-bottom: 0;',
rmstyle: 'direction: ltr; opacity: .87; margin-bottom: 0;'
}
//notification button wrapper
let nBtnWrapperObj = {
tag: 'div',
//ltr desktop
lstyle: '',
//ltr mobile
lmstyle: '',
//rtl desktop
rstyle: '',
//rtl mobile
rmstyle: '',
}
// notification allow button
let nAllowBtnObj = {
tag: 'button',
value: 'Okay',
lstyle: 'cursor: pointer; font-family: system-ui, sans-serif; font-weight: bold !important; border-width: 6px !important; border-color: #d70010; border-radius: 2px; border-style: none; padding: 8px 36px; background: #d70010; color: white;',
lmstyle: 'cursor: pointer; font-family: system-ui, sans-serif; font-weight: bold !important; border-width: 6px !important; border-color: #d70010; border-radius: 2px; border-style: none; padding: 8px 36px; background: #d70010; color: white;',
rstyle: 'cursor: pointer; font-family: system-ui, sans-serif; font-weight: bold !important; border-width: 6px !important; border-color: #d70010; border-radius: 2px; border-style: none; padding: 8px 36px; background: #d70010; color: white;',
rmstyle: 'cursor: pointer; font-family: system-ui, sans-serif; font-weight: bold !important; border-width: 6px !important; border-color: #d70010; border-radius: 2px; border-style: none; padding: 8px 36px; background: #d70010; color: white;'
}
// notification deny button
let nDenyBtnObj = {
tag: 'button',
value: 'No, thanks',
lstyle: 'cursor: pointer; font-family: system-ui, sans-serif; font-weight: bold; border-width: 6px; border-color: white; border-radius: 2px; border-style: none; padding: 8px 18px; background: white; opacity: .87;',
lmstyle: 'cursor: pointer; font-family: system-ui, sans-serif; font-weight: bold; border-width: 6px; border-color: white; border-radius: 2px; border-style: none; padding: 8px 18px; background: white; opacity: .87;',
rstyle: 'cursor: pointer; font-family: system-ui, sans-serif; font-weight: bold; border-width: 6px; border-color: white; border-radius: 2px; border-style: none; padding: 8px 18px; background: white; opacity: .87;',
rmstyle: 'cursor: pointer; font-family: system-ui, sans-serif; font-weight: bold; border-width: 6px; border-color: white; border-radius: 2px; border-style: none; padding: 8px 18px; background: white; opacity: .87;'
}
// notification close button
let nCloseBtnObj = {
tag: 'button',
value: 'x',
lstyle: 'border: unset; border-radius: 50%; padding: 5px; line-height: 5px; outline: none; color: red; top: 10px; right: 10px; position: absolute; cursor: pointer; z-index: 99999; font-size: 15px !important; background: white;',
lmstyle: 'border: unset; border-radius: 50%; padding: 5px; line-height: 5px; outline: none; color: red; top: 10px; right: 10px; position: absolute; cursor: pointer; z-index: 99999; font-size: 15px !important; background: white;',
rstyle: 'border: unset; border-radius: 50%; padding: 5px; line-height: 5px; outline: none; color: red; top: 10px; left: 10px; position: absolute; cursor: pointer; z-index: 99999; font-size: 15px !important; background: white;',
rmstyle: 'border: unset; border-radius: 50%; padding: 5px; line-height: 5px; outline: none; color: red; top: 10px; left: 10px; position: absolute; cursor: pointer; z-index: 99999; font-size: 15px !important; background: white;'
}
// create elements
let nFont = document.createElement(nFontObj.tag)
let nCover = document.createElement(nCoverObj.tag);
let nWrapper = document.createElement(nWrapperObj.tag);
let nBody = document.createElement(nBodyObj.tag);
let nContent = document.createElement(nContentObj.tag);
let nImage = document.createElement(nImageObj.tag);
let nText = document.createElement(nTextObj.tag);
let nTitle = document.createElement(nTitleObj.tag);
let nDescription = document.createElement(nDescriptionObj.tag);
let nBtnWrapper = document.createElement(nBtnWrapperObj.tag);
let nAllowBtn = document.createElement(nAllowBtnObj.tag);
let nDenyBtn = document.createElement(nDenyBtnObj.tag);
//let nCloseBtn = document.createElement(nCloseBtnObj.tag);

nWrapper.append(nBody);
nBody.append(nContent, nBtnWrapper);
nContent.append(nImage, nText);
nText.append(nTitle, nDescription);
nBtnWrapper.append(nAllowBtn, nDenyBtn);

nFont.setAttribute('href', nFontObj.href);
nFont.setAttribute('rel', nFontObj.rel);
nFont.setAttribute('type', nFontObj.type);
nCover.setAttribute('style', nCoverObj.style);
nImage.setAttribute('src', nImageObj.src);
nTitle.innerText = nTitleObj.value;
nDescription.innerText = nDescriptionObj.value;
nAllowBtn.innerText = nAllowBtnObj.value;
nDenyBtn.innerText = nDenyBtnObj.value;

//nCloseBtn.innerText = nCloseBtnObj.value;
// detect if notification permission was dicided or not
if (Notification.permission === 'default') {
document.body.append(nFont);
document.body.append(nCover);
document.body.append(nWrapper);
}else{
console.log('The permission is already ' + Notification.permission);
}
// detect rtl site
if (document.getElementsByTagName("html")[0].getAttribute("dir") === 'rtl') {
// detect mobile or desktop
if (window.innerWidth  {
endAction();
};
//close button function
// nCloseBtn.onclick = () => {
// endAction();
// };
// remove action
let endAction = function() {
nCover.setAttribute('style', 'display: none');
nWrapper.setAttribute('style', 'display: none');
}

Overview

Does your site offer push notifications? Use this script to deliver it in a user friendly, unobtrusive way. This script adds a popup to prompt the user if they wish to receive notifications from your site. The script is highly customizable – change the CSS properties to add any styling of your choosing, and even change the notification text to match your website.

Screenshots

Developer

dev

Uploaded 10 variants

Reviews

out of 0

Thank you! Your submission has been received!

Explore more resources

You can use Twik's widgets to create beautiful, effective variants on your website such as popups, shorter forms, and more.

Explore

Try it now

See what Twik can do for you with our free 14-day evaluation period, limited to 1,000 pageviews.

Features