# Interface Configuration

## Customize Your Avatar Experience Interface

Convai’s Avatar Studio provides a variety of settings to adapt the interface layout, interaction mode, and branding for different platforms and use cases.

## **Screen Resolution Presets**

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeopfdKBSd2R0hosYMyLvuqON68sA7ho5BsjA_RIX9OEhbCKA1-mdvsxJ8s1hoTeueR6ZZBfZTAHZJtIBVTBIhZStTxEG9N-uzNFFnFQMXmvifxcGPAtoG4176IispBJmvoZDSrfg?key=UBmSq8Y7gM25yDvVwPYY7g" alt=""><figcaption></figcaption></figure>

Choose the layout that best fits your deployment:

* **Desktop**
* **Tablet**
* **Mobile**
* **Kiosk**

This ensures optimal visual presentation across different screen types.

***

## **Chatbox Settings**

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeg4Zm2pUYTigRU6G1DCPKfAUxM-Q5wSuLhHKjp7A05-HgaXArBvGKU4GnLJ76LGI1LVyWevyNo-yRDkAO1Q-WSp5-Y-UxpbtYKPZPrW5LrZb_5OOkfG17DmIuHbdVk6svV4PZs?key=UBmSq8Y7gM25yDvVwPYY7g" alt=""><figcaption></figcaption></figure>

Enable or customize the chat interface as needed:

* **Chatbox Type**\
  Select your preferred chatbox style from available templates.
* **Disable Chat Interface**\
  Use the toggle to hide the chatbox completely if not needed.
* **Push-to-Talk Mode**\
  Enable push-to-talk using the toggle for voice-activated interactions.

***

## Character Vision Through Webcam

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcqySmwAcvYEq9FtW7ZBtnNstAC295LVYcZ6GodEs0qK98drPWsYK_m-1fsRlqPHS_gXST3yKhbizQAWUdvfZvoyPildTf31ZXB7tlpIdqaMtZaEyoAhTknMgn1x4ojzgQWKr96?key=UBmSq8Y7gM25yDvVwPYY7g" alt=""><figcaption></figcaption></figure>

Let your avatar “see” the user and respond accordingly using webcam input.

* Enable or disable **vision-based input** with a toggle.
* **Position** the webcam within your interface layout.
* Adjust the **webcam display size** using a slider for optimal placement.

***

## **Camera Settings**

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXejFNWtf1IQ6Z8TnemAZ_qCnxCZ7Cnhkv_ecR3pWzCzwQax5RZyVtAJ0wYQYDVJ1tX6kbwvzg5dttLApcJAv7F43o-SbhSRqsNJQKN8bOzP8DoFHrB9hd4qzhKT8NYkl-Xltx3G_A?key=UBmSq8Y7gM25yDvVwPYY7g" alt=""><figcaption></figcaption></figure>

Control how the avatar scene is viewed by the user.

* **Field of View (FOV):**\
  Adjust using the FOV slider (left = narrower, right = wider view)
* **Pan Camera:**
  * Up/Down with “Pan Up/Down” slider
  * Left/Right with “Pan Left/Right” slider
* **Zoom and Tilt:**\
  Adjust using their respective sliders for precise framing.

***

## **Branding Options**

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfLMc5jjxnOjUJLbwtWlkXhrFOsEhs_7L_Cga1hgolJyticXwJ381pW7JvdbsQM-lnthMAB7zSFRNMizcPUOuMJkw0rj5Cm4Yt0u-DZJLyj3fSftH5rBbmo8uE7v8vOzm0ULkgdww?key=UBmSq8Y7gM25yDvVwPYY7g" alt=""><figcaption></figcaption></figure>

Integrate your brand identity directly into the avatar experience:

* **Display Logo**\
  Toggle “Display Logo” to enable branding elements.
* **Upload Your Logo**\
  Click “Upload your brand logo” to add it to your scene.
* **Manage Logo Display**
  * Click the logo to place it in the experience
  * Adjust its **position** and **size** using provided controls
* **Logo on Clothing**\
  Enable “Display logo on cloth” to embed your logo onto the avatar’s clothing. *(Only available for specific clothing items)*

These configuration tools ensure that your avatar interface not only works smoothly across platforms but also aligns with your project’s style, interaction needs, and brand.


---

# 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://docs.convai.com/api-docs/no-code-experiences/avatar-studio-experiences/customizing-your-avatar/interface-configuration.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.