Follow these instructions:
1. Create an element with class “js-pushowl--subscribe”
You can turn any element into a Subscribe button by adding class="js-pushowl--subscribe". PushOwl will attach click listeners to all the elements having this class. Clicking on the element will allow visitors to subscribe to your online store.
2. Hide the element initially.
Since Push Notifications are not supported on some platform like iOS, older browsers, and incognito windows, it is recommended that you initially hide this element. You can choose to do so either by adding “display:none" or “visibility:hidden” as CSS properties for the element. PushOwl will automatically make the element visible on compatible browsers & devices. This behavior can be further configured as per your requirements through the data attributes described in the Configuration section below.
3. Add an optional post-subscription message.
You can choose to add a data-pushowl-post-subscription-message attribute. PushOwl will replace the text of the element with the specified message after the visitor has successfully subscribed.
4. Style your Element
Style the button by adding the desired CSS styles to make it optimized for your theme.
5. Add the Element to your theme.
You can place this element anywhere in your store. Depending upon your requirements, insert the new Element at an appropriate place in your theme files. PushOwl will add the appropriate functionality to it after initializing.
Configuration:
You can further configure the behavior of the button using the following data attributes:
data-pushowl-pre-display
Value of the ‘display’ CSS property of the element that will be assigned before the visitor has subscribed.
data-pushowl-pre-visibility
Value of the ‘visibility’ CSS property of the element that will be assigned before the visitor has subscribed.
data-pushowl-post-display
Value of the ‘display’ CSS property of the element that will be assigned after the visitor has subscribed.
data-pushowl-post-visibility
Value of the ‘visibility’ CSS property of the element that will be assigned after the visitor has subscribed.
data-pushowl-post-subscription-message
Message that will be set as the text of the element after the visitor has subscribed
Example:
<button type="button" class="js-pushowl--subscribe" data-pushowl-post-subscription-message="You are subscribed !" data-pushowl-pre-display="inline-block" style="display:none">Get Notified</button>
Alternatively, you can get in touch with Storetasker, our partner, who will customize and create widgets according to your needs (Andrew Durot is a PushOwl specialist you can select as your preferred expert).