Manually include bell widget – Sovendus Optimize

If you don’t want to use the default bell of the Sovendus Push widget, there is an option to implement the bell yourself. To do this, configure the widget in the backend, but disable the automatic integration on each page.

Sovendus provides you with the sidebar, the texts defined in the backend and the current status of the permission and the subscriber.
The properties and functions are available through the global PushWidget object and please refer to the structure below.

If the browser does not support push technology, PushWidget will not be defined.

window.Getback.PushWidget ={
    "permissionStatus": "default", // default, granted, denied
    "subscriptionStatus": "active", // active, inactive (logged out via widget settings)
    "text": {
        // The texts can be defined in the Getback-Backend.
        "blocked": {
            "text": "To sign up for notifications, you need to allow them for this website.",
            "title": "You have disabled notifications"
        },
        "tooltip": {
            "default": "Sign up for notifications",
            "denied": "To sign up, you need to allow notifications for this site.",
            "granted": "Manage notifications"
        }
    },
    "toggleSidebar"() {
        // Displays or hides the sidebar.
        // Return value: false if push is blocked in the browser, otherwise true
    }
}

Integration example

Der nachfolgende Code Block zeigt ein Integrationsbeispiel. Bitte beachten Sie das der Code allenfalls auf Ihre Seite angepasst werden muss.

<script>
    if (window.getback_loaded) {
        // Getback has already loaded. Push message functions should be available.
        initialize_notification_button();
    } else {
        // Getback is not yet available. 'getback_loaded' in window gets fired as soon as Getback is loaded
        window.addEventListener(
            'getback_loaded',
            initialize_notification_button
        );
    }

    var btn_notifications = document.querySelector('#btn-notifications');
    var tooltip_notifications = document.querySelector(
        '#tooltip-notifications'
    );

    function initialize_notification_button() {
        if (!window.Getback || !window.Getback.PushWidget) {
            // Browser does not support push messages.
            btn_notifications.disabled = true;
            tooltip_notifications.innerText =
                'Ihr Browser wird nicht unterstützt.';
            return;
        }

        // The permission status is accessible via the Getback.PushWidget.permissionStatus property (default, granted or denied)
        var permission_status = Getback.PushWidget.permissionStatus;

        // Tooltip texts (defined in the Getback Backend) for each push permission status are accessible via the
        // Getback.PushWidget.text.tooltip object (default, granted or denied)
        tooltip_notifications.innerHTML =
           Getback.PushWidget.text.tooltip[permission_status];

        // Toggle widget sidebar when button is clicked. We can use Getback.PushWidget.toggleSidebar() to toggle the sidebar.
        // Return value is either true or, if push is blocked in the browser, an object holding the text fragments
        // for the instruction to unblock push notifications.
        btn_notifications.addEventListener('click', function (e) {
            e.preventDefault();
            if (Getback.PushWidget.toggleSidebar() !== true) {
                // Push is blocked in the browser. toggleSidebar() returns the title and text with instructions
                // on how to enable push again, or you can access the text via Getback.PushWidget.text object.
                alert('Sie haben Push blockiert.');
                tooltip_notifications.innerHTML = `${Getback.PushWidget.text.blocked.title}<br>${Getback.PushWidget.text.blocked.text}`;
            }
        });
    }
</script>