Widget Glocke manuell einbinden

Wenn Sie nicht die Standard-Glocke des Sovendus Push-Widgets einsetzen möchten, besteht die Möglichkeit, die Umsetzung der Glocke selber vorzunehmen. Dazu konfigurieren Sie das Widget im Backend, deaktivieren aber die automatische Ausspielung auf jeder Seite.

Sovendus stellt Ihnen die Sidebar, die im Backend definierten Texte sowie den aktuellen Status der Permission und des Abonnenten zur Verfügung.
Die Eigenschaften und Funktionen sind über das globale PushWidget Objekt verfügbar und entnehmen sie bitte untenstehender Struktur.

Wenn der Browser die Push-Technologie nicht unterstützt, wird PushWidget nicht definiert.

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": "Um sich für die Benachrichtigungen anzumelden, müssen Sie diese für die Webseite zulassen: <a href='https://static.getback.ch/assets/push/manual/de.pdf' target='_blank'>Anleitung</a>",
            "title": "Sie haben die Benachrichtigungen deaktiviert."
        },
        "tooltip": {
            "default": "Für Benachrichtigungen anmelden.",
            "denied": "Um sich anzumelden, müssen Sie Benachrichtigungen für diese Seite zulassen.",
            "granted": "Benachrichtigungen verwalten."
        }
    },
    "toggleSidebar"() {
        // Displays or hides the sidebar.
        // Return value: false if push is blocked in the browser, otherwise true
    }
}

Integrationsbeispiel

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>