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.
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.
In the 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.
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:
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.
Pick the mode 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.
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.
In your Framer project, open the Plugins menu and run AvatarFactory.
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.
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.
Two ways, both producing the same component:
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.
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 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. |
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.
| 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. |
| 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.