Push Notifications - Custom Code Payloads

We’ve covered how to get started with Customer.io Push, but if you want to customize your push notifications even further and add things like deep links or images, custom payloads are the answer!

Getting started with custom payloads

Creating a custom payload for your push notification gives you granular control over the notiification and its behaviour and appearance, in the same way as coding your email(s) in HTML does. It’s a bit more complex, but you can use it to add images, deep links, or interactions.

To access the push custom payload editor, use this toggle:

You’ll see that you can code both Android and iOS devices separately – there is a tab for each platform. In each editor, you can then write or paste your custom code.

Guidelines

First and foremost, identify what you’ll be doing with your custom payload: creating a deep link? Showing an image? Then, make sure that your app supports that functionality.

  • If it does, your engineering team should be able to provide the JSON code for you.,
  • If it doesn’t, reach out to your engineering team and ask what your payload should be. Since all apps are unique, there are many ways this could be built.

Once you have your payload, you’ll need to ensure that:

  1. Your JSON code is valid
  2. The code you use follows the guidelines for the specific provider:

If you need help or clarification, reach out to us, tell us your specific use case, and we’ll do our best to help!

Basic Example: iOS

The most basic of push notifications for iOS take this form:

{
  "aps": {
    "alert": {
      "body": "YOUR MESSAGE BODY HERE",
      "title": "YOUR MESSAGE TITLE HERE"
    }
  }
}

Basic Example: Android

And here’s the basic Android example, with just a message body and title:

{
  "message": {
      "notification": {
        "body": "YOUR MESSAGE BODY HERE",
        "title": "YOUR MESSAGE TITLE HERE"
      }
  }
}

Using Customer Data

As always, you can use customer or event data in your custom payload code. Here’s what a basic Android example might look like using event data:

{
  "message": {
      "notification": {
         "body": "Hi {{customer.first_name}}, your {{event.event_title}} has been booked!",
        "title": "All set!"
      }
  }
}

And the same in iOS:

{
    "aps": {
        "alert": {
          "body": "Hi {{customer.first_name}}, your {{event.event_title}} has been booked!",
          "title": "All set!"
        }  
    }
}

This would result in a push notification that looks like this (on iOS):

Got feedback?

Building deep links and images into the basic push editor, without relying on custom payloads, is on our short-term roadmap for this feature.

However, we’re hoping to get your feedback on how you’re using custom payloads, if there’s anything you’re struggling with, or if there’s anything you’re really enjoying about it and want to make sure we keep.

Let us know!