Skip to content

Instantly share code, notes, and snippets.

@shaders

shaders/push-subscription.html

Last active December 7, 2017 17:43
Show Gist options
  • Save shaders/2b518e3acaf9b4712d5260205243343d to your computer and use it in GitHub Desktop.
Save shaders/2b518e3acaf9b4712d5260205243343d to your computer and use it in GitHub Desktop.
Download ZIP
Pushwoosh Marketo web push notifications integration
Raw
push-subscription.html
<!DOCTYPE html>
<html>
<head>
<title>Web SDK test server</title>
<link href="https://stuphy.github.io/static/css/main.88b9cc4a.css" rel="stylesheet">
<meta charset="utf-8">
<link rel="manifest" href="/rs/765-IWA-819/images/manifest.json">
<script type="text/javascript" src="https://cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
<script type="text/javascript">
var leadId = localStorage.getItem("pw_marketo_lead_id");
fullName = localStorage.getItem("pw_marketo_lead_full_name");
//initialize Pushwoosh SDK with auto subscribe
var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(["init", {
logLevel:"info",
applicationCode:"517E9-E40E2",
safariWebsitePushID:"web.com.example.domain",
defaultNotificationTitle:"Pushwoosh Marketo Demo",
defaultNotificationImage:"https://go.pushwoosh.com/img/logo.png",
scope:"/rs/765-IWA-819/images/",
autoSubscribe:1,
userId:leadId,
tags:{Name:fullName}
}])
Pushwoosh.push(['onRegister', function(api) {
console.log('EVENT: onRegister', api);
window.close();
}]);
</script>
</head>
<body>
<div id="root">
<div data-reactroot="" class="App">
<div class="subscription">
<div class="subscription-content-2">
<img src="https://stuphy.github.io/static/media/announcement-icon.4d4282b8.png" alt="Nice Choice!" class="gift-image">
<h2>Tap allow button above to subscribe for push notifications!</h2>
<p>We'll tell you about new features we release and discounts we offer</p>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
pushwoosh-template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href="https://go.pushwoosh.com/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<script type="text/javascript">
function PopupCenter(url, title, w, h) {
// Fixes dual-screen position Most browsers Firefox
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
// Puts focus on the newWindow
if (window.focus) {
newWindow.focus();
}
}
</script>
<script type="text/javascript" src="https://cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
<script type="text/javascript">
var leadId = "{{lead.Id}}";
var fullName = "{{lead.Full Name}}";
//store marketo user data for registration with Pushwoosh
localStorage.setItem("pw_marketo_lead_id", leadId);
localStorage.setItem("pw_marketo_lead_full_name", fullName);
//initialize Pushwoosh SDK without auto subscribe
var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(["init", {
logLevel:"info",
applicationCode:"517E9-E40E2",
safariWebsitePushID:"web.com.example.domain",
defaultNotificationTitle:"Pushwoosh Marketo Demo",
defaultNotificationImage:"https://go.pushwoosh.com/img/logo.png",
scope:"/rs/765-IWA-819/images/",
autoSubscribe:false,
userId:leadId,
tags:{Name:fullName}
}])
</script>
<title>Pushwoosh Marketo Demo</title>
<link href="https://stuphy.github.io/static/css/main.88b9cc4a.css" rel="stylesheet">
</head>
<body>
<div id="root">
<div data-reactroot="" class="App">
<div class="subscription">
<div class="subscription-content">
<img src="https://stuphy.github.io/static/media/gift.bd0232b0.png" alt="Nice Choice!" class="gift-image">
<h2>Thanks for shopping.</h2>
<p>Would you like to receive discount update from us?</p>
<button class="green-button" onclick="PopupCenter('/rs/765-IWA-819/images/push-subscription.html','Subscribe','570','470');">YES, I WANT</button>
</div>
</div>
</div>
</div>
<div class="mktoContent"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment