Customize the Kustomer view

Kustomer's timeline layout gives you full customer context by showing conversations, orders, and other custom data in one place. Another key feature of Kustomer is the ability to take key information for a customer or conversation and highlight it in an Insight Card for easy access.

In this tutorial, you'll learn how to view KObject data from a custom Klass within an Insight Card. This Insight Card is designed to be used with customer timelines that have up to 100 KObjects on them. For the purposes of this article, we'll use a custom Orders Klass to show on the customer timeline, but you can apply these skills to fetch any custom KObject data and place it on any Klass. 

In this article

• Prerequisites
• Create Insight Card and convert it to code
• Add code to Insight Card
• Customize the code with your Klass
• Show a different attribute in the Insight Card
• Customer Order Objects code sample

Prerequisites

Before following this guide, we recommend being familiar enough with the React JavaScript library to make customizations in code. If you're new to React, learn more from the React documentation in Intro to React.

Create Insight Card and convert it to code

New Insight Cards use the visual builder by default, but for this tutorial, you'll switch to the code editor to insert the provided code sample that sets up the rest of the card.

To set up the Insight Card:

1. Go to Settings> Platform > Klasses
2. Select the Customer Klass.
3. Switch to the Insight Cards tab.
4. Select Create Insight Card.
5. Fill out the Name and Icon as desired. If you're following the example, name the Insight Card Order.
6. The visual builder will appear. Select View Code from the bottom of the screen.
7. Select Convert to Code.
8. Type CONVERT in the field to confirm the conversion.

Add code to Insight Card

You'll now have a blank Insight Card within the Customer Klass. Next, you'll add the code sample into the Code tab of the Insight Card.

To add the code sample:

1. In another browser tab, scroll down to the Customer Order Objects code sample in this article. Select the whole code block and Copy it to your clipboard.
2. Back on the Edit Insights Card screen, click into the Code field. The text insertion cursor should be blinking.
3. Paste the code sample into the code field.
4. At the bottom of the screen, select Save Changes.

After saving these changes, an Insight Card will be created that pulls in all Orders objects on a customer's timeline.

Customize the code with your Klass

Next, you can modify the code sample to add your own Klass to the Insight Card.

To update the code with your custom Klass:

1. Go to Settings> Platform > Klasses.
2. Copy the name of the desired Klass exactly as it appears on the Klass Management page. In the example shown below, you would use the name damage_claim, rather than Damage Claim.
3. Go back to the code editor on your new Insight Card.
4. On line 10, replace order with the name of your Klass.
5. On line 48, replace order with the name of your Klass.
6. At the bottom of the screen, select Save Changes.

Once the Insight Card has been saved, it will start showing data from the added Klass.

Show a different attribute in the Insight Card

This Insight Card will show a list of the KObjects on a customer's timeline along with their createdAt dates. As before, you can customize the code to replace the createdAt column with a different attribute.

To show a different attribute in the Insight Card:

1. Go to Settings> Platform > Klasses.
2. Select the Klass you added to the Insight Card earlier in this article.
3. Copy the camelCased name of the attribute you'd like to add to the Insight Card. For example, to add the Claim Status custom attribute from the list below, copy claimStatusStr.
4. Go back to the code editor on your new Insight Card.
5. On line 50, replace the createdAt text with your attribute. If you are using a custom attribute, you'll want to add custom. in front of your attribute name.
6. On line 57, replace the Created At text with a title that describes the attribute you just added to line 50.
7. At the bottom of the screen, select Save Changes.

Your Insight Card will now display the newly-added attribute instead of the createdAt attribute.

Customer Order Objects code sample

//Retrieves the customer ID
const customerId = _.get(this.context.customer, "id");

//Creates table variable
const Table = 'table';

//Gets all objects on the customer timeline
const fetchObjects = () => new Promise((resolve, reject) => {
  this.KustomerRequest({
    url: `/v1/customers/${customerId}/klasses/order`,
    method: 'GET'
  }).then((kobjects) => {
    resolve(kobjects)
  }).catch((e) => {
    throw e
  });
});

//Initialization
<React.Fragment>
  {(() => {
    class Test extends React.PureComponent {
     constructor(props) {
      super(props);
      this.state = {
        objects: [],
      };
    }
    async componentDidMount() {
      try {
        const objects = await fetchObjects();
        this.setState({
          objects: objects.data
        });
      } catch (e) {
        console.log(
          "%c Past Objects",
          "color:red;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold"
        );
        console.log(e);
      }
    }
    generateTable(objects) {
      let correctOrder = objects.reverse();
      const tableCells = correctOrder.map((object) =>
        <tr>
        <td>
          <Kobject id = {object.id} type = "order" />
        </td>
        <td>{object.attributes.createdAt}</td>
        </tr>
      );
    return(
      <Table style={{width: "100%",border: "1px solid #dddddd"}}>
      <tr>
        <th>Order Title</th>
        <th>Created At</th>
      </tr>
        {tableCells}
      </Table>
    )
  }
  render() {
    return (
    <div>
      {this.generateTable(this.state.objects)}
    </div>
    );
  }
}
return React.createElement(Test);
})()}
</React.Fragment>;