Customising the Legacy Embedded Digital Human

this document highlights various features, use cases, and customization options for embedding and customizing a digital human in your website the key points are consolidated from all discussions and examples provided if your digital human uses streaming mode , https //docs unith ai/unith embed integration guide to check whether your digital human is in legacy or streaming mode, https //docs unith ai/update a digital human#retrieving current configuration of your existing if the digital human configuration states that videostreaming=true then your digital human is in streaming mode to benefit from these types of customisation, users must be natively embeddeding their digital humans, and not using an iframe to embed the digital human skipping the "let's chat" button by default, the digital human interface displays a "let's chat" button that users must click to begin interacting to skip this step and directly launch the digital human implementation simulate a click on the "let's chat" button (#touch to start) as soon as it becomes available document addeventlistener("domcontentloaded", function () { const autoclickletschat = () => { const chatbutton = document queryselector("#touch to start"); if (chatbutton) { chatbutton click(); // automatically click the button console log("'let's chat' button clicked automatically "); } else { console log("'let's chat' button not found retrying "); settimeout(autoclickletschat, 500); // retry every 500ms } }; autoclickletschat(); // start the auto click process }); use case seamlessly start the conversation without requiring user interaction to click the "let's chat" button embedding a form to start the chat you can display a form (e g , name, email, phone) that users fill out before interacting with the digital human once the form is submitted, the digital human is displayed html example name email phone submit javascript logic document getelementbyid("userform") addeventlistener("submit", function (event) { event preventdefault(); // prevent default form submission // collect user data const name = document getelementbyid("name") value; const email = document getelementbyid("email") value; const phone = document getelementbyid("phone") value; console log("user data ", { name, email, phone }); // hide the form and display the dh this style display = "none"; const talkinghead = document getelementbyid("talking head"); talkinghead style display = "block"; // auto click the "let's chat" button const autoclickletschat = () => { const chatbutton = document queryselector("#touch to start"); if (chatbutton) { chatbutton click(); } else { settimeout(autoclickletschat, 500); // retry until available } }; autoclickletschat(); }); use case gather user information before launching the digital human useful for generating leads or personalizing conversations floating digital human on the bottom right a floating digital human widget is a common feature for modern websites it appears as a small button on the bottom right corner and opens a larger chat interface when clicked html example × css / floating button / \#chatwidgetbutton { position fixed; bottom 20px; right 20px; width 60px; height 60px; border radius 50%; background url('your image or video url') no repeat center center; background size cover; cursor pointer; z index 1000; } / chatbot overlay / \#chatbotoverlay { position fixed; bottom 0; right 0; width 100%; max width 400px; / portrait mode width / height 70vh; / 70% of screen height / max height 600px; background white; box shadow 0px 0px 15px rgba(0, 0, 0, 0 2); border radius 10px 10px 0 0; display none; / hidden by default / z index 999; } javascript logic document addeventlistener("domcontentloaded", function () { const chatwidgetbutton = document getelementbyid("chatwidgetbutton"); const chatbotoverlay = document getelementbyid("chatbotoverlay"); const closechatbot = document getelementbyid("closechatbot"); // open chatbot overlay chatwidgetbutton addeventlistener("click", () => { chatwidgetbutton style display = "none"; // hide the floating button chatbotoverlay style display = "block"; // show chatbot overlay }); // close chatbot overlay closechatbot addeventlistener("click", () => { chatbotoverlay style display = "none"; // hide the chatbot overlay chatwidgetbutton style display = "block"; // show the floating button }); }); use case provide users with a familiar chatbot interface that doesn't obstruct the page until it's opened download or copy chat transcripts add a button to let users download or copy the chat transcript html example 💾 javascript document addeventlistener("domcontentloaded", function () { const downloadchatbutton = document getelementbyid("downloadchat"); // function to collect chat messages const collectchatmessages = () => { const messages = \[]; const messageelements = document queryselectorall(" msg"); messageelements foreach((messageelement) => { const sender = messageelement classlist contains("usr") ? "you" "d"; const textelement = messageelement queryselector(" msg text span"); const timestampelement = messageelement queryselector(" timestamp"); if (textelement && timestampelement) { const text = textelement textcontent trim(); const timestamp = timestampelement textcontent trim(); messages push(`\[${timestamp}] ${sender} ${text}`); } }); return messages join("\n\n"); }; // download the chat transcript downloadchatbutton addeventlistener("click", () => { const chatcontent = collectchatmessages(); const blob = new blob(\[chatcontent], { type "text/plain" }); const a = document createelement("a"); a href = url createobjecturl(blob); a download = "chat txt"; a click(); }); }); use case allow users to save or share their chat history for reference customisations summary core features feature description skip "let's chat" automatically start interaction without user clicking the "let's chat" button embed form before chat collect user information before launching the digital human floating chat widget create a bottom right digital human interface with a toggling open/close feature download/copy chat transcripts save chat history as a file or copy it to the clipboard styling customizations button background use a video, image, or color for the floating button positioning adjust the location of the widget, overlay, or buttons responsive design use percentage based dimensions (vh, vw) for adaptive layouts