# Customizing Avatar Widgets

In the avatar page you can customize the behaviors, layout, branding, and visual styling of the avatar widget. The widget preview on the left reflects the changes you do to show how the widget looks like when eventually deployed to a website.

<table><thead><tr><th width="194">Setting</th><th>Explanation</th></tr></thead><tbody><tr><td>Display mode</td><td><p>Controls how the avatar widget is presented on your page. Choose one of four layouts: </p><ul><li>Embedded — full panel rendered inline within the page; </li><li>Compact — smaller embedded panel that takes less vertical/horizontal space; </li><li>Toggler — a floating chat-bubble button in the corner that opens the avatar on click (good for site-wide assistants); </li><li>Overlay (realtime avatars only) — frameless, transparent rendering that fills its host element with no header/footer chrome, so you can layer the avatar over a hero image, video, or any background and size it entirely with your own CSS.</li></ul></td></tr><tr><td>Captions</td><td>When enabled, on-screen text captions are shown for the avatar's spoken responses. Improves accessibility and lets users follow along in noisy environments or when audio is muted.</td></tr><tr><td>Barge-in</td><td>When enabled, the user can interrupt the avatar mid-sentence simply by speaking — the avatar stops talking and starts listening. When disabled, the user must wait for the avatar to finish before speaking.</td></tr><tr><td>UI language</td><td>Sets the language of the widget's interface text (buttons, tooltips, status messages, captions UI). Supported: English, French, German, Spanish, Chinese (Simplified), and Arabic. Independent of the conversation language, which is handled by the underlying AI model.</td></tr><tr><td>Brand name</td><td>Optional brand or company name shown in the widget header. Helps reinforce your identity when the avatar is embedded on a third-party site or shared publicly.</td></tr><tr><td>Brand logo URL</td><td>Direct URL to a logo image (PNG/SVG/JPG) displayed in the widget header alongside the brand name. Use HTTPS and an image hosted on a domain that allows hot-linking.</td></tr><tr><td>Avatar background</td><td>Background applied behind the 3D avatar canvas. Accepts any valid CSS background value — a solid color (#0a0a0a), a gradient (linear-gradient(...)), or an image URL (url(...)). Leave blank for the default transparent/neutral background.</td></tr><tr><td>Corner radius</td><td>Border radius (in pixels) for the widget's outer container, controlling how rounded its corners are. 0 = sharp corners; higher values = more rounded. Ignored in Overlay mode (which has no chrome).</td></tr><tr><td>Theme colors</td><td>Four customizable CSS color variables that drive the widget's look: Primary color (main accent — buttons, highlights), Secondary color (supporting accent), Text on primary background, and Text on secondary background. Pick contrasting text colors to keep labels legible against your chosen primary/secondary.</td></tr><tr><td>Terms of servide and privacy policy links</td><td>URLs shown in the widget footer linking to your Terms and Privacy pages. Required for compliance when collecting user input or voice data; defaults to Sentifyd's own policies if left blank.</td></tr><tr><td>Sizing options</td><td>Pixel dimensions for the embedded widget: Canvas width and Canvas height size the avatar (3D scene) area; Chatbot height sets the conversation/transcript panel height. These are ignored in Overlay mode (the overlay fills its host element and is sized entirely by your own CSS) and in Toggler mode (the floating panel uses preset dimensions).</td></tr></tbody></table>

{% hint style="info" %}
Where these settings apply. The settings below are configured on the Avatar Page and saved to your avatar's profile. They are remembered the next time you open the Avatar Page and are also pre-loaded on the Deployment Page so the generated HTML embed snippet reflects them automatically.

Important: these settings only take effect on customer sites that use the generated HTML embed snippet as-is. If you (or your developers) hand-author the / web component without copying the generated attributes, the saved settings are not applied — the attributes you set on the element win.

WordPress deployments are a separate case: the Sentifyd Avatar WordPress plugin has its own settings panel inside the WP admin, and those plugin settings override anything configured here. To customize the widget on a WordPress site, configure it from the plugin's settings page rather than the Avatar Page.
{% endhint %}

<figure><img src="/files/f4T9hI90RBVm0nfFK7BE" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/v6j4troIPVDpu4rqMONd" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/zkmZgyJcojNB9x7AbY6Z" alt=""><figcaption></figcaption></figure>


---

# 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.sentifyd.io/features/customizing-avatar-widgets.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.