---
title: Customising the Legacy Embedded Digital Human
slug: customising-the-legacy-embedded-digital-human
docTags: 
createdAt: 2024-12-02T13:52:04.440Z
---

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.

:::hint{type="info"}
If your digital human uses **streaming mode**, [please refer to our SDK documentation instead.](https://docs.unith.ai/unith-embed-integration-guide)

To check whether your digital human is in legacy or streaming mode, [see this page.](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.
:::

:::hint{type="warning"}
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.

```javascript
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>

```

### JavaScript Logic

```javascript
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>
```

### 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;
}
```

### JavaScript Logic

```javascript
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>
```

### JavaScript

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

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.