# Floating UI

## Overview

The **Floating UI** tool enables the integration of UI elements into a project, including buttons, sliders, images, text, and more. These elements can either remain fixed on the screen or be dynamically positioned relative to 3D objects, allowing for greater flexibility in user interaction and visual presentation.<br>

* **Floating UI** elements can be always visible or appear in response to user interactions, such as clicking on objects or hotspots within the scene.
* Combining UI with [Interactions](/documentation/3d-configurator/interactions.md) allows for the creation of more advanced and interactive experiences.
* UI elements can either be part of the 3D canvas or exist independently from it, ensuring that interface components do not interfere with 3D objects. This alternative mode, known as **Docked UI**, can be configured in the [**Floating UI** settings](/documentation/3d-configurator/floating-ui/floating-ui-settings.md).

{% hint style="info" %}
Switch to **Preview Mode** to view all Floating UI elements simultaneously and test their functionality
{% endhint %}

## Elements

**Floating UI** itself serves as a container for **UI elements**. After adding a **Floating UI**, elements must be placed inside it to build the interface.

Available UI elements:

<table><thead><tr><th width="166.79296875"></th><th></th></tr></thead><tbody><tr><td><a data-mention href="/pages/YNihSyIx25w5mR5k7I3F">/pages/YNihSyIx25w5mR5k7I3F</a></td><td>structural element for grouping other UI elements</td></tr><tr><td><a data-mention href="/pages/QkAzHfq3cspZyedQDrJi">/pages/QkAzHfq3cspZyedQDrJi</a></td><td>element for switching materials <mark style="color:$info;">(can be configured as a dropdown menu or swatches)</mark></td></tr><tr><td><a data-mention href="/pages/pPprqUyZEaUAqjzqpDKo">/pages/pPprqUyZEaUAqjzqpDKo</a></td><td>element for switching objects <mark style="color:$info;">(can be configured as a dropdown menu or swatches)</mark></td></tr><tr><td><a data-mention href="/pages/OlhEvrYQCfzMboDaLdX5">/pages/OlhEvrYQCfzMboDaLdX5</a></td><td>element for displaying text within the UI</td></tr><tr><td><a data-mention href="/pages/xVEGsqx6HvI8xuVyceXX">/pages/xVEGsqx6HvI8xuVyceXX</a></td><td>element for displaying <strong>images</strong>, <strong>videos</strong>, <strong>GIFs</strong>, or <strong>Lottie</strong> animations</td></tr><tr><td><a data-mention href="/pages/SnRr93FsP87g13thvxLU">/pages/SnRr93FsP87g13thvxLU</a></td><td>button element designed to trigger <a href="/pages/GT5UjKostDyyjkEnfqjJ">actions</a></td></tr><tr><td><a data-mention href="/pages/fhLJj16aB5KH37NqAGRh">/pages/fhLJj16aB5KH37NqAGRh</a></td><td>element in the form of a slider that allows changing <a href="/pages/X8nfojuqMc3VCBg3REA7">variable</a> values</td></tr><tr><td><a data-mention href="/pages/XpwkskFegXlkCJJERLsn">/pages/XpwkskFegXlkCJJERLsn</a></td><td>input field for entering text or numerical values to modify variable values</td></tr><tr><td><a data-mention href="/pages/NhcHWejfgtxc6cyiLElM">/pages/NhcHWejfgtxc6cyiLElM</a></td><td>element that allows embedding an external <strong>link</strong> or <strong>code block</strong></td></tr><tr><td><a data-mention href="/pages/ui4pbrMSUAtPXs95Gcn0">/pages/ui4pbrMSUAtPXs95Gcn0</a></td><td></td></tr></tbody></table>

## Tutorials

{% embed url="<https://youtu.be/vzc6fhgSrDE>" %}

{% embed url="<https://youtu.be/mvn-V3JIrhU>" %}

{% embed url="<https://youtu.be/E9qo5sjc_n0?si=-4_HYuFNzdBifTkS>" %}

{% embed url="<https://youtu.be/9ZkMtQlxJAk?si=uodzfyHUdFWUK8Px>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.vectary.com/documentation/3d-configurator/floating-ui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.