Пользовательская кнопка подписки/отписки

Интегрируйте кнопки подписки или отписки с индивидуальным дизайном, соответствующим стилю вашего сайта или приложения. Это даст вам полный контроль над внешним видом и функциональностью кнопок.

Мы предоставляем открытые функции пикселя, которые можно использовать в вашем JS-коде для выполнения кастомной интеграции.

await pusher.get_subscription_status();
await pusher.subscribe();
await pusher.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 <?= settings()->websites->pixel_exposed_identifier ?>.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 <?= settings()->websites->pixel_exposed_identifier ?>.subscribe(event);
        initiate_pusher_script();
    });

    /* Attach simple unsubscribe event */
    document.querySelector(`#pusher_unsubscribe`) && document.querySelector(`#pusher_unsubscribe`).addEventListener('click', async event => {
        event.preventDefault();
        await <?= settings()->websites->pixel_exposed_identifier ?>.unsubscribe(event);
        initiate_pusher_script();
    });
</script>