# Framer Put a live talking avatar on a Framer site without writing code. Connect the plugin, drag a deployment onto the canvas, and configure it from the Properties panel. The AvatarFactory Framer plugin browses the deployments on your account and inserts a ready-wired code component onto your canvas. You never copy a key by hand: the plugin fills in the deployment ID and avatar ID for you, and every remaining setting is a control in Framer's Properties panel. ## What you need first A Framer embed runs on a **deployment** — a public, domain-locked credential with its own minute budget. Create one before you open the plugin. | Requirement | Where | | --- | --- | | An AvatarFactory account | Sign up at the Platform. | | A paid plan | Deployments are not available on the Sandbox (free) plan — the server refuses to mint one. | | At least one deployment | Platform → open an avatar → Deploy tab → Framer → New deployment. | > You do **not** need an API key for Framer. A deployment ID is a public > credential: it only works on the domains you authorize, and it can never spend > more than the minute budget you set on it. ## Create the deployment ### Step 1 — Open the avatar's Deploy tab In the [Platform](/platform), open the avatar you want to embed and switch to the **Deploy** tab, then pick **Framer**. An avatar you have not published yet deploys the shared `default` avatar instead, so you can wire the site up before the character is final. ### Step 2 — Set the authorized domains The deployment only answers requests from the domains on this list. Two Framer defaults are pre-filled, because Framer serves the editor canvas and published sites from different hosts: ```text *.framercanvas.com ← the Framer editor canvas *.framer.website ← Framer's default publish domain ``` **Add your own custom domain too** if the site is published to one. A missing domain is the usual reason an avatar works in the editor and not on the live site. ### Step 3 — Choose a mode and a monthly budget Pick the [mode](/docs/sdk/react/modes) the embed runs in (`call` for two-way voice) and a monthly ceiling in minutes. The budget resets each calendar month and is enforced on our servers, so an embed can never overrun it. ### Step 4 — Create it The deployment appears in the list with its ID (`dep_…`), a live usage bar, and controls to pause or revoke it. Pausing stops the embed without deleting it; revoking is permanent. ## Connect the plugin ### Step 1 — Open the plugin in Framer In your Framer project, open the **Plugins** menu and run **AvatarFactory**. ### Step 2 — Connect your account Click **Connect account**. The plugin opens an AvatarFactory sign-in page in your browser and waits while you log in. The sign-in window is valid for a few minutes; if it expires, click **Try again**. You are signing in to AvatarFactory, not to Framer — the plugin never sees your password, only a token scoped to reading your deployments. ### Step 3 — Browse your deployments Once connected, the plugin lists **every deployment on your account**, across all avatars, with its avatar preview, mode, and status. Use the search box to filter by deployment or avatar name. The **···** menu in the plugin window header holds **Refresh deployments** and **Log out**. ## Insert the avatar Two ways, both producing the same component: - **Drag** a deployment card onto the canvas. Framer decides where it lands from where you release the pointer — inside a frame, or on the canvas itself. This is the reliable way to place it somewhere specific. - **Click** the card to quick-insert it at Framer's default position. Either way the component arrives at 200 × 200 with **Deployment Key** and **Avatar ID** already filled in. Resize it like any other layer. > Inserting is a Framer edit like any other, so it needs edit permission on the > project. On a project you can only view, the plugin will tell you it has no > permission to insert. ## Configure it Everything else is a control in Framer's **Properties panel** with the component selected. The panel is organised the same way this reference is — see the [Component Properties](/docs/sdk/framer/properties) page for every control, its default, and what it does. The controls you will reach for first: | Control | Default | What it does | | --- | --- | --- | | Mode | call | call captures the microphone for two-way voice. The other modes are driven from code and do nothing on their own in Framer. | | Controls | Show | The built-in start / stop / mute bar. Turn it off only if you are building your own controls in code. | | Fit | contain | How the character fills the frame. "Contain" keeps the whole artboard visible; "Cover" crops it, which is what reads as zoomed in. | | Greeting | Off | An opening line the avatar speaks once the session goes live. | | Camera | Off | Opt-in vision. Off unless you deliberately enable it. | ## How it behaves in the editor The component knows which Framer surface it is rendering on and deliberately behaves differently in each, so the editor stays usable: | Surface | Behaviour | | --- | --- | | Canvas (editing) | The avatar renders and animates so you can size and style it, but the camera and the connect tone stay off, and entrance/hover animations are skipped so the rig never re-rasterises. | | Thumbnail / export | A static placeholder. No WebGL, Rive, or WebSocket runtime boots — these are rendered for every asset in the panel, so starting a session for them would be ruinous. | | Preview / published | The real thing: full session, camera if enabled, entrance and hover animations as configured. | > **The rig looks soft on the canvas.** Rive draws into its own buffer, which > ignores Framer's canvas zoom. Raise **Canvas quality** (editor-only > supersampling) if it bothers you — but the cost is the square of the value, so > `4` draws sixteen times the pixels. It has no effect on the published site. ## Troubleshooting | Symptom | Cause and fix | | --- | --- | | \"Add your Deployment Key in the Properties Panel\" | The component was added without a deployment — usually because it was copied from another project. Paste the ID from Platform → Deploy → Framer, or re-insert it from the plugin. | | Works in the editor, not on the published site | The published domain is not on the deployment's authorized-domain list. Add it in Platform → Deploy → Framer. | | \"Avatar failed to load\" | The deployment ID or avatar ID is wrong, or the deployment has been paused or revoked. The error code shown on the card tells you which. | | The avatar connects but stays silent | Browsers block audio that did not start from a real click. The visitor has to press start — do not try to auto-start the session on page load. | | The session ends on its own | The deployment's monthly minute budget is spent, or the plan limit was reached. Check the usage bar on the deployment card. | | The plugin asks you to log in again | The plugin session expired. Click Connect account again; nothing on your site is affected. | ## What the plugin can and cannot see | The plugin reads | The plugin never receives | | --- | --- | | Your deployments: ID, avatar ID, name, mode, status, creation date, plus the avatar's name and preview image. | Your password, your API keys (af_test_* / af_live_*), or any provider key you have saved for BYOK. | Logging out from the plugin revokes its session on our side as well as clearing it locally. > Building the site in code instead of Framer? The same deployment ID works with > the React SDK's `deployId` auth — see > [AvatarProvider → deployId](/docs/sdk/react/avatar-provider#deployid-public-no-backend).