Custom Prompts

Building a Custom Prompt

If you want to utilize a prompt style other than the styles available within the platform you may choose to implement your own custom designed opt-in prompt by including the HTML and CSS directly on your site.

Be sure to also create a prompt via the platform with the "Custom" style and set its priority appropriately.

Primary Prompt Container CSS Classes

The primary prompt container must have the following CSS class so that the SDK can add the proper conditional CSS classes referenced below.

CSS Class

When to Use

Required?

pushly-prompt-custom

Place on the outermost prompt container containing the custom prompt.

Yes

The classes listed below will be automatically added to your prompt's primary container by the Pushly SDK based on the current prompt eligibility of the site visitor. You can then use your own CSS classes (prefixed by "my-" in the example) that cascade from the Pushly classes to determine which components within your HTML will be shown based on these classes.

CSS Class

When to Use

Required?

pushly-web-push-unsupported

What the visitor should see when their browser does not support web push.

No

pushly-web-push-supported

What the visitor should see when their browser does support web push.

No

pushly-subscription-none

What the visitor should see when they have not previously subscribed or denied permissions.

No

pushly-subscription-subscribed

What the visitor should see when they are already subscribed.

No

pushly-subscription-unsubscribed

What the visitor should see when they were previously subscribed but now unsubscribed.

No

pushly-subscription-denied

What the visitor should see when they have previously denied permissions.

No

pushly-prompt-ineligible

What the visitor should see when web push is supported but they do not meet requirements to see the opt-in prompt. (Eg: visitor is already subscribed, opted out, or have already have all Prompt Keywords)

No

pushly-prompt-eligible

When the visitor meets eligibility requirements to see the prompt. (Eg: not subscribed or does not have all Prompt Keywords

No

Visitor Actions

The Pushly SDK relies upon CSS classes to determine the interaction the user has with the prompt. The following classes must be present on the element the visitor interacts with to ensure the subscription or dismissal action is properly handled.

CSS Class

When to Use

Required?

pushly-prompt-buttons-allow

This class must be present on the element the visitor clicks to subscribe.

Yes

pushly-prompt-buttons-dismiss

Use this class on the element the user interacts with to dismiss the prompt.

No

Prompt Keywords

You may attach keywords to the custom prompt by providing them as a comma separated list in the data-keywords HTML property of the container with the pushly-prompt-custom CSS class. Each visitor that subscribes via this prompt will automatically have these keywords added to their profile which can then be used to create segments.

If you are using prompt keywords pushly-subscription-subscribed and pushly-prompt-eligible is a valid combination when the visitor is subscribed but does not have all of the keywords specified in data-keywords.

<div class="pushly-prompt-custom" data-keywords="keyword-1, keyword-2" />

CSS Combinations

The following table represents all possible combinations of CSS classes that can be present on the prompt container:

Classes

Scenario

pushly-prompt-custom, pushly-web-push-unsupported

Web Push is not supported.

pushly-prompt-custom, pushly-web-push-supported, pushly-subscription-none, pushly-prompt-eligible

Web Push is supported and the visitor has not subscribed to notifications.

pushly-prompt-custom, pushly-web-push-supported, pushly-subscription-subscribed, pushly-prompt-eligible

Web Push is supported, the visitor has subscribed to notifications but does not have the prompt keywords.

pushly-prompt-custom, pushly-web-push-supported, pushly-subscription-subscribed, pushly-prompt-ineligible

Web Push is supported, the visitor has subscribed to notifications and already has the prompt keywords.

pushly-prompt-custom, pushly-web-push-supported, pushly-subscription-denied

Web Push is supported but the visitor has dismissed or denied the prompt/permissions.

Example

<html>
<head>
<link rel="manifest" href="/manifest.json" />
<script src="https://cdn.p-n.io/pushly-sdk.min.js" async></script>
<script>
var PushlySDK = window.PushlySDK || [];
function pushly() { PushlySDK.push(arguments) }
pushly('load', {
domainKey: 'DOMAIN_KEY'
});
</script>
<style>
.pushly-prompt-custom {
display: block;
visibility: hidden;
}
.pushly-prompt-custom.pushly-web-push-supported,
.pushly-prompt-custom.pushly-web-push-unsupported {
visibility: visible;
}
.pushly-prompt-custom .my-prompt-content,
.pushly-prompt-custom .my-fallback-content,
.pushly-prompt-custom .my-prompt-content .my-subscribe,
.pushly-prompt-custom .my-prompt-content .my-subscribed {
display: none;
}
.pushly-prompt-custom.pushly-web-push-unsupported .my-fallback-content,
.pushly-prompt-custom.pushly-subscription-denied .my-fallback-content,
.pushly-prompt-custom.pushly-subscription-none .my-prompt-content,
.pushly-prompt-custom.pushly-subscription-subscribed .my-prompt-content,
.pushly-prompt-custom.pushly-prompt-eligible .my-prompt-content .my-subscribe,
.pushly-prompt-custom.pushly-prompt-ineligible .my-prompt-content .my-subscribed {
display: block;
}
</style>
</head>
<body>
<div class="pushly-prompt-custom">
<div class="my-prompt-content">
<div>
Get the latest breaking news!
</div>
<div>
<button class="my-subscribe pushly-prompt-buttons-allow">Subscribe!</button>
<span class="my-subscribed">You are subscribed!</span>
</div>
</div>
<div class="my-fallback-content">
<button>Sign up for our newsletter</button>
</div>
</div>
</body>
</html>