Customer Cards: live context for customers

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 do our internal systems know about this customer?

Now speak to an engineer who's had to write a code that syncs or bulk imports data from one system to another, and they’ll tell you tales of never ending data integrity battles and production incidents. Or maybe they'll tell you about painful iframe apps that then need to be embedded into a different product and how they struggled to get a secure and good user experience.

Today we're releasing Customer Cards: a simple way to get all the context you need on a customer without needing to sync anything. This is our second step after Custom Timeline Entries aimed at solving the problem of context in a modern, API-driven way.

Simply put, Customer Cards are the context that is always visible when helping a customer. They are defined and rendered using the same Plain UI Components as Custom Timeline Entries.

Here's what makes Customer Cards so unique and powerful:

• are pulled from your backend APIs instead of pushed. This means you don't have to write code that syncs customer data to Plain. The request can be secured via pre-shared secrets in HTTP headers.
• cached for any timeframe between 15 seconds and 1 year. This allows you to control how often Plain should reload a card and how long to store the customer data.
• defined using the Plain UI components JSON schema, so you don't have to worry about CSS and visuals and only need to focus on the data and how you want it laid out.
• will automatically load and reload if a user is viewing a customer, therefore guaranteeing that the data users see is always the latest.
• can be reloaded manually if a user wants a fresh copy of the card, meaning any uncertainty around the liveliness of the data is eliminated.

There are more technical details about Customer Cards in our documentation.

Setting up your first Customer Card in three simple steps

For example, say that for each customer in Plain, you want to display what subscription plan they're currently on, saving your team members the pain of having to navigate to another system to look up this information.

Step 1: Designing your card

First we'll need to design our Customer Cards in the playground . You can use the Plain UI components to build your card in any way you’d like.

We also have various card examples in team-plain/example-customer-cards that you can use as a quick reference.

Step 2: Building your API

After the card is designed, we need to implement an API that will return this card. The API will receive a POST request with the customer’s email address and the customer’s external ID (which is an ID that you can provide for a customer). The request body will also contain an array of card keys. A card key serves as a reference between Plain’s backend and your API, such as subscription-status. This means that one API call can return multiple Customer Cards which minimises the number of network calls needed.

A full request body would look like the following:

{
  "cardKeys": [
    "plan-details",
    "subscription-status"
  ],
  "customer": {
    "email": "alex@grocery.co",
    "externalId": "your_user_id_795BFCD5-130F-4E72-BD46-14F717BE0830"
  }
}

Depending on what your backend looks like, this step varies, but typically it would do the following:

• Authenticate the request (for example using a pre-shared secret in a header)
• Using the customer details it would query for the needed data for each requested card
• Finally, it would build each card and optionally determine an explicit time-to-live value.

The response would contain the list of cards, for example:

{
  "cards": [
    {
      "key": "subscription-status",
      "timeToLiveSeconds": null,
      "components": [
        …
      ]
    },
    {
      "key": "plan-details",
      "timeToLiveSeconds": 30,
      "components": [
        …
      ]
    }
  ]
}

Step 3: Setting up the Customer Card

Finally, we need to create the customer card in Plain, which just means filling out the correct card key and API details.

As soon as you save, you should see a preview of the customer card in our settings, allowing you to see if it works and how it will look.

We're really excited about this feature. We think that Customer Cards will be a game-changer for modern tools wanting to get the full context of a customer without having to develop and maintain integrations that sync data. We'll be looking at expanding the capabilities of cards in the near future and can't wait to see what you'll build with them.

Customer Cards are available now in the Plain app. Check out the Customer Card docs for more information and play around with them in the playground!