# Component Properties Every control on the AvatarFactory Framer component, grouped the way the Properties panel groups them. Select the component on the canvas and these appear in Framer's **Properties** panel. Controls hide themselves when they cannot apply — the camera controls only appear in `call` mode, the voice controls only once you turn on **Override voice**, and so on. > Changing a **session** setting (anything above Presentation) rebuilds the > configuration and restarts the session. Changing a **presentation** setting > only repaints. That split is deliberate, so restyling never drops a live call. ## Connection | Prop | Type | Default | Description | | --- | --- | --- | --- | | `Deployment Key` **(required)** | `string` | — | The dep_… ID of the deployment this component runs on. Filled in for you when you insert from the plugin. Public — safe on a published site. | | `Avatar ID` **(required)** | `string` | — | Which character to load. Filled in for you when you insert from the plugin. | | `Mode` | `"call" \| "tts" \| "audio"` | `"call"` | call captures the microphone for two-way voice. tts and audio are driven by code and do nothing on their own inside Framer. | Until both IDs are set, the component renders a hint on the canvas instead of booting a session. ## Conversation | Prop | Type | Default | Description | | --- | --- | --- | --- | | `Turn taking` | `"auto" \| "push-to-talk"` | `"auto"` | Who decides a turn is over. Automatic uses the server's endpointer. Push to talk hands it to the visitor. Call mode only. | | `Spacebar` | `boolean` | `true` | Let the visitor hold the spacebar as well as the button. Turn off when the page binds space itself — the SDK swallows the key while connected. Push-to-talk only. | | `Language` | `"auto" \| "fixed"` | `"auto"` | Auto lets the server detect the language and switch mid-conversation. Fixed restricts it to the list below. | | `Allowed` | `AvatarLanguage[]` | `["en"]` | The languages the conversation may use, when Language is Fixed. English, Spanish, French, German, Hindi, Russian, Portuguese, Japanese, Italian, Dutch. | ## Greeting | Prop | Type | Default | Description | | --- | --- | --- | --- | | `Greeting` | `boolean` | `false` | Speak an opening line once the session goes live. | | `Message` | `string` | — | What to say. Leave empty for the built-in greeting in the chosen language. | | `Greeting lang` | `GreetingLanguage` | `"en"` | Language for the built-in greeting. Nine languages — Dutch is not among them, unlike the conversation list. | ## Controls | Prop | Type | Default | Description | | --- | --- | --- | --- | | `Controls` | `boolean` | `true` | The built-in start / stop / mute bar. Leave it on unless you are driving the session from your own code. | | `Stop speaking` | `boolean` | `false` | Adds an interrupt button to the bar, visible only while the avatar is speaking. | ## Camera Vision is **off unless you turn it on**, and even then the SDK opens the camera just-in-time — when the avatar actually needs to look at something, never on connect. See [Camera perception](/docs/sdk/react/perception) for what is captured and how long it is kept. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `Camera` | `boolean` | `false` | Allow the avatar to see. Call mode only. The visitor still gets the browser's own permission prompt. | | `Picture in picture` | `boolean` | `false` | Put the camera on the stage and the avatar in a corner while a camera session is open. | | `Avatar corner` | `Corner` | `"bottom-right"` | Where the avatar sits in picture-in-picture. | | `Self view` | `boolean` | `Show` | Hiding the self-view is discouraged — it is how the visitor knows their camera is on. Capture continues either way. | | `Self view corner` | `Corner` | `"bottom-right"` | Where the self-view sits when picture-in-picture is off. | ## Transcript and captions | Prop | Type | Default | Description | | --- | --- | --- | --- | | `Transcript` | `boolean` | `false` | Assemble a live transcript of the conversation. Off means no transcript is built at all and no captions render. | | `Captions` | `boolean` | `true` | Render the built-in caption overlay. Turn off to keep the transcript data for your own code while drawing your own UI. | | `Caption anchor` | `CaptionPosition` | `"bottom-center"` | Which of the six anchors the caption overlay sits at. The bottom anchors lift clear of the controls bar. | | `Max lines` | `number` | `50` | How many transcript lines to retain. 5–500. | ## Status banner | Prop | Type | Default | Description | | --- | --- | --- | --- | | `Status banner` | `boolean` | `true` | The built-in connectivity banner, driven by live stream health. It only appears when something is actually wrong. | | `Banner anchor` | `Corner` | `"bottom-left"` | Which corner the banner anchors to. Corners only — no centre anchors. | ## Thinking indicator | Prop | Type | Default | Description | | --- | --- | --- | --- | | `Thinking dots` | `boolean` | `true` | Animated dots shown only when a turn is running unusually slow — a liveness cue, not a warning. Never appears on fast turns. | | `Dots anchor` | `CaptionPosition` | `"top-left"` | Where the indicator sits. A top corner stays clear of the controls bar at the bottom. | ## Ringback tone The "waiting for someone to pick up" tone, played while the session connects. It stops once the avatar is painted **and** the session is live. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `Ringback` | `boolean` | `false` | Play a tone while connecting. Call mode only, and never on the editor canvas. | | `Tone file` | `File (mp3, wav, ogg, m4a)` | — | Your own tone. Leave empty for the built-in one. | | `Loop tone` | `boolean` | `true` | Repeat the tone until the connect completes. | | `Tone volume` | `number` | `0.4` | 0–1. The default sits under the conversation rather than over it. | | `Tone fade` | `number (ms)` | `220` | Fade-out when the tone stops. A hard cut clicks, which is why this is not zero. | ## Brain | Prop | Type | Default | Description | | --- | --- | --- | --- | | `Override brain` | `boolean` | `false` | Off uses whatever model the avatar was published with. On lets this one embed run a different model. | | `Provider` | `"openai" \| "anthropic" \| "groq"` | `"openai"` | Which vendor powers the conversation. | | `Model` | `string` | — | A specific model ID. Leave empty for the provider's default. The server validates it. | | `System prompt` | `string` | — | The avatar's instructions and personality. Leave empty to use the prompt saved on the avatar. | > **Billing the model to your own vendor account** is not a component control. > Bring-your-own-key for the brain is bound to the avatar in the Platform > (Brain tab → API key), so an embed with no key in its request path still > resolves the right account. See [Bring your own keys](/docs/guides/byok). ## Voice | Prop | Type | Default | Description | | --- | --- | --- | --- | | `Override voice` | `boolean` | `false` | Off uses the voice the avatar was published with. | | `TTS provider` | `"elevenlabs" \| "inworld"` | `"elevenlabs"` | Which speech engine voices the avatar. | | `Voice ID` | `string` | — | A specific voice on that provider. An invalid or empty value falls back to the provider's default voice, so the avatar always speaks. | | `Own TTS key` | `boolean` | `false` | Route speech through your own account with that provider. Requires a saved provider key; the key itself is resolved server-side and never travels through the component. | | `Speed` | `number` | `1` | Passed through to the voice engine. 0.5–2. | | `Stability` | `number` | `0.5` | Passed through to the voice engine. 0–1. | | `Similarity` | `number` | `0.75` | Passed through to the voice engine. 0–1. | | `Viseme frame` | `number (ms)` | `40` | The viseme grouping window — mouth shapes closer together than this are merged into one. | ## Presentation None of these touch the session; they are pure styling and never restart a call. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `Fit` | `string` | `"contain"` | How the character fills the frame: Contain, Cover, Fill, Fit width, Fit height, Scale down, Rive layout, None, or Published default. Cover crops the artboard — that is what reads as zoomed in. | | `Loading state` | `"orb" \| "skeleton" \| "spinner" \| "blank"` | `"orb"` | What shows while the character loads. Orb is the SDK's own animated loader. | | `Canvas quality` | `number` | `2` | Editor-only supersampling, because Rive's buffer ignores Framer's canvas zoom. Cost is the square: 4 draws sixteen times the pixels. No effect on the published site. | | `Corner radius` | `number` | `24` | Rounds the frame. 0–100. | | `Padding` | `number` | `0` | Insets the avatar inside the frame. 0–60. | | `Background` | `"solid" \| "gradient" \| "none"` | `"solid"` | A tint layer behind the character. | | `Tint color` | `color` | `#6366f1` | The background colour, solid or as the centre of the radial gradient. | | `Tint opacity` | `number` | `10` | 0–100. | | `Shadow` | `boolean` | `false` | Drop shadow under the frame. | | `Shadow depth` | `number` | `3` | 1–10. | | `Hover animation` | `boolean` | `false` | Scale the frame on hover. Off by default because scaling re-rasterises the rig and softens it. | | `Hover scale` | `number` | `1.05` | 1–1.3. | | `Transition speed` | `number (s)` | `0.3` | Duration of the entrance fade and the hover transition. 0.1–1.5. | > **Sizing.** The component ships at 200 × 200 and prefers a fixed size on both > axes. Give it a square frame unless you have picked a `Fit` that suits another > ratio — the character is drawn from a square artboard.