> For the complete documentation index, see [llms.txt](https://docs.arcware.cloud/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.arcware.cloud/web-integration/interacting-with-the-stream/customizing-the-user-interface.md).

# Customizing the User Interface

### **Customizing the User Interface**

When integrating streaming into your application, you have the option to implement a custom UI that interacts seamlessly with the stream.

**Setup and Implementation:**

**UI Container:** Start by defining an HTML element with a unique ID to act as the container for your custom UI. For example:

```html
<div id="stream-ui"></div>
```

**Fullscreen Functionality:** By default, the fullscreen feature is applied only to the `VideoElementParent`, which is part of the core WebSDK code. To ensure your custom UI benefits from fullscreen capabilities and other WebSDK functionalities, we recommend wrapping your custom UI within the `stream-ui` ID. This approach allows the WebSDK to correctly place your UI.

**Showcases:** For practical examples of custom UI implementation, refer to two of our showcases designed in this manner. These examples provide insight into how to effectively integrate and enhance your streaming UI using the WebSDK:

{% embed url="<https://automotive.arcware.cloud/>" %}
Automotive industry showcase
{% endembed %}

{% embed url="<https://jewelry.arcware.cloud/>" %}
Jewelry and Fashion industry showcase
{% endembed %}

This method ensures a cohesive integration of your custom UI elements with the streaming experience, leveraging the full capabilities of the WebSDK.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.arcware.cloud/web-integration/interacting-with-the-stream/customizing-the-user-interface.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.