Customising the Embedded Digital Human

18min
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.
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.
JS
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
});

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
HTML
<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>

<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
JS
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();
});

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
HTML
<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>
<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
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;
}
/* 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
JS
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
  });
});
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
HTML
<button id="downloadChat" title="Download Chat">💾</button>
<button id="downloadChat" title="Download Chat">💾</button>
﻿
JavaScript
JS
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();
  });
});
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.
This documentation covers all discussed use cases and customization options for creating an engaging Digital Human experience. Let me know if you’d like further refinements! 😊
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.
Updated 19 Dec 2024
Did this page help you?
Embed Digital Humans in your Application
Live Video-Only Embedding