Push Notifications Test Page

Landing-Page Mode

When used on landing pages, use settings like this:

<script src="https://instant-push-demo.netlify.app/push-client-bundle.js"></script>
<link rel="stylesheet" href="https://instant-push-demo.netlify.app/push.css">
<script>
    const push = InstantPush.init({
        account: "YourAccount",
        serverKey: "YourServerKey",
        emailSelector: "#myHiddenEmail", // the selector of a (hidden) element containing the contact's email address
        subscribeTrigger: "#mySubButton", // selector for a push subscribe button. OR "auto" to show without a click
        unsubscribeTrigger: "#myUnsubButton" // selecto for an unsubscribe button
    });
</script>

The above settings are active on this page.
Email address field shown for convenience. This is often a hidden-field.
Email

Subscribe Unsubscribe

Checkbox Mode

Instead of buttons for subscribe/unsubscribe, you can also use a checkbox. This includes a checkbox on a landing-page/preference centre form:

<script src="https://instant-push-demo.netlify.app/push-client-bundle.js"></script>
<link rel="stylesheet" href="https://instant-push-demo.netlify.app/push.css">
<script>
    const push = InstantPush.init({
        account: "YourAccount",
        serverKey: "YourServerKey",
        emailSelector: "#myHiddenEmail", // the selector of a (hidden) element containing the contact's email address
        checkboxSelector: "input[name='myPushCheckbox']", // selector for a checkbox to subscribe/unsubscribe
    });
</script>

Email address field shown for convenience. This is often a hidden-field.

Email

Push enabled

Customizing Look and Content (optional)

Styling

You include this stylesheet when you install push. You can override some or all of these styles.

UI

You can customize the UI by passing one or more of the following optional settings:

• ui_prompt overrides the UI inside the notification permission prompt box
• ui_subscribed overrides the UI the user sees after successfull subscribing
• ui_unsubscribed overrides the UI the user sees after successfull unsubscribing
• ui_loading overrides the loading message while waiting for subscription or unsubscription (this usually goes by quickly)
• ui_denied overrides the UI message when the user denied the system push-permission
• ui_unsubscribe_prompt overrides the user unsubscribe confirmation prompt

Close Behaviour

The notifications for subscribe or unsubscribe success will auto-close after 2000ms (2 seconds). You can change this timer by passing the autoCloseTimer option, and you can disable closing the modal when the background is clicked by setting bgCloseOnClick to false. Here are some examples:

• autoCloseTimer: 3000 would set it to 3000 ms (3 seconds)
• autoCloseTimer: 500 would set it to 500 ms (half a second)
• autoCloseTimer: 0 disables auto-close entirely
• bgCloseOnClick: false disables closing the modal by clicking the background

Example:

The example below shows customizing the success UI, the auto-close timer, and disabling close on background-click:

            <script>
                const push = InstantPush.init({
                    account: "YourAccount",
                    serverKey: "YourServerKey",
                    emailSelector: "#myHiddenEmail", // the selector of a (hidden) element containing the contact's email address
                    subscribeTrigger: "#mySubButton", // selector for a push subscribe button. OR "auto" to show without a click
                    unsubscribeTrigger: "#myUnsubButton", // selecto for an unsubscribe button
                    ui_subscribed: `<h5>Great success!</h5><br>`, // override the "subscribed" part of the UI
                    autoCloseTimer: 1000,
                    bgCloseOnClick: false
                });
            </script>