---
title: Adding Widgets to a 3D Asset
description: "Widgets are the heart of your digital twin, bringing your 3D models to life with real-time data. This guide explains the correct workflow for adding and configuring widgets in the **Asset Editor**. Table Of Contents - [Understanding the Interface](#understanding-the-interface) - [Step…"
url: "https://twinnoverse.com/docs/adding-widgets-to-a-3d-asset/"
updated: "2026-08-07"
category: Digital twin / Digital Twin Widget System
---

# Adding Widgets to a 3D Asset

Widgets are the heart of your digital twin, bringing your 3D models to life with real-time data. This guide explains the correct workflow for adding and configuring widgets in the **Asset Editor**.

    Table Of Contents

- [Understanding the Interface](#understanding-the-interface)
- [Step 1: Add a New Widget](#step-1-add-a-new-widget)
- [Step 2: Select a Widget Type](#step-2-select-a-widget-type)
- [Step 3: Configure the Widget's Settings](#step-3-configure-the-widgets-settings)
  - [Common Settings](#common-settings)
  - [Widget-Specific Settings](#widget-specific-settings)
- [Step 4: Save Your Configuration](#step-4-save-your-configuration)

**Prerequisite:** You must be in the Asset Editor. To get here, navigate to the **Assets** tab from the main dashboard and click the **"Configure"** button on the asset you wish to edit.

---

## Understanding the Interface

In the Asset Editor, you will see your 3D model in the center. On the left and right sides are two vertical **Widget Panels**. This is where your configured widgets will live.

---

## Step 1: Add a New Widget

1. Decide which side of the asset you want to add a widget to.
2. Click the **"+ Add Widget"** button on either the Left or Right panel.
3. This will open the **Widget Library**, which displays all the available widget types (e.g., "Single Value Display", "Bar Chart").

---

## Step 2: Select a Widget Type

1. In the Widget Library, click on the type of widget you want to add.
2. The library will close, and the **Widget Settings Panel** will slide into view, ready for configuration.

---

## Step 3: Configure the Widget's Settings

This panel contains all the settings required to make your widget work. While specific options change per widget, the top section is always the same.

### Common Settings

- **Datasource:** A dropdown menu listing all the datasources you have created. Select the one you want this widget to receive data from.
- **Data Key:** This is the most critical field. It's the top-level key in your JSON data that this widget should look for. For example, if your JSON is `{"temperature": 45}`, your Data Key would be `temperature`.

### Widget-Specific Settings

Below the common settings, you will find fields unique to the widget you chose. For example, a `DoubleData` widget will ask for a `Primary Title` and `Primary Sub-Key`, while a `BarChart` widget will ask for a `Labels Key` and `Values Key`.

For a detailed breakdown of the settings for each widget, refer to the **Widget Library Reference**.

---

## Step 4: Save Your Configuration

1. Once you have filled out all the required settings, click the **"Save"** button at the bottom of the panel.
2. The settings panel will close, and you will see a new **Widget Card** appear in the left or right panel where you added it.

This widget is now successfully attached to your asset. When you place this asset in a scene and data is sent to the linked datasource, the widget will update automatically.