Klass Views

Learn how to configure Klass Views (or KViews) with your app. This page includes descriptions and examples for defining KViews in a Kustomer app.

Klass Views (or KViews) display data for standard objects and for custom objects (or KObjects) on the agent timeline in Kustomer. The Kustomer platform renders Klass Views based on a JSX template.

Apps can configure Klass Views for a Kustomer organization to customize timeline layouts, insight panels, insight cards, and insight details.

Learn more about Klass Views in the Kustomer Help Center.

Klass Views in the app definition

The kviews property defines the following for each Klass View: a unique id for the view, a JSX template to render in the view, where and when the view appears for agents in Kustomer, and the view icon and display name.

Klass Views definition example

The following sample JSON app definition includes a kviews property definition that creates and configures a Klass View with the name ecommstore.view.order. The Klass View in the example displays an insight card with the display name Order Information when the user views a custom object.

Sample app definition with defined `kviews` property

{
  "app": "ecommstore",
  "version": "0.0.1",
  "title": "E-comm Store",
  "kviews": [{
    "name": "ecommstore.view.order",
    "template": "<div className="orderContainer"> Order goes here </div>",
    "resource": "kobject.ecommstore-order",
    "context": "smartbar-card",
    "meta": {
      "icon": "basket",
      "displayName": "Order Information"
    }
  }]
}

Sample definition of 'kviews' property

...
  "kviews": [{
    "name": "ecommstore.view.order",
    "template": "<div className="orderContainer"> Order goes here </div>",
    "resource": "kobject.ecommstore-order",
    "context": "smartbar-card",
    "meta": {
      "icon": "basket",
      "displayName": "Order Information"
    }
  }],
...

Klass View properties

The basic kviews definition properties and their descriptions are listed below:

name

Required. A globally unique name for the view. Prefix Klass View names with <app name>.*

Validation: Must be globally unique.

Example: "name": "ecommstore.view.order" for an app with the app id ecommstore

template

The JSX template to render in the Klass View. While you can use JSX to render plain HTML items in KViews, you can also use prebuilt React.js components to create more advanced UI elements that match the Kustomer display.

Learn more about Kustomer JSX components.

Example: "template": "<div className="orderContainer"> Order goes here </div>"

resource

Determines when a Klass View will appear. resource can point to either a standard Klass (for example, customer, company, or conversation) or to a custom Klass formatted as kobject.<klass name>

Based on the resource selected, the Klass View will display in the timeline when the agent is viewing the specific resource.

Each Klass View can only point to one resource. If you want a Klass View with the smartbar-card context to appear for multiple resources, you nee to create multiple duplicate Klass Views.

Example: "resource": "kobject.ecommstore-order" (points to the custom Klass ecommstore-order)

context

Determines where a Klass View appears in Kustomer.

Example: "context": "smartbar-card"

Can be one of three options:

smartbar-card: Controls the display of insight cards on the insights panel of the timeline view

smartbar-details: Controls the view of the details panel in the top right of the timeline.

Note: Use this context only when the resource points to a Klass configured by the same app. Using the smartbar-details context on a shared resource such as the Customer resource conflicts with organization settings.

expanded-timeline: Controls the view of Klasses and custom objects (or KObjects) in the timeline.

Note: Similar to the smartbar-details context, use this context only when the resource points to a Klass configured by the same app.

meta

Referenced when the Klass View renders. The property can contains a JSON object with values for an icon and display name.

Example:

JSON

"meta": {
      "icon": "basket",
      "displayName": "Order Information"
    }

meta.icon

The icon to appear in the header for a KView with the context smartbar-card. Icons are string lookups to an icon from the Material Design Icon Library. The string must correspond directly to the icon name on the website. For instance "basket", "account-outline", and "bank-outline" are all valid icon values.

Example: "icon": "basket"

meta.displayName

The display name for the Klass View. Users will the display name when they view the Klass View in the Klass editor.

Example: "displayName": "Order Information"