कस्टम बटन
यदि आप अपने स्वयं के डिज़ाइन के साथ एक कस्टम सब्सक्राइब/अनसब्सक्राइब बटन को एकीकृत करना चाहते हैं, तो आप कर सकते हैं।
ये वे उजागर पिक्सेल फीचर हैं जिनका उपयोग आप अपने JS कोड में एक कस्टम इंटीग्रेशन करने के लिए कर सकते हैं:
await pushify.get_subscription_status(); await pushify.subscribe(); await pushify.unsubscribe();
यहाँ एक नमूना कोड एकीकरण है जो इन कस्टम JS फ़ंक्शनों का उपयोग करता है:
<span id="pusher_loading">Loading status...</span>
<a href="#" id="pusher_subscribe" style="display: none;">Subscribe ✅</a>
<a href="#" id="pusher_unsubscribe" style="display: none;">Unsubscribe ❌</a>
<script defer>
let initiate_pusher_script = async () => {
if(typeof pusher !== 'undefined') {
clearInterval(pusher_is_loaded_interval);
/* Get status of subscription */
let status = await pushify.get_subscription_status();
/* Remove loading message */
document.querySelector('#pusher_loading').style.display = 'none';
/* Display subscribe or unsubscribe button based on the current subscription status */
if(status) {
document.querySelector('#pusher_unsubscribe').style.display = 'block';
document.querySelector('#pusher_subscribe').style.display = 'none';
} else {
document.querySelector('#pusher_unsubscribe').style.display = 'none';
document.querySelector('#pusher_subscribe').style.display = 'block';
}
}
}
let pusher_is_loaded_interval = setInterval(initiate_pusher_script, 100);
/* Attach simple subscribe event */
document.querySelector(`#pusher_subscribe`) && document.querySelector(`#pusher_subscribe`).addEventListener('click', async event => {
event.preventDefault();
await pushify.subscribe(event);
initiate_pusher_script();
});
/* Attach simple unsubscribe event */
document.querySelector(`#pusher_unsubscribe`) && document.querySelector(`#pusher_unsubscribe`).addEventListener('click', async event => {
event.preventDefault();
await pushify.unsubscribe(event);
initiate_pusher_script();
});
</script>