Create an AvaturnHead with a session token minted on your backend (POST /api/v1/sessions).
import { AvaturnHead } from "@avaturn-live/web-sdk";const root = document.querySelector<HTMLDivElement>("#avaturn-video")!;const avatar = new AvaturnHead(root, { sessionToken: "<token from backend>", audioSource: true, // request mic for voice-to-voice engines});await avatar.init();
Make sure the DOM node exists before construction. In React/Vue use a ref and construct inside an effect; in Angular use @ViewChild and construct in ngAfterViewInit.
dispose() tears down local SDK state. The backend session terminates via user_absent_timeout after disconnection — to end it immediately call DELETE /api/v1/sessions/{id}.
The SDK talks to Avaturn through a private endpoint prefix ${apiHost}/_sdk/v0 (default host https://api.avaturn.live) authenticated with an X-Session-Token header. The session-room handshake is delegated to Daily.co over WebRTC.For self-hosted deployments override apiHost (Properties) and make sure both ${host}/api/v1 (public REST) and ${host}/_sdk/v0 (SDK-only) resolve.
If you push text from a backend instead of running a conversation engine, see Legacy text-echo.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Avaturn.Live","colors":{"primary":"#000000","light":"#FFFFFF","dark":"#000000"},"logo":{"light":"https://mintcdn.com/avaturn-1492efa9/dllyramte2Auj8Ns/logo/light.svg?fit=max\u0026auto=format\u0026n=dllyramte2Auj8Ns\u0026q=85\u0026s=a9bbc776013d1747117044b4e175b621","dark":"https://mintcdn.com/avaturn-1492efa9/dllyramte2Auj8Ns/logo/dark.svg?fit=max\u0026auto=format\u0026n=dllyramte2Auj8Ns\u0026q=85\u0026s=291e7ba277d0172a89799a4ac7687723"},"favicon":"https://mintcdn.com/avaturn-1492efa9/dllyramte2Auj8Ns/favicon.svg?fit=max\u0026auto=format\u0026n=dllyramte2Auj8Ns\u0026q=85\u0026s=a573ab7fd5196fd351da26230737f585","navbar":{"links":[{"href":"mailto:support@avaturn.me","label":"Support"}],"primary":{"type":"button","label":"Dashboard","href":"https://avaturn.live/dashboard"}},"styling":{"latex":false},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"avaturn-1492efa9","hasAudioNarration":false,"actualSubdomain":"avaturn-1492efa9","customDomains":["docs.avaturn.live"],"gitSource":{"type":"github","owner":"avaturn","repo":"live-docs","deployBranch":"main","contentDirectory":"","isPrivate":false,"mountPath":"","label":""},"entitlements":{},"buildId":"6ae921ad4f9c5e0fb2cf46e8:success","clientVersion":"0.0.4094","searchFilterCounts":[{"language":"default","tag":"Documentation","count":14},{"language":"default","tag":"API Reference","count":7},{"language":"default","tag":"Web SDK","count":4},{"language":"default","tag":"Conversation Engines","count":3},{"language":"default","tag":"Legacy","count":3},{"language":"default","tag":"SDK Reference","count":3},{"language":"default","tag":"Get Started","count":2},{"language":"default","tag":"REST API","count":2},{"language":"default","tag":"API Documentation","count":1}]},"assistantConfig":{},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"rbac-expansion","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-metadata","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-serve","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"live-agents","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"comment-mode","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"web-sdk/integration-guide","slug":"/web-sdk/integration-guide","pageMetadata":{"title":"Web SDK Integration Guide","description":"Mount the avatar in your frontend and wire up events.","icon":"instalod","href":"/web-sdk/integration-guide"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Mount the avatar in your frontend and wire up events.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,code:`code`,p:`p`,pre:`pre`,span:`span`,..._provideComponents(),...props.components},{CodeBlock,Heading,Tip}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Tip)_missingMdxReference(`Tip`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`The Web SDK renders an Avaturn avatar into a DOM element and bridges audio between the user’s microphone and the active `,_jsx(_components.a,{href:`/howtos/openai_realtime_api`,children:`conversation engine`}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`1-install`,children:`1. Install`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`1`,language:`shellscript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`shellscript`,children:_jsxs(_components.code,{language:`shellscript`,numberOfLines:`1`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#DCDCAA`},children:`npm`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` install`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` @avaturn-live/web-sdk`})]}),`\n`]})})}),`\n`,_jsx(Heading,{level:`2`,id:`2-initialize`,children:`2. Initialize`}),`\n`,_jsxs(_components.p,{children:[`Create an `,_jsx(_components.code,{children:`AvaturnHead`}),` with a session token minted on your backend (`,_jsx(_components.a,{href:`/api-reference/create-session`,children:_jsx(_components.code,{children:`POST /api/v1/sessions`})}),`).`]}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`9`,language:`typescript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`typescript`,children:_jsxs(_components.code,{language:`typescript`,numberOfLines:`9`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`import`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` { `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`AvaturnHead`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` } `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`from`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"@avaturn-live/web-sdk\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` root`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` document`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`querySelector`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`\u003c`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#4EC9B0`},children:`HTMLDivElement`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`>(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"#avaturn-video\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`)`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`!`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` avatar`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` new`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` AvaturnHead`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`root`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` sessionToken:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"\u003ctoken from backend>\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` audioSource:`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#569CD6`},children:` true`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// request mic for voice-to-voice engines`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`});`})}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`await`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` avatar`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`init`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`();`})]}),`\n`]})})}),`\n`,_jsx(Tip,{children:_jsxs(_components.p,{children:[`Make sure the DOM node exists before construction. In React/Vue use a `,_jsx(_components.code,{children:`ref`}),` and construct inside an effect; in Angular use `,_jsx(_components.code,{children:`@ViewChild`}),` and construct in `,_jsx(_components.code,{children:`ngAfterViewInit`}),`.`]})}),`\n`,_jsxs(_components.p,{children:[`All constructor options: `,_jsx(_components.a,{href:`/web-sdk/reference/properties`,children:`Properties`}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`3-subscribe-to-events`,children:`3. Subscribe to events`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`7`,language:`typescript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`typescript`,children:_jsxs(_components.code,{language:`typescript`,numberOfLines:`7`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`avatar`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`on`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"avatar_started_speaking\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, () `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`=>`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // e.g. show \"speaking\" indicator`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`});`})}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`avatar`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`on`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"avatar_ended_speaking\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, () `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`=>`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // e.g. hide indicator`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`});`})}),`\n`]})})}),`\n`,_jsxs(_components.p,{children:[`Full list: `,_jsx(_components.a,{href:`/web-sdk/reference/events`,children:`Events`}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`4-dispose`,children:`4. Dispose`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`1`,language:`typescript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`typescript`,children:_jsxs(_components.code,{language:`typescript`,numberOfLines:`1`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`await`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` avatar`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`dispose`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`();`})]}),`\n`]})})}),`\n`,_jsxs(_components.p,{children:[_jsx(_components.code,{children:`dispose()`}),` tears down local SDK state. The backend session terminates via `,_jsx(_components.code,{children:`user_absent_timeout`}),` after disconnection — to end it immediately call `,_jsx(_components.a,{href:`/api-reference/terminate-session`,children:_jsx(_components.code,{children:`DELETE /api/v1/sessions/{id}`})}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`under-the-hood`,children:`Under the hood`}),`\n`,_jsxs(_components.p,{children:[`The SDK talks to Avaturn through a private endpoint prefix `,_jsx(_components.code,{children:\"${apiHost}/_sdk/v0\"}),` (default host `,_jsx(_components.code,{children:`https://api.avaturn.live`}),`) authenticated with an `,_jsx(_components.code,{children:`X-Session-Token`}),` header. The session-room handshake is delegated to `,_jsx(_components.a,{href:`https://daily.co/`,children:`Daily.co`}),` over WebRTC.`]}),`\n`,_jsxs(_components.p,{children:[`For self-hosted deployments override `,_jsx(_components.code,{children:`apiHost`}),` (`,_jsx(_components.a,{href:`/web-sdk/reference/properties#apihost`,children:`Properties`}),`) and make sure both `,_jsx(_components.code,{children:\"${host}/api/v1\"}),` (public REST) and `,_jsx(_components.code,{children:\"${host}/_sdk/v0\"}),` (SDK-only) resolve.`]}),`\n`,_jsx(Heading,{level:`2`,id:`driving-speech-manually-legacy`,children:`Driving speech manually (legacy)`}),`\n`,_jsxs(_components.p,{children:[`If you push text from a backend instead of running a conversation engine, see `,_jsx(_components.a,{href:`/legacy/text-echo`,children:`Legacy text-echo`}),`.`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Web SDK Integration Guide","description":"Mount the avatar in your frontend and wire up events.","icon":"instalod","href":"/web-sdk/integration-guide"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"1. Install","slug":"1-install","depth":2,"children":[]},{"title":"2. Initialize","slug":"2-initialize","depth":2,"children":[]},{"title":"3. Subscribe to events","slug":"3-subscribe-to-events","depth":2,"children":[]},{"title":"4. Dispose","slug":"4-dispose","depth":2,"children":[]},{"title":"Under the hood","slug":"under-the-hood","depth":2,"children":[]},{"title":"Driving speech manually (legacy)","slug":"driving-speech-manually-legacy","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"avaturn-1492efa9","siteName":"Avaturn.Live","title":"Web SDK Integration Guide - Avaturn.Live","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-05-20T05:31:32.173Z","originalFileLocation":"web-sdk/integration-guide.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Mount the avatar in your frontend and wire up events.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Avaturn.Live\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/avaturn-1492efa9/FcHXCbxsBdoQ8sQ6/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/avaturn-1492efa9/FcHXCbxsBdoQ8sQ6/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/avaturn-1492efa9/FcHXCbxsBdoQ8sQ6/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/avaturn-1492efa9/FcHXCbxsBdoQ8sQ6/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/avaturn-1492efa9/FcHXCbxsBdoQ8sQ6/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/avaturn-1492efa9/FcHXCbxsBdoQ8sQ6/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/avaturn-1492efa9/FcHXCbxsBdoQ8sQ6/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/avaturn-1492efa9/FcHXCbxsBdoQ8sQ6/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/avaturn-1492efa9/FcHXCbxsBdoQ8sQ6/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Web SDK Integration Guide - Avaturn.Live\">\u003cmeta data-mint-head property=\"og:description\" content=\"Mount the avatar in your frontend and wire up events.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Avaturn.Live\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.avaturn.live/web-sdk/integration-guide\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://avaturn-1492efa9.mintlify.site/_mintlify/api/og/v2?division=Web+SDK\u0026amp;title=Web+SDK+Integration+Guide\u0026amp;description=Mount+the+avatar+in+your+frontend+and+wire+up+events.\u0026amp;theme=ea7c6e14d76874fce2215a5e\u0026amp;signature=7cb90fac109ee7f46b4cb6caab9fb2a8d82fec0a255d2f95e33ab25ae448738e\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Web SDK Integration Guide - Avaturn.Live\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Mount the avatar in your frontend and wire up events.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://avaturn-1492efa9.mintlify.site/_mintlify/api/og/v2?division=Web+SDK\u0026amp;title=Web+SDK+Integration+Guide\u0026amp;description=Mount+the+avatar+in+your+frontend+and+wire+up+events.\u0026amp;theme=ea7c6e14d76874fce2215a5e\u0026amp;signature=7cb90fac109ee7f46b4cb6caab9fb2a8d82fec0a255d2f95e33ab25ae448738e\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/avaturn-1492efa9/FcHXCbxsBdoQ8sQ6/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Avaturn.Live\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#000000\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.avaturn.live/web-sdk/integration-guide\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/web-sdk/integration-guide.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.avaturn.live/#organization\",\"name\":\"Avaturn.Live\",\"url\":\"https://docs.avaturn.live\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/avaturn-1492efa9/dllyramte2Auj8Ns/logo/light.svg?fit=max\u0026auto=format\u0026n=dllyramte2Auj8Ns\u0026q=85\u0026s=a9bbc776013d1747117044b4e175b621\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.avaturn.live#website\",\"name\":\"Avaturn.Live\",\"url\":\"https://docs.avaturn.live\",\"publisher\":{\"@id\":\"https://docs.avaturn.live/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.avaturn.live/web-sdk/integration-guide#webpage\",\"url\":\"https://docs.avaturn.live/web-sdk/integration-guide\",\"name\":\"Web SDK Integration Guide\",\"description\":\"Mount the avatar in your frontend and wire up events.\",\"dateModified\":\"2026-05-20T05:31:32.173Z\",\"isPartOf\":{\"@id\":\"https://docs.avaturn.live#website\"},\"breadcrumb\":{\"@id\":\"https://docs.avaturn.live/web-sdk/integration-guide#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.avaturn.live/web-sdk/integration-guide#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Avaturn.Live\",\"item\":\"https://docs.avaturn.live\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web SDK Integration Guide\",\"item\":\"https://docs.avaturn.live/web-sdk/integration-guide\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.avaturn.live/web-sdk/integration-guide#article\",\"headline\":\"Web SDK Integration Guide\",\"name\":\"Web SDK Integration Guide\",\"description\":\"Mount the avatar in your frontend and wire up events.\",\"url\":\"https://docs.avaturn.live/web-sdk/integration-guide\",\"mainEntityOfPage\":{\"@id\":\"https://docs.avaturn.live/web-sdk/integration-guide#webpage\"},\"dateModified\":\"2026-05-20T05:31:32.173Z\",\"publisher\":{\"@id\":\"https://docs.avaturn.live/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.avaturn.live#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Avaturn.Live\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Avaturn.Live","nav":{"global":null,"tabs":[{"tab":"Documentation","groups":[{"group":"Get Started","pages":[{"title":"Introduction","href":"/introduction"},{"title":"Quickstart","icon":"bolt","href":"/quickstart"}]},{"group":"Conversation Engines","pages":[{"title":"OpenAI Realtime engine","href":"/howtos/openai_realtime_api"},{"title":"Cartesia conversation engine","href":"/howtos/cartesia"},{"title":"External conversation engine","description":"Drive an Avaturn avatar from your own WebSocket service — bring your own stack.","href":"/howtos/external"}]},{"group":"Web SDK","pages":[{"title":"Web SDK Integration Guide","icon":"instalod","href":"/web-sdk/integration-guide"},{"group":"SDK Reference","icon":"asterisk","pages":[{"title":"Properties","description":"Constructor signature and configuration options for AvaturnHead.","icon":"file-code","href":"/web-sdk/reference/properties"},{"title":"Methods","icon":"lambda","href":"/web-sdk/reference/methods"},{"title":"Events","icon":"atom","href":"/web-sdk/reference/events"}]}]},{"group":"REST API","pages":[{"title":"REST Integration Guide","icon":"instalod","href":"/rest/integration-guide"},{"title":"Example","icon":"code","href":"/rest/example"}]},{"group":"Legacy","icon":"box-archive","pages":[{"title":"Text echo (legacy)","icon":"message","href":"/legacy/text-echo"},{"title":"Streaming LLM output (legacy)","icon":"shuffle","href":"/legacy/llm-streaming"},{"title":"React demo (legacy)","icon":"react","href":"/legacy/react-example"}]}]},{"tab":"API Reference","pages":[{"title":"API Reference","href":"/api-reference/introduction"}]}]},"basePath":"","title":"Web SDK Integration Guide - Avaturn.Live","buildId":"dpl_42LwxxU1kGN114H4XzwGYXa9ZDah","deploymentId":"dpl_42LwxxU1kGN114H4XzwGYXa9ZDah","dynamics":[],"chunks":[]}
