Subscribe/unsubscribe audience

This example shows how to use subscribe/unsubscribe to particular audiences. And change them after subscription process.

Audience (or category) is a text tag that can be used for sending targeted messages through SSP or API. During subscription process you can give to end user an option for choosing witch materials are interested to him (marking them with audiences/categories).

Each category contains from key and value pair. Key is used for using in SDK and label just for user-friendly displaying in permission prompt.

Example of tag customization (can be done through SSP):

<script>
sdk.startInstall({
    ...
    step0: "useCategories",
    categories: "{\"news\":\"Latest news\",\"sport\":\"Sport events\"}",
    ...
})
</script>

During subscription process user can select desired categories and his choice will be remembered. After subscription process, when permissions are already granted, user can switch on/off some categories one by one. This functionality now is provided only through Notix SDK - all processes related to rendering user interface should be performed by site owner.

Control audiences after subscription through Notix SDK

SDKCaller.onAudiencesCanBe() callback

This function is called when controls for managing audiences can be displayed on page. Permission for receiving push notifications from domain should be already granted.

As argument it receives array of audiences that are currently allowed (selected) by user.

<script>
sdk.SDKCaller.onAudiencesCanBe((audiences) => {
    // ... audiences = Array('news', 'sport')
})
</script>

unsubscribeAudience(string) and subscribeAudience(string)

This functions are used for switching on/off one particular audience by its name (key). As the result they both return a list of audiences currently enabled for subscriber.

<script>
document.querySelector('#selector').addEventListener('click', async () => {
    // Switch off audience 'news'
    const audiences1 = await sdk.unsubscribeAudience('news');
     // Switch off audience 'news'
    const audiences2 = await sdk.subscribeAudience('sport');
    // switch UI state
});
</script>

Look at this example with live demo if you want to check this feature before implementing it on your site.

Example 1

<script>
    var s = document.createElement("script")
    s.src = "https://notix.io/ent/current/enot.min.js"
    s.onload = function (sdk) {
        sdk.startInstall({
            appId: "YOUR-APP-ID-HERE",
            step0: "useCategories",
            categories: "{\"news\":\"Latest news\",\"sport\":\"Sport events\"}",
            loadSettings: true,
        })

        sdk.SDKCaller.onAudiencesCanBe((audiences) => {
            // Inside onAudiencesCanBe save DOM elements that will trigger subscribe/unsubscribe, to variables.
            const audienceBtn1 = document.querySelector('#audience1');
            const audience2Btn = document.querySelector('#audience2');

            // by default trigger elements must be hidden via display: none or any different way
            // then, if it necessary, we will show this element, also you can choose the way, how to show that elements
            audienceBtn1.style.display = 'block';

            // Depending on whether the audience is subscribed or not, we can change the text or the appearance of the element
            audienceBtn1.innerText = audiences.includes(ID_YOUR_AUDIENCE)  ? 'unsubscribe' : 'subscribe'
            // another option how to show the state
            // audienceBtn1.innerHTML = audiences.includes(ID_YOUR_AUDIENCE) ? '🔕' : '🔔'


            // Hanging the click handler on an element
            audienceBtn1.addEventListener('click', () => {
                // Depending on whether you are subscribed to the audience or not, change the state to the opposite
                audiences = sdk.toggleAudience(audiences, ID_YOUR_AUDIENCE);
                // Call method subscribe/unsubscribe to audiences
                sdk.subscribeAudience(ID_YOUR_AUDIENCE);
                // Change the text or the appearance of the element
                audienceBtn1.innerText = audiences.includes(ID_YOUR_AUDIENCE)  ? 'unsubscribe' : 'subscribe'
            });
        });
    }
    document.head.append(s);
</script>
     // Page
     <button id="audience1" style="display: none;"></button>

Example 2

    sdk.SDKCaller.onAudiencesCanBe((audiences) => {
        // Create an array with the audience's ids to be subscribed/subscribed to
        const audiencesIds = ['au1','au2','au3','au4'];

        audiencesIds.forEach((id) => {
        window[`btn${id}`] = document.querySelector(`#${id}`);
        console.log(window[`btn${id}`])
        window[`btn${id}`].style.display = 'block';
        window[`btn${id}`].innerText = audiences.includes(id)  ? 'unsubscribe' : 'subscribe';
        window[`btn${id}`].addEventListener('click', () => {
            audiences = sdk.toggleAudience(audiences, id);
            sdk.subscribeAudience(id);
            window[`btn${id}`].innerText = audiences.includes(id)  ? 'unsubscribe' : 'subscribe'
        });
    });

    // in this case, the elements on the page must have identical id
    // as the id of the audiences to which you want to subscribe/unsubscribe
    // Page

    <button id="au1" style="display: none;"<</button<
    <button id="au2" style="display: none;"<</button<
    <button id="au3" style="display: none;"<</button<
    <button id="au4" style="display: none;"<</button<