Custom Timeline Entries

Speak to anyone who’s ever dealt with a customer service query and they’ll tell you that one of the biggest challenges is the lack of context. Who is this customer? What happened just before they got in touch? How have they interacted with our product?

This kind of context often comes from different places in different shapes and sizes: Your web app, your internal tools, your payments processor. Sometimes all you need is a heads-up that saves you a click, at other times you need detailed, granular information, and the ability to take action right there and then.

Showing this kind of context well and in a timely way is, at its core, an engineering problem: It means that your own tools and databases — where stuff happens — need to interface deeply with your customer service tool of choice — where you help people.

It’s exactly at this intersection that our API-first approach really comes to the fore.

Today we’re very excited to introduce one of a series of features aimed at solving the problem of context in a modern, API-driven way: Custom Timeline Entries.

Simply put, Custom Timeline Entries give you access to our UI components and let you show any kind of data, in any format, as if it was any other entry in the timeline.

Let’s take a simple example: you want to show that a customer successfully completed their free trial.

To add this to a customer’s timeline, you simply submit this JSON:

{
  "customerId": "c_01G81AJ5Q0SHYRQF4RDH5GKPD2",
  "title": "Trial completed",
  "components": [
    {
      "componentText": {
        "text": "Customer successfully completed free trial"
      }
    }
  ]
}

That’s fairly simple. But say you want a little more information and a bit more structure:

{
  "customerId": "c_01G81AJ5Q0SHYRQF4RDH5GKPD2",
  "title": "Trial completed",
  "components": [
    {
      "componentText": {
        "text": "Customer successfully completed free trial"
      }
    },
    {
      "componentSpacer": {
        "spacerSize": "M"
      }
    },
    {
      "componentText": {
        "textSize": "S",
        "textColor": "MUTED",
        "text": "New Pricing Plan"
      }
    },
    {
      "componentText": {
        "textSize": "M",
        "text": "🌱 Starter"
      }
    },
    {
      "componentSpacer": {
        "spacerSize": "M"
      }
    },
    {
      "componentText": {
        "textSize": "S",
        "textColor": "MUTED",
        "text": "Billing Frequency"
      }
    },
    {
      "componentText": {
        "textSize": "M",
        "text": "Monthly"
      }
    }
  ]
}

As you can see, this presents information in a way that’s a bit easier to parse. This is already a lot more useful, but still not particularly actionable. To finish up, let’s add the billing amount and a link to view this customer in our admin tool:

[
  {
    "componentSpacer": {
      "spacerSize": "M"
    }
  },
  {
    "componentText": {
      "textSize": "S",
      "textColor": "MUTED",
      "text": "Amount"
    }
  },
  {
    "componentText": {
      "textSize": "M",
      "text": "**$19.00**"
    }
  },
  {
    "componentSpacer": {
      "spacerSize": "M"
    }
  },
  {
    "componentLinkButton": {
      "url": "http://admin.example.com/customers/12345",
      "label": "View customer in Admin"
    }
  }
]

That’s it! In just a couple of minutes we’ve been able to represent information from our own systems in a customer’s timeline — no iFrames, custom apps or the like required. All you need to get going is to create an API key with the relevant permissions.

While this example is basic, the things you can build with Custom Timeline Entries are anything but. You can use them to add custom contact form submissions, billing events, app errors, bug reporting forms, product feedback forms and much more in the context of a timeline. Just a couple of examples:

This feature marks an important step in our mission to build a customer service tool that feels like our customers’ own, and we’re really excited to share it with you.

Custom Timeline Entries are available now in the Plain app and API. We can’t wait to see what you build! Check out the Custom Timeline Entries docs for more information and recipies. There is also a playground that allows you to design your perfect Custom Timeline Entry and build the JSON to send to the API.