Menu
Menu Sheet Overlay
Search
Search Sheet

Building Your Own Opt-In Component

    Creating a React component that allows visitors to subscribe to Push messaging is straightforward. At a minimum, the component only needs to do 2 things:

    1. Call the channelOfferShown Redux action when the component is shown to the visitor
    2. Call the subscribeOnClick Redux action if the visitor opts in

    Before you begin #

    Example #

    This example React Component describes the notifications the visitor would receive if they subscribe, along with an “opt in” button that triggers the browser to ask them to allow push notifications on this site. If allowed, the button is hidden and a success message is shown instead.

    There are 5 things of note:

    1. Calling channelOfferShown on mount. This is required by Analytics
    2. Waiting for Push messaging to load successfully
    3. Only showing the component if the visitor can subscribe (for example, if they have not blocked push notifications)
    4. Showing a success message instead of the “opt in” button if the visitor subscribed
    5. Adding subscribeOnClick as the onClick method for the “opt in” button
    import React from 'react'
    import {connect} from 'react-redux'
    import {createPropsSelector} from 'reselect-immutable-helpers'
    
    import Button from 'progressive-web-sdk/dist/components/button'
    import {canSubscribe, getStatus, isSubscribed} from 'progressive-web-sdk/dist/store/push-messaging/selectors'
    import {channelOfferShown, subscribeOnClick} from 'progressive-web-sdk/dist/store/push-messaging/actions'
    import {MESSAGING_STATUS} from 'progressive-web-sdk/dist/store/push-messaging/constants'
    
    class OptIn extends React.Component {
        componentDidMount() {
            // [1] When the component has mounted, let Push messaging know it was seen
            this.props.channelOfferShown()
        }
    
        render() {
            const {canSubscribe, isSubscribed, subscribeOnClick} = this.props
    
            if (getStatus !== MESSAGING_STATUS.READY || !canSubscribe) {
                /**
                 * [2] `getStatus` will equal MESSAGING_STATUS.READY when Push messaging has loaded successfully
                 * [3] Once Push messaging is ready, `canSubscribe` will be `true` if the browser supports and
                 *     has not blocked Push messaging
                 *
                 * In either case, return false to not show anything
                 */
                return false
            }
    
            return (
                <div>
                    <p>Get notified on all the latest deals, promotions and new products.</p>
                    {isSubscribed ?
                        // [4] Conditionally show a success message after subscription
                        <p>Successfully subscribed</p>
                    :
                        // [5] Attach `subscribeOnClick` as the `onClick` handler
                        <Button onClick={subscribeOnClick}>Opt In</Button>
                    }
                </div>
            )
        }
    }
    
    const mapStateToProps = createPropsSelector({canSubscribe, getStatus, isSubscribed})
    const mapDispatchToProps = {channelOfferShown, subscribeOnClick}
    
    export default connect(mapStateToProps, mapDispatchToProps)(OptIn)