Customize a Timeline Layout

Last Update: Sep 2024 • Est. Read Time: 3 MIN
To check plan availability, see the pricing page.

Klasses define the data attributes associated with each object type in your platform. You can create attributes that are added to your standard Klasses or create custom Klasses that define your business's unique custom objects. 

Who can access this feature?
User typesAdmins can access the Klasses page.


You can display custom Klass objects, such as order, in Kustomer using a Timeline Layout available within a customer's expanded timeline. With the Timeline Layout, you can display the custom order attributes that are most relevant to your agents, such as order items and shipping details. 

Notes:

  • This view is only available for custom objects.
  • You can only have one Timeline Layout per Klass object.
  • Existing Klasses with a Timeline Layout will only be editable in the Code Editor.

In this article

Edit the Timeline Layout

Once you create a new Klass, a Timeline Layout is automatically created with the visual editor, where you can customize the timeline view of a custom object. In this example, we will customize a timeline layout for a Shipping klass showing relevant attributes, such as shipping date and tracking number.

To access the Timeline Layout visual editor:

  1. Go to SettingsPlatform > Klasses
  2. Select the custom Klass and go to the Timeline Layout tab.
  3. Select Edit Card to open the Timeline Layout visual editor
  4. Optionally, if you want to use this object as a custom task, you can allow users to leave comments on the Timeline Layout view by turning on the toggle.

    Note: The ability to create custom tasks is currently in beta access.

Use the Timeline Layout visual editor

The left pane on the Timeline Layout shows all of your active standard and custom attributes, as well as components that can be added to the layout. 

The center space in the editor is where you will build and customize the Timeline Layout to best suit your needs. Here, you can add all of the necessary attributes and components your agents will see to get the information they need at a glance. 

The Settings pane on the right will show all of the available settings for each block in your layout and is where you can visually customize them further. See Change the style of a block for more details.

Understand blocks

A block is a row in your layout containing attributes or other component information, such as an image. You can add attributes and components to a block by dragging and dropping it from the left pane.

You can also select Add Attribute or + to open a menu listing all available attributes and components for you to use.

Note: Attributes can only be used once. Attributes already used will appear in a gray box and visually indicate that they are no longer available.

Blocks can have up to 3 columns. To designate how many columns will be in a block, you can drag and drop the components from the left pane, or select Add Block and select an option from the drop-down menu. Here, we will select 2 Columns Block.

Drag the desired attribute or component to each space once you designate the number of columns in a block. You can also select Add Attribute and pick the desired column or attribute from the open window.

Tips for working with blocks:

  • A block can't have more than 3 columns at a time.
  • You can add multiple fields within each column.

Change the style of a block

You can change the visual style of each block in your Timeline Layout by selecting it to view the individual options for it in the Settings panel on the right. For example, here, you can either delete the block from the layout or customize the style of it.

Note: The fields in the Settings panel will change depending on the component type currently selected.

The available style options are:

  • Border Style is the type of border that will surround the block. You can select from Dotted, Dashed, Solid, or None.
  • Border Width is the width of the border that will surround the block.
  • Border Color is the color of the border that will surround the block. You can select a color from the palette or enter specific Hex, RGB, or HSL codes.

Once you make your changes, the editor automatically applies the visual settings. You can also see the styling by selecting Preview. Select Exit Preview to return to the editor.

Once you are done creating the Timeline Layout, it will be visible in the customer's timeline.