30

Web push with webhooks

You can use webhooks to trigger web push messages from other platforms as a part of your campaigns.

Webhooks provide a way to access public APIs and services outside of Customer.io. We treat webhooks like messages: when someone reaches a webhook in your campaign, we’ll execute the webhook, sending a request to an external API. In this case, we’ll show you how to use webhooks to send web push messages.

A web push notification targets people on your website. If a person is not on your website, they won’t see the notification until they return (and are identified). Because you can’t guarantee when a person will return to your website, you may want to explore “time-to-live” settings for notifications in your outside service, so that your notification expires if a person does not return to your site (and receive the notification) within a reasonable period of time.

In general, people need to opt in to receive push notifications, and behaviors for push notifications may vary by browser and the platform you use to send web push notifications. Whether you manage push preferences in an external platform or in Customer.io, you should make sure that you don’t send messages to people who have opted out (or have not opted in).

Send web push with Airship

To send web push notifications with Airship, you must:

• integrate the Airship SDK in your website.
• have your Airship App Key and Master Secret. You can find both in the Airship dashboard.
• use the named_user feature in Airship.
• create an attribute in Customer.io called named_user that matches the Airship named user value or have a way to map that value to Airship. When you set up your webhook, you’ll use {{customer.named_user}} (or something similar) to make sure that your web push reaches the right person.

In the Workflow for your campaign:

1. Add a Webhook to your workflow and click Add Request.

2. Set the URL to https://go.airship.com/api/push.

3. Click Add header. Enter Authorization for the Name and basic <base64-encoded credentials> for the Value. You can go here and enter your credentials in the format appKey:masterSecret to get your Base64-encoded authorization credentials.

4. Click Add Header again and enter Content-Type for the Name and application/vnd.urbanairship+json; version=3; for the Value.

5. Provide the payload for your web push message. The example below has the basic information required by Airship’s API, but the notification.web object can be much more complex. See Airship’s documentation to learn more.

   {
       "audience": {
           // push to the specific user you want to message
           "named_user": {{ customer.named_user }}
       },
       "device_types": ["web"],
       "notification": {
           "web": {
               "alert": "Your web push goes here"
           }
       }
   }
   

6. (Optional) Test your request! Under Results, select the person you want to send a test to, and then click Send test…. If this person has a named_user attribute and your webhook is configured correctly, your request should send them a message.

7. Click Save Changes. When you activate your campaign, your webhook will send web push notifications through Airship.

Send web push using OneSignal

Before you can send a notification through OneSignal, you must have a value that maps people across platforms. We suggest that you map people’s external user IDs in OneSignal to people in your Customer.io workspace—either directly to id or another attribute on a person’s profile. For this example, we assume that customer.id matches the external user ID in OneSignal.

To send a notification, you need both your OneSignal API key and your App ID.

In the Workflow for your campaign:

1. Add a Webhook to your workflow and click Add Request.

2. Set the URL to https://onesignal.com/api/v1/notifications.

3. Click Add header. Enter Authorization for the Name and basic <your API key> for the Value.

4. Enter the payload for your web push message. The example below contains required fields based on Web push to a person with any type of web browser identified by an external user ID, but your payload may vary based how you identify people, your audience’s language, and the type(s) of browser you want to send notifications to. See OneSignal’s documentation for more information.

   {
       "app_id": "your-app-id",
       "include_aliases":{
           "external_id": ["{{customer.id}}"]
       },
       // select the platform
       "target_channel": "push",
       "isAnyWeb": true,
       "contents": {
           // English-based message, though you can test for your audience's language with liquid
           "en": "Your web push goes here"
       },
       "headings": {
           // English-based heading, though you can test for your audience's language with liquid
           "en": "Web push title"
       }
   }
   

5. (Optional) Test your request! Under Results, select the person you want to send a test to, and then click Send test…. If the person in OneSignal is appropriately mapped to Customer.io and your webhook is configured correctly, your request should send them a message.

6. Click Save Changes. When you activate your campaign, your webhook will send web push notifications through OneSignal.