Programmatic Init

For single-page apps or any page that loads the embed dynamically rather than through a static <script> tag, initialize the embed from JavaScript with window.DID_AGENTIC_VIDEO_INIT.

When to Use

Use programmatic init when:

You're in a single-page app and the mount element appears after page load.
You want to pass a DOM node directly instead of an element ID.
You need to load the embed conditionally, based on user actions or routing.

For a static page, use HTML data attributes on the script tag instead. See Data Attributes.

Load and Initialize

Append the script, then call window.DID_AGENTIC_VIDEO_INIT once it loads:

const script = document.createElement("script");
script.type = "module";
script.src = "https://agentic-videos.d-id.com/v1/index.js";
script.onload = () => {
  window.DID_AGENTIC_VIDEO_INIT({
    clientKey: "{client_key}",
    agenticVideoId: "{agentic_video_id}",
    target: "my-mount", // element ID string or an HTMLElement
  });
};
document.head.appendChild(script);

The same function is also exposed as a named ES module export:

const { init } = await import("https://agentic-videos.d-id.com/v1/index.js");
init({
  clientKey: "{client_key}",
  agenticVideoId: "{agentic_video_id}",
  target: document.getElementById("my-mount"),
});

Options

DID_AGENTIC_VIDEO_INIT accepts the same values as the data-* attributes. Keys are camelCase (kebab-case is also accepted).

OPTION	TYPE	DESCRIPTION	REQUIRED
agenticVideoId	string	The agentic-video resource ID (e.g. `agv_…`).	Yes
target	string \| HTMLElement	Mount element ID or a direct `HTMLElement`.	Yes
clientKey	string	Client key from Create Client Key API.	Yes
autoPlay	boolean	Start the video automatically on load, muted. Defaults to `false`.	No
track	boolean	`false` disables Mixpanel telemetry. Defaults to `true`.	No
externalId	string	Your user/session identifier.	No
mixpanelKey	string	Override the Mixpanel project token.	No
mixpanelProperties	object	Custom properties added to every Mixpanel event.	No

The target field accepts either a string element ID or an HTMLElement directly. The static-tag form is data-target-id (string only, because HTML attributes can't carry DOM nodes).

Examples

Pass a DOM node directly

window.DID_AGENTIC_VIDEO_INIT({
  clientKey: "{client_key}",
  agenticVideoId: "{agentic_video_id}",
  target: document.querySelector("#agentic-video-container"),
  autoPlay: true,
});

Route-based mount in a SPA

async function mountAgenticVideo(el) {
  const { init } = await import("https://agentic-videos.d-id.com/v1/index.js");
  init({
    clientKey: "{client_key}",
    agenticVideoId: "{agentic_video_id}",
    target: el,
    externalId: currentUser.id,
    mixpanelProperties: { plan: currentUser.plan },
  });
}

// Call when your video route renders its container
mountAgenticVideo(document.getElementById("video-route-mount"));