# Web widget profile settings

### Teaser

The teaser message is the first point of contact with your users. It appears as a small text bubble next to your widget when collapsed. Choose a welcoming, engaging message that aligns with your virtual being's personality and encourages interaction.

<figure><img src="https://1213579860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaU7JJyoXT5PfhTD9dJ%2Fuploads%2FfZKXjAyOEzmPhmWOygqd%2FZrzut%20ekranu%202025-02-10%20o%2016.42.44.png?alt=media&#x26;token=514cc08f-583d-4557-b75c-9dafcbf80d96" alt="" width="375"><figcaption><p>Teaser setting in Web widget profile settings</p></figcaption></figure>

<figure><img src="https://1213579860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaU7JJyoXT5PfhTD9dJ%2Fuploads%2FoILrpLLqTxrhxaNitmDK%2Fimage.png?alt=media&#x26;token=84c4225d-ab82-4b1b-b44b-31a57dbc687d" alt="" width="350"><figcaption><p>What a collapsed web widget with a teaser looks like</p></figcaption></figure>

{% hint style="info" %}
**Best practice**: Keep the message short, friendly, and aligned with your use case (e.g., "Need help shopping?" for retail, "Questions about your account?" for banking).
{% endhint %}

### AI Disclaimer

Control transparency about AI usage in your virtual being. When enabled, users see a brief message explaining that they're interacting with an AI assistant. This setting helps meet ethical AI guidelines and manage user expectations.

<figure><img src="https://1213579860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaU7JJyoXT5PfhTD9dJ%2Fuploads%2FkiEb7JmInZjKBmUcuA7A%2FZrzut%20ekranu%202025-02-10%20o%2016.42.47.png?alt=media&#x26;token=c8edf9f8-2d9b-49f8-89e6-606610f88e52" alt="" width="375"><figcaption><p>AI disclaimer field</p></figcaption></figure>

<figure><img src="https://1213579860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaU7JJyoXT5PfhTD9dJ%2Fuploads%2FEd52nmhzZq4itwxNR5xz%2Fimage.png?alt=media&#x26;token=e2fe7bad-2e78-44fa-8e73-f5e366def1dd" alt="" width="375"><figcaption><p>Web widget with disclaimer turned on</p></figcaption></figure>

### Conversation Start Settings

Define how proactive your virtual being should be. You have two auto-start options:

* **Page focused**: Conversation starts when a user actively views your webpage. Useful for immediate engagement but may be perceived as overwhelming.
* **Widget focused**: More subtle approach - conversation begins only when users show interest by interacting with the widget (hover or click).

<figure><img src="https://1213579860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaU7JJyoXT5PfhTD9dJ%2Fuploads%2FpoMn7y5gfFydgx1NuZaM%2FZrzut%20ekranu%202025-02-10%20o%2016.42.53.png?alt=media&#x26;token=40463646-53d4-4833-9459-a85d926c0a40" alt="" width="563"><figcaption><p>Conversation start settings</p></figcaption></figure>

Consider your users' context and preferences when choosing these settings.

### Conversation Signals Settings

These settings control how your widget communicates with the backend system:

* **Start signal**: Marks the beginning of a new conversation, enabling proper session tracking and analytics, and more importantly can be used in Conversation Flows to start processing of the conversation logic.
* **Interrupt signal**: Tracks when users manually stops response generation (voice or text) using the interrupt button. Default is on off, turning this on can be useful for synchronizing multiple widgets (very advanced setup), **however it requires being handled appropriately in conversation flows.**
* **Stop signal**: Records natural conversation endings, useful for analyzing complete interaction cycles.

<figure><img src="https://1213579860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaU7JJyoXT5PfhTD9dJ%2Fuploads%2FI0G11fI7GcuE6vS5eNmN%2FZrzut%20ekranu%202025-02-10%20o%2016.42.58.png?alt=media&#x26;token=2c31a1ce-12e4-4aad-a9b7-d422f86ed332" alt="" width="563"><figcaption><p>Conversation signals settings</p></figcaption></figure>

These signals are crucial for:

* Proper conversational experience
* Analytics reporting

### Conversation Settings on Page Refresh

Manage conversation persistence across page reloads:

* **Always**: Forces new conversation on every refresh. Best for situations where each interaction should be fresh (e.g., public kiosks).
* **After \[X] minutes**: Balances persistence with session management. Useful for normal website interactions. Maximum time is 720 minutes.
* **Never**: Maintains conversation context across refreshes. Ideal for complex interactions where context is important.

<figure><img src="https://1213579860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaU7JJyoXT5PfhTD9dJ%2Fuploads%2F4B5SqU7likzWBIan29xU%2FZrzut%20ekranu%202025-02-10%20o%2016.43.07.png?alt=media&#x26;token=097989f8-aa9c-4f28-b9a2-dd74aa276c0d" alt="" width="563"><figcaption><p>Conversation settings on page refresh</p></figcaption></figure>

### Widget Configuration

Customize the interaction tools available to users:

**Core Communication Tools**:

* Show chat: Enables text conversation display
* Show text input: Allows typed responses
* Show recording button: Enables voice input

**Accessibility Features**:

* Show subtitles: Essential for hearing-impaired users or noisy environments
* Show mute button: Gives users audio control
* Muted on start: Respects user preference for quiet browsing

**Control Options**:

* Show reset button: Allows users to restart conversations if needed

<figure><img src="https://1213579860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaU7JJyoXT5PfhTD9dJ%2Fuploads%2Fhojxw2mXHZ7yuCZGD1r5%2FZrzut%20ekranu%202025-02-10%20o%2016.43.13.png?alt=media&#x26;token=bfb907c0-f35a-4ae8-b766-0cdd6afc07f7" alt="" width="563"><figcaption><p>Additional widget configuration</p></figcaption></figure>

### Customize 3D Scene

Create an appropriate environment for your 3D scene (whether or not it uses an avatar):

* **Ground color**: Sets the base surface color where avatar stands
* **Skybox color**: Creates atmosphere and depth in the 3D environment
* **Custom background**: Upload specific images for branded experiences

<figure><img src="https://1213579860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaU7JJyoXT5PfhTD9dJ%2Fuploads%2F2WoZqlT6Y1OK2vMQIpat%2FZrzut%20ekranu%202025-02-10%20o%2016.43.19.png?alt=media&#x26;token=53defe75-6ba5-4227-9a1a-69960db75271" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Be**st practice:** Choose neutral colors that don't compete with your avatar for attention.
{% endhint %}

### Customize Widget UI

Brand alignment and visual coherence, feature availability depends on the subscription plan:

* **Background color**: Main widget color
* **Text color**: Ensure good contrast with background
* **Accent color**: Highlights interactive elements
* **Logo options**: Control Virbe branding visibility

<figure><img src="https://1213579860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaU7JJyoXT5PfhTD9dJ%2Fuploads%2FWCQW9cL29dVpS02018kE%2FZrzut%20ekranu%202025-02-10%20o%2016.43.24.png?alt=media&#x26;token=f57786ed-1fe8-45d5-a454-e806e069b3fb" alt="" width="563"><figcaption><p>Customize widget UI</p></figcaption></figure>

All colors should follow your brand guidelines while maintaining accessibility standards for readability.
