Embed Digital Humans in your Application

6min
﻿
UNITH Digital Humans are platform agnostic. The following guidelines enable Digital Humans to be seamlessly integrated into various digital applications, from mobile apps to web apps.
You will need:
Organisation name.
Digital Human head name.
(Optional) Localization and image repos - request more information from UNITH customer success team.
You should be able to access your organisation and digital human using GET /user/me. If you don't have access to the Digital Human platform please refer to User﻿﻿
Code Snippet
Include the following code snippet in your website or application. These are the basic elements required to place digital humans in your page, but some additional code could be needed.
HTML
<!-- JavasScript bundle -->
<script defer src="https://embedded.unith.ai/dist/bundle.js"></script>

<!-- CSS bundle -->
<link rel="stylesheet" href="https://embedded.unith.ai/dist/bundle.css" />

<!-- Fonts -->
<link rel="stylesheet"
href="https://gpt-head-assets.unith.ai/fonts/stylesheet.css"
media="print"
onload="this.media='all'"
/>

<!-- Microsoft speech recognition bundle -->
<script src="https://embedded.unith.ai/microsoft-speech-recognition.js"></script>

<!-- Body containing element with id="talking-head" -->
<body>
  <div
      id="talking-head"
      data-api_base="https://chat-origin.api.unith.live"
      data-api_key="<your-api-key>"
      data-embed="true"
      data-org_id="<your-org-id>"
      data-head_id="<your-head-id>"
      data-theme="demo"
      data-vm_version="1"
      data-time_pressure="false"
      data-subs_enabled="true"
      data-mic_enabled="true"
      data-seamless_transitions="false"      
      data-widget_mode="false"
  ></div>
</body>
<!-- JavasScript bundle -->
<script defer src="https://embedded.unith.ai/dist/bundle.js"></script>

<!-- CSS bundle -->
<link rel="stylesheet" href="https://embedded.unith.ai/dist/bundle.css" />

<!-- Fonts -->
<link rel="stylesheet"
href="https://gpt-head-assets.unith.ai/fonts/stylesheet.css"
media="print"
onload="this.media='all'"
/>

<!-- Microsoft speech recognition bundle -->
<script src="https://embedded.unith.ai/microsoft-speech-recognition.js"></script>

<!-- Body containing element with id="talking-head" -->
<body>
  <div
      id="talking-head"
      data-api_base="https://chat-origin.api.unith.live"
      data-api_key="<your-api-key>"
      data-embed="true"
      data-org_id="<your-org-id>"
      data-head_id="<your-head-id>"
      data-theme="demo"
      data-vm_version="1"
      data-time_pressure="false"
      data-subs_enabled="true"
      data-mic_enabled="true"
      data-seamless_transitions="false"      
      data-widget_mode="false"
  ></div>
</body>
﻿
Configure your Digital Human
The following configuration options are available to provide added controls and customisation options. These can be added inside the talking-head element.
data-api_base: the server you will connect to.
data-api_key: your api key (required)
data-embed: if set to something other "1" or "true", you will be able to access the full UI (default is true)
data-org_id: your organisation's friendly name, as shown in the PublicURL (required)
data-head_id: the head name of your Digital Human (required)
data-theme: currently the only supported value is "demo". We will support a variety of themes in the future.
data-vm_version: currently the only supported value is "1". This parameter controls the event handling.
data-time_pressure: The "Time Pressure" feature limits user response time to 60 seconds, after which a random suggestion is automatically selected. 
data-mic_enabled: If set to something other than "1" or "true", the UI will not use speech recognition. No mic permissions will be needed from the user (default is true)
data-subs_enabled: If set to something other than "1" or "true", the UI will not display subtitles. (default is true)
data-language(optional): overrides the language configuration in your Digital Human for UI elements (default is en-US). If you need a language we do not support, contact us.
data-widget_mode: Setting this parameter totrue enables widget mode, embedding the Digital Human as a circular icon in the bottom right corner of the web application.  The default value is false. Please refer to the full documentation on widget mode here. ﻿
data-seamless_transitions: Enabling the "Seamless Transitions" parameter eliminates noticeable jumps between the Digital Human's idle and response states.
Please to this documentation for further details.﻿
id="talking-head-id" is not optional and the digital human won't work if removed.
Styling
Leverage CSS as needed to customize embedded element. The below acts as a guideline:
Text
body {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: auto;
    }
    p {
      text-align: center;
    }
    body > p {
      padding: 0 30%;
    }
    #talking-head {
      width: 900px;
      height: 600px;
      resize: both;
      overflow: auto;
      box-shadow: 2px 2px 14px -2px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background-color: antiquewhite;
    }
body {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: auto;
    }
    p {
      text-align: center;
    }
    body > p {
      padding: 0 30%;
    }
    #talking-head {
      width: 900px;
      height: 600px;
      resize: both;
      overflow: auto;
      box-shadow: 2px 2px 14px -2px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background-color: antiquewhite;
    }
﻿
﻿
Below you can find the current sitemap structure of our assets.
﻿
JSON
├── assets
│   ├── avatar_character.png
│   ├── avatar_user.png
│   ├── beep_up.wav
│   ├── favicon-192x192.png
│   ├── favicon.ico
│   ├── head-bg-large.png
│   ├── head-bg-small.png
│   ├── maya-large.png
│   ├── maya.png
│   └── noise-small.png
├── dist
│   ├── bundle.css
│   └── bundle.js
├── lang
│   ├── ar-AE.json
│   ├── bg-BG.json
│   ├── bs-BA.json
│   ├── cs-CZ.json
│   ├── de-DE.json
│   ├── en-US.json
│   ├── es-ES.json
│   ├── fr-FR.json
│   ├── hu-HU.json
│   ├── id-ID.json
│   ├── it-IT.json
│   ├── ka-GE.json
│   ├── kk-KZ.json
│   ├── lt-LT.json
│   ├── lv-LV.json
│   ├── nl-NL.json
│   ├── pl-PL.json
│   ├── pt-PT.json
│   ├── ro-RO.json
│   ├── ru-RU.json
│   ├── sk-SK.json
│   ├── sr-RS.json
│   ├── th-TH.json
│   └── uk-UA.json
├── README.md
├── manifest.json
├── microsoft-speech-recognition.js
└── themes
    └── demo.json
├── assets
│   ├── avatar_character.png
│   ├── avatar_user.png
│   ├── beep_up.wav
│   ├── favicon-192x192.png
│   ├── favicon.ico
│   ├── head-bg-large.png
│   ├── head-bg-small.png
│   ├── maya-large.png
│   ├── maya.png
│   └── noise-small.png
├── dist
│   ├── bundle.css
│   └── bundle.js
├── lang
│   ├── ar-AE.json
│   ├── bg-BG.json
│   ├── bs-BA.json
│   ├── cs-CZ.json
│   ├── de-DE.json
│   ├── en-US.json
│   ├── es-ES.json
│   ├── fr-FR.json
│   ├── hu-HU.json
│   ├── id-ID.json
│   ├── it-IT.json
│   ├── ka-GE.json
│   ├── kk-KZ.json
│   ├── lt-LT.json
│   ├── lv-LV.json
│   ├── nl-NL.json
│   ├── pl-PL.json
│   ├── pt-PT.json
│   ├── ro-RO.json
│   ├── ru-RU.json
│   ├── sk-SK.json
│   ├── sr-RS.json
│   ├── th-TH.json
│   └── uk-UA.json
├── README.md
├── manifest.json
├── microsoft-speech-recognition.js
└── themes
    └── demo.json
﻿
﻿
Embedding Digital Humans in Your apps
Widget Mode