Components
Components are reusable, themed content blocks — the primary building blocks for zone content in Inspire. They separate content structure from visual design, enabling powerful theming and consistency across your displays.
What is a Component?
A component defines:
- A slug — a unique identifier (e.g.
kpi-card,agent-status,queue-summary) - A set of inputs — the data the component expects (title, value, unit, icon, etc.)
- A visual design per theme — how the component looks, defined in the Component Designer
When you place a component in a zone, you provide values for its inputs. The theme determines how those values are rendered visually.
Creating a Component
Navigate to Components
From the sidebar, click Components.
Create new component
Click New Component. Give it a name and slug.
Define inputs
Add inputs that describe what data the component needs. Each input has:
| Property | Description |
|---|---|
| Name | Display name (e.g. “Title”) |
| Key | Programmatic key (e.g. title) |
| Type | string, number, boolean, colour, image, icon, stream |
| Default | Optional default value |
| Required | Whether the input must be provided |
Design the component
Click Open in Component Designer to create the visual design.
The Component Designer
The Component Designer is a dedicated visual tool for creating component designs. It works similarly to the scene Designer but is focused on a single component.
Design surface
The design surface represents the component’s bounding box. You can:
- Set the component’s aspect ratio or size constraints
- Add elements (text, shapes, images, etc.) that make up the visual design
- Bind element properties to component inputs
Binding to inputs
To connect a visual element to a component input:
- Select an element on the design surface
- In the properties panel, click the link icon next to any property
- Choose Component Input and select the input to bind
For example, binding a text element’s content to the title input means any value provided for title will appear in that text element.
Test mode
Click Test to preview the component with sample data. You can enter test values for each input and see how the component responds.
Each theme can have its own visual design for the same component. This means a kpi-card component can look completely different in a “Corporate” theme vs. a “Retail” theme, while accepting the same inputs.
Placing Components in Zones
Components are the recommended way to fill zones in a scene:
Open a scene in the Designer
Navigate to your scene and open the Designer.
Select a zone
Click on a zone in the layout.
Add component content
Click Add Content and choose Component.
Select the component
Browse your component library and select one.
Provide input values
Fill in the input values. You can:
- Type static values directly
- Bind inputs to DataPool fields for live data
- Use formulas for computed values
Save
The component renders in the zone using the scene’s active theme.
Component Best Practices
| Practice | Why |
|---|---|
| Use semantic input names | value and label are clearer than input1 and input2 |
| Set sensible defaults | Components should look reasonable even without all inputs provided |
| Design for multiple sizes | Test your component at different zone sizes |
| Keep input count manageable | 3-8 inputs is typical; more than 12 becomes unwieldy |
Use the stream input type | For components that display lists or tables of data |
Built-in Components
Inspire ships with a library of built-in components:
| Component | Use Case |
|---|---|
| KPI Card | Key performance indicator display |
| Agent Status | Contact centre agent status display |
| Queue Summary | Call queue summary display |
| Stat Counter | Animated statistic counter |
| Progress Bar | Horizontal progress bar with thresholds |
| Ticker | Scrolling news or message feed |
| Clock | Configurable clock display |
| Status Indicator | Status light with label |
You can customise built-in components or create your own from scratch.