> ## Documentation Index
> Fetch the complete documentation index at: https://docs.altoura.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Adding and Customizing UI Controls in an Experience

> UI Controls are callouts in the space that can expand to more information, including text, images, videos, when the user interacts with it. This allows you to draw attention to different part of the space without being confined by the step by step panel, and encourages the user to be more interactive within the Experience.

UI Controls have two states: discover & expanded. Discover mode is when a UI Control is ready to be interacted with, represented by a colored square in the space. Expanded mode is when a UI Control is interacted with by click or tap, resulting in a pop up of text, image, video, teleport, browser, or animation.

A UI Control in an Experience can be added either from a [node](/docs/features/experience-system/node-definitions#ui-controls) or a [connector](/docs/features/experience-system/connectors/definition).

<Frame caption="a UI Control in discover mode">
  <img src="https://mintcdn.com/altoura-785c3552/niZvlZtOVSBbiV3u/images/docs/770c275-documentationUIControlDiscover.PNG?fit=max&auto=format&n=niZvlZtOVSBbiV3u&q=85&s=2ba1db61e7e59f05ccd5d981c0017368" width="1249" height="693" data-path="images/docs/770c275-documentationUIControlDiscover.PNG" />
</Frame>

<Frame caption="a UI Control in expanded mode">
  <img src="https://mintcdn.com/altoura-785c3552/ZuSJMQqW-zq_BCI_/images/docs/bd46c2d-documentationUIControlExpanded.PNG?fit=max&auto=format&n=ZuSJMQqW-zq_BCI_&q=85&s=c016626ad8ed1c1a301ca26f15ec5118" width="1235" height="698" data-path="images/docs/bd46c2d-documentationUIControlExpanded.PNG" />
</Frame>

Below you'll learn about how to create these in an Experience node.

## Adding UI Controls

At the bottom of a node or connector there is an option to add UI Controls.

<img src="https://mintcdn.com/altoura-785c3552/uN9er-P_53ywyRvz/images/docs/cec3b5a-Inkeddocumentationuicontrols3dobjects_LI2.jpg?fit=max&auto=format&n=uN9er-P_53ywyRvz&q=85&s=d1e328db41cf4dba318f589640e13f5b" alt="404" width="404" height="682" data-path="images/docs/cec3b5a-Inkeddocumentationuicontrols3dobjects_LI2.jpg" />

When you click the ellipses on the right, a pop up with the UI Control options will appear.

<img src="https://mintcdn.com/altoura-785c3552/rSHiWKFaLfV4dcN7/images/docs/6e69547-Screen_Shot_2022-08-13_at_10.53.58_AM.png?fit=max&auto=format&n=rSHiWKFaLfV4dcN7&q=85&s=7e37c7928eb8b24b9804407e2f754f9f" alt="654" width="654" height="478" data-path="images/docs/6e69547-Screen_Shot_2022-08-13_at_10.53.58_AM.png" />

Once you choose a UI Control type, the UI Control customization will appear on the node.

<img src="https://mintcdn.com/altoura-785c3552/RIgkSrBJFuycivOX/images/docs/ea98ad5-documentationUIControls2.PNG?fit=max&auto=format&n=RIgkSrBJFuycivOX&q=85&s=c55f7d8051c04fd81264c6e760334ee7" alt="415" width="415" height="697" data-path="images/docs/ea98ad5-documentationUIControls2.PNG" />

## UI Control Base Customization

**Name** – The text value to title the UI Control in the node. This is only visible within the builder to organize and identify your UI Controls.

**UIControlIconColor** – The color of the UI Control icon in the discover view.

**UIControlTextPanelColor** – The color of the back of the UIControlText below the icon if there is a UIControlText defined.

**ViewMode** – Whether the UI Control is visible in the Dollhouse or the Realscale model.

**IsStatic** – If this is unchecked, the UI Control will scale with the distance of the user from the UI Control. If it is checked, the UI Control will be a set scale.

**Constraints** –

<Warning>
  ### This customization is not yet functional.
</Warning>

**WorldOrientation** – If Billboard is chosen, the UI Control in the expanded & discover view will always face the user.

**InitialSpawnGameObject** – The name of a GameObject in the asset bundle with a Transform component. The global position of this object will be the position that the discover UI Control icon will display at. The Transform Matrix below is an optional offset to the position, rotation, and scale of the InitialSpawnGameObject transform.

**UIControlText** – The text to display below the UI Control icon in the discover view. If left empty, there will be no title below the UI Control icon in the discover view.

**UIControlIcon** – The image icon of the UI Control in discover view. If left empty, a default icon related to the UI Control type will be displayed.

**UIControlVisitedIcon** – The image icon that replaces the UIControlIcon after he UI Control in discover view has been clicked. If left empty, the UIControlIcon will not change on click.

**MustInteract** – Whether or not the user must interact with the UI Control in order to move to the next step via the step by step panel next arrow.

**IsNetworked** – Whether or not the display state of the UI Control is synced with all other users if in a meeting.

## UI Control Text Type Customization

**Expanded Matrix** – The position, rotation, and scale offset from InitialSpawnGameObject position, rotation, and scale values for the expanded view.

**OnExpandAnimation** – The name of a GameObject in the asset bundle with a Playable Director or Animator component attached. This animation attached will play from the discover to expanded view.

**OnExpandActivateObjects** – The list of objects, separated by commas, to set active when changing from the discover to expanded view.

**OnExpandDeactivateObjects** – The list of objects, separated by commas, to set inactive when changing from the discover to the expanded view.

**OnCloseAnimation** – The name of a GameObject in the asset bundle with a Playable Director or Animator component attached. This animation attached will play from the expanded to discover view.

**OnCloseActivateObjects** – The list of objects, separated by commas, to set active when changing from the expanded to discover view.

**OnCloseDeactivateObjects** – The list of objects, separated by commas, to set inactive when changing from the expanded to discover view.

**TitleText** – The title of the text panel that displays in the expanded view.

**BodyText** – The body text of the text panel that displays in the expanded view.

## UI Control Image Type Customization

**Expanded Matrix** – The position, rotation, and scale offset from InitialSpawnGameObject position, rotation, and scale values for the expanded view.

**OnExpandAnimation** – The name of a GameObject in the asset bundle with a Playable Director or Animator component attached. This animation attached will play from the discover to expanded view.

**OnExpandActivateObjects** – The list of objects, separated by commas, to set active when changing from the discover to expanded view.

**OnExpandDeactivateObjects** – The list of objects, separated by commas, to set inactive when changing from the discover to the expanded view.

**OnCloseAnimation** – The name of a GameObject in the asset bundle with a Playable Director or Animator component attached. This animation attached will play from the expanded to discover view.

**OnCloseActivateObjects** – The list of objects, separated by commas, to set active when changing from the expanded to discover view.

**OnCloseDeactivateObjects** – The list of objects, separated by commas, to set inactive when changing from the expanded to discover view.

**ImageUrl** – The image that displays in the expanded view.

## UI Control Video Type Customization

**Expanded Matrix** – The position, rotation, and scale offset from InitialSpawnGameObject position, rotation, and scale values for the expanded view.

**OnExpandAnimation** – The name of a GameObject in the asset bundle with a Playable Director or Animator component attached. This animation attached will play from the discover to expanded view.

**OnExpandActivateObjects** – The list of objects, separated by commas, to set active when changing from the discover to expanded view.

**OnExpandDeactivateObjects** – The list of objects, separated by commas, to set inactive when changing from the discover to the expanded view.

**OnCloseAnimation** – The name of a GameObject in the asset bundle with a Playable Director or Animator component attached. This animation attached will play from the expanded to discover view.

**OnCloseActivateObjects** – The list of objects, separated by commas, to set active when changing from the expanded to discover view.

**OnCloseDeactivateObjects** – The list of objects, separated by commas, to set inactive when changing from the expanded to discover view.

**VideoPanel** – The video that displays in the expanded view.

## UI Control Teleport Type Customization

**TeleportGameObject** – The name of a GameObject in the asset bundle with a Transform component attached. The position on this GameObject is where the user will teleport to in the Realscale space.

**TeleportActivateObjects** – The list of objects, separated by commas, to set active on teleport.

**TeleportDeactivateObjects** – The list of objects, separated by commas, to set inactive on teleport.

## UI Control Browser Link Type Customization

**BrowserLink** – The URL to link to on expand.

## UI Control Animation Type Customization

**OnPressAnimation** – The name of a GameObject in the asset bundle with a Playable Director or Animator component attached. This animation attached will play from the expanded to discover view.

**OnPressActivateObjects** – The list of objects, separated by commas, to set active on press of the UI Control.

**OnPressDeactivateObjects** – The list of objects, separated by commas, to set inactive on press of the UI Control.