Embedding Streaming Digital Humans (alpha version)

the documentation listed here is subject to change 🧠 how to embed and control the unith widget this guide explains how to embed the unith digital human (stream) widget into any website or web app — and how to send messages to it programmatically from external scripts you can embed the unith stream url as an iframe this documentation is to give users more control 1️⃣ basic embed setup the unith widget is distributed as a custom web component ( \<unith widget> ) that you can use in any html , react , or next js project example (plain html) unith widget example 2️⃣ styling the widget the \<unith widget> element uses a shadow dom , so normal css cannot reach inside you can style around it using a wrapper container unith container { width 400px; height 500px; border radius 16px; overflow hidden; box shadow 0 4px 20px rgba(0, 0, 0, 0 15); background #fff; } 💡 if you’re using the floating “chat bubble” version, use 3️⃣ sending external messages to the chat sometimes you may want to programmatically send a message into the chat (e g when a user performs an action elsewhere in your app) the unith widget doesn’t expose a public js api yet, but since it uses an open shadow dom, you can access its input field and simulate a send full example unith chat message test send message to unith widget send "hello samantha" ✅ how it works waits for the widget to load accesses its shadow dom input sets the message text dispatches an input + enter sequence to mimic user typing falls back to clicking a visible send button if found 4️⃣ two way event communication (optional) you can also listen for events or messages coming from the widget const widget = document getelementbyid('unith'); widget addeventlistener('message', (e) => { console log('widget event ', e detail); }); // example of sending a custom event to the widget widget dispatchevent(new customevent('externalcommand', { detail { command 'sayhello', payload { text 'hi there!' } } })); or if the widget runs inside an iframe internally, you can communicate via window\ postmessage window\ addeventlistener('message', (event) => { console log('received postmessage from unith ', event data); }); 5️⃣ troubleshooting issue likely cause fix input not found widget not fully loaded yet wait longer before accessing shadowroot text appears but doesn’t send framework ignores synthetic key events use inputevent + click the send button no access to shadowroot widget uses mode "closed" use official unith api when available style changes don’t apply css isolation wrap widget in a container and style that 6️⃣ recommended best practice for production use wrap all widget control logic in a ready or loaded event listener keep all direct dom manipulation in a utility like sendmessagetowidget(text) avoid tight loops; give the widget a small delay to initialize prefer official apis once released example structure summary \<script src="https //embedded stream unith ai/index js" defer>\</script> \<div class="unith container"> \<unith widget head id=" " org id=" " api key=" ">\</unith widget> \</div> \<script> // your custom integration logic here \</script>