Passo 1:
Na configuração avançada do Site habilite o callback de javascript para o evento "newSubscription" -- você pode aprender a fazer isso aqui.
Passo 2:
Utilize o seguinte código exemplo no seu site
Você pode adaptar os estilos conforme precisar :)
<style>
#pn-category-container {
border: 1px solid #dadada;
border-radius: 5px;
padding: 16px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
width: 630px;
background: #fbfbfb;
transition: visibility 600ms, opacity 600ms;
visibility: hidden;
display: none;
}
#pn-category-container input {
margin-left: 0;
}
#pn-category-container label {
margin-right: 10px;
}
#pn-category-container p {
margin: 0;
line-height: 28px;
}
#pn-category-container .thank-you {
font-weight: 700;
}
#pn-category-container .inline {
display: inline-block;
}
#pn-category-container .close-btn {
border: none;
background-color: #37AAF3;
padding: 6px 10px;
color: #fff;
border-radius: 3px;
}
#pn-category-container .pn-mdl-header {
padding-bottom: 10px;
}
#pn-category-container .pn-mdl-footer {
padding-top: 15px;
}
</style>
<!-- Pushnews categories box (it will only be visible when a new Push Subscriber is detected) -->
<div id="pn-category-container">
<div class="pn-mdl-header">
<p class="thank-you">Obrigado por se cadastrar nas Push Notifications!</p>
</div>
<div class="pn-mdl-body">
<div class="inlinea">
<p>Quais os assuntos do seu interesse?</p>
</div>
<div class="inlinea">
<input type="checkbox" name="pushnews-category" value="geral" id="pn-category-1">
<label for="pn-category-1">Geral</label>
<input type="checkbox" name="pushnews-category" value="esportes" id="pn-category-2">
<label for="pn-category-2">Esportes</label>
<input type="checkbox" name="pushnews-category" value="economia" id="pn-category-3">
<label for="pn-category-3">Economia</label>
<input type="checkbox" name="pushnews-category" value="politica" id="pn-category-4">
<label for="pn-category-4">Política</label>
</div>
</div>
<div class="pn-mdl-footer">
<button class="close-btn">× Fechar</button>
</div>
</div>
<script>
var IlabsPush = IlabsPush || [];
/**
* When a new Push Subscription is detected, show the categories box
*/
function pushnewsNewSubscriptionHandler(event) {
if (true === event.data.isSubscribed) {
var pushnewsId = event.data.pnId;
document.getElementById("pn-category-container").style.visibility = "visible";
document.getElementById("pn-category-container").style.display = "block";
}
}
/**
* When a category is clicked, sync with Pushnews
*/
var pnCategories = document.querySelectorAll("input[name=pushnews-category]");
if (null !== pnCategories) {
pnCategories.forEach(function(pnCategory) {
pnCategory.addEventListener("change", function(event) {
var categoryName = this.getAttribute('value');
var categoryValue = "0";
if (true === this.checked) {
categoryValue = "1";
}
var customFilters = {};
customFilters[categoryName] = categoryValue;
IlabsPush.push(["sendCustomFilters", customFilters]);
})
});
}
/**
* When the close button is clicked, close the categories box
*/
document.querySelector("#pn-category-container .close-btn").addEventListener("click", function(event) {
event.preventDefault();
document.getElementById("pn-category-container").style.visibility = "hidden";
document.getElementById("pn-category-container").style.display = "none";
});
</script>