Using the web push channel

Note: The Connect Limited Availability program is closed to new users.

The web push notification channel can be used for messaging users in your web app or mobile web app. Web push is only available on pages that are HTTPS.

Web push notifications don't require any FCM or APNS token, they work through the connect.js (formerly the outbound.js) integration.

This article discusses the following topics:

• Getting started
• Setting up a notification
• Displaying a custom notification
• Reporting
• Testing notifications

Getting started

To set up web push notifications, you'll need to have the connect.js snippet installed on your website. This will allow Connect's JavaScript to talk to Connect's servers for updates.

To add the connect.js snippet to your website

1. In Connect, click the Settings icon (), then click Message Settings > Web Push.
2. Click the Production tab, then click the Copy to clipboard button.
3. Paste the snippet into your website code, in the head tag of each page where you want to enable web push notifications, above the closing body tag.

After the snippet is added to your website, you can create a web push channel as a variant when creating or editing a campaign.

To receive a web push notification, the following requirements must be met:

• The customer is a user in your Connect account, and passes the campaign filters.

• The JavaScript snippet has been added to the page(s) where you want the notification to appear as described above.
• The customer has a valid cookie identifying them. If they don't have a cookie then one needs to be created from the JS library's identify call.
• The user must navigate to a page where the JS library has been implemented.

Setting up a notification

To set up a notification, enter or select the following elements:

• Theme offers two default schemes: Light and Dark. Click to select a theme. Note: You can customize the colors used in your campaign; see Displaying a custom notification, below.

• Title can be up to 75 characters, everything else will be truncated in the displayed version. Click Add title to enter text.

• Body text can be up to four lines. Click Click here to add body text and enter your message. We recommend optimizing and using Connect's multiple variants to see how users respond to your message copy.

• Button text is the Call to Action for your users. It can be up to 42 characters. Click Button text to enter your text.

• Avatar is a photo of a member of your team. Click Upload new file to browse for a photo, or click in the text entry box to display and choose from previously-uploaded photos. Begin entering a photo name to filter the list. The selected avatar appears at the top of the campaign preview.

• Message duration is how long the notification is active after it is created. For example, if you enter 7 | days, the campaign will be sent to users that meet the criteria for seven days after it is activated. Use the text entry and time buttons to select a duration.

• Show on mobile lets you display the message to users on their mobile devices. Select to display the campaign message on mobile devices; deselect to only show the message on a desktop.

• Button URL is the URL the user is taken to when they click the Call to Action button. It can contain any URL, whether it's a relative URL (/checkout) or absolute URL (https://example.com/checkout). This field is required.

Displaying a custom notification

By default, there are two themes for you to use Light and Dark, you can customize the background color, border color, headline text color, and body text color. You can customize all the colors and use those, and you can always revert back to one of the themes as a starting point. If you are looking to create a custom notification to display instead of the Connect default styles, you can easily do this by assigning your own function in your website's client side JavaScript.

outbound.handlePush(function (notification) {
    varoutboundNotification=$('#outbound-notification');
    if (outboundNotification&&!outboundNotification.hasClass('open')) {
        outboundNotification.html('<h2>'+notification.headline+'</h2><p>'+notification.body+'</p>');
        outboundNotification.addClass('open');
    }
    // Used to track that the user has received the notification. // This could also be called when the users dismisses the notification or clicks on it.notification.registerImpression(); 
});

The outbound.js library provides a function to handle push notifications with ease, in the above example, the function inside outbound.handlePush() is used to display the notification. The notification passed in is the current notification object.

If you are generating your own html for a notification you must call notification.registerImpression(). This allows us to track that the notification was received and to not send it again the next time handlePush is called for that same user.

Below are available values you can use in your custom notification that are passed in from Connect through to your client-side. These can be used in your notification.

Key	Value
body	string
colors	object (containing each color as a string). Available colors are background, body, border, and headline.
headline	string
showMobile	boolean
url	string

Reporting

You can find out about what your users are doing once the notification is sent. Connect provides clicked and dismissed numbers on each variant as well as how many users had done the event before and after the notification was sent.

Testing notifications

To test in website push notifications, you can set up a campaign that contains one or more in website push notification variants and once you have connect.js library integrated, you can start receiving messages on your website.