UNITHdocs
Sign inarrow_forward
API

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.

info

If your digital human uses streaming mode, please refer to our SDK documentation instead.

To check whether your digital human is in legacy or streaming mode, see this page.

If the digital human configuration states that videoStreaming=true then your digital human is in streaming mode.

warning_amber

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.
code
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

code
<form id="userForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone" required>
  <button type="submit">Submit</button>
</form>

<div id="talking-head" style="display: none;">
  <!-- Embed Digital Human Configuration Here -->
</div>

JavaScript Logic

code
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

code
<div id="chatWidgetButton"></div>

<div id="chatbotOverlay" style="display: none;">
  <button id="closeChatbot">&times;</button>
  <div id="talking-head">
    <!-- Embed Digital Human Configuration Here -->
  </div>
</div>

CSS

code
/* 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

code
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

code
<button id="downloadChat" title="Download Chat">💾</button>

JavaScript

code
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

FeatureDescription
Skip "Let's Chat"Automatically start interaction without user clicking the "Let's Chat" button.
Embed Form Before ChatCollect user information before launching the Digital Human.
Floating Chat WidgetCreate a bottom-right Digital Human interface with a toggling open/close feature.
Download/Copy Chat TranscriptsSave chat history as a file or copy it to the clipboard.

Styling Customizations

  1. Button Background: Use a video, image, or color for the floating button.
  2. Positioning: Adjust the location of the widget, overlay, or buttons.
  3. Responsive Design: Use percentage-based dimensions (vh, vw) for adaptive layouts.
scheduleLast updated Feb 25, 2026
Customising the Legacy Embedded Digital Human · UNITH Docs