# 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.