Live Video-Only Embedding

this section guides you on how to use embed just the live video component of the digital human experience you'll learn to send events from your page directly into the video only iframe, concealing all other frontend elements the video only mode allows customers running unith’s digital heads in an iframe to have a bi directional communication with their digital humans this means customers can now send events to the digital humans from their web applications and also listen for events from said heads this is made possible by our secure implementation of the window\ postmessage() https //developer mozilla org/en us/docs/web/api/window/postmessage method which safely allows cross origin communication between a page and an iframe embedded in it to see it in action, check out this example here link prerequisites you must have the admin role to access the following endpoints there are two necessary prerequisites to running video only mode add the url where the iframe will run inside the allowed iframe origins section in your unith interface dashboard settings (coming soon) to add your allowed origins, use the put method on these endpoints /head/{id}/allowed origins https //platform api unith ai/api/#/head/headcontroller setallowedoriginsbyid and /head/{id}/iframe/allowed origins https //platform api unith ai/api/#/head/headcontroller setallowediframeoriginsbyid append the query param " \&mode=video " to your iframe source a correct implementation should look like this how it works communication between your app and the iframe is done by passing our custom event names to the " postmessage " method the table below outlines the events we support and respective parameters event name event payload description dh ready { isready boolean } originator unith’s iframe this event is sent to your app when the digital human has fully loaded and is ready to process messages dh message { message\ string } originator your app send this event and payload to prompt the digital human (dh) to process your input dh processing { processing boolean } originator unith’s iframe this event is sent to your app when the digital head is processing a your input examples registering your event listeners window\ addeventlistener("message", function (event) { // only allow events from unith's iframe if (event origin !== "https //chat unith ai") return; const payload = event data payload; switch (event data type) { case "dh ready" if (payload && payload isready) { // digital human is ready } break; case "dh processing" if (payload && payload processing){ // digital human is processing input } break; default break; } }); sending a message to the digital human iframe contentwindow\ postmessage( { type "dh message", payload { message 'test message' } }, "https //chat unith ai" // only send events to unith's iframe ); for a fully functioning example, please check out any of our sample applications on github vanilla js https //github com/unith ai/vanilla video only react js https //github com/unith ai/react video only