Hosted Experience
Multiple Digital Humans
5min
You can run multiple digital humans in one browser tab.
Displaying multiple digital humans works best in contained layout mode. You will need to specify two different id's in the html and pass into their respective options under containedElementIdName. Use desired css to make sure digital humans don't overlay one another.
HTML
1<div class="first_container">
2 <div id="firstDigitalHumanLayout"></div>
3</div>
4
5<div class="second_container">
6 <div id="secondDigitalHumanLayout"></div>
7</div>
Create two instances of the uneeq class with the options your require.
JS
1let firstDigitalHumanOptions = {
2 connectionUrl: "https://api.uneeq.io",
3 personaId: "149f1f29-553e-46e5-a6cc-11dd58da854e",
4 layoutMode: "contained",
5 autoStart: true,
6 containedElementIdName: "firstDigitalHumanLayout"
7};
8
9const firstDigitalHuman = new Uneeq(firstDigitalHumanOptions);
10
11let secondDigitalHumanOptions = {
12 connectionUrl: "https://api.uneeq.io",
13 personaId: "aa47905f-501a-4050-af68-d27b10a08b4a",
14 layoutMode: "contained",
15 autoStart: true,
16 containedElementIdName: "secondDigitalHumanLayout"
17};
18
19const secondDigitalHuman = new Uneeq(secondDigitalHumanOptions);
When getting Uneeq messages with mulitple digital humans you will need to filter by frameId in order to not have one digital human handle messages for the other.
JS
1// Event listener to handle Uneeq messages
2window.addEventListener('UneeqMessage', (event) => {
3 const msg = event.detail;
4
5 // Check if the message is from the first digital human
6 if (msg.frameId === firstDigitalHuman.frameId) {
7 console.log('First Digital Human:', msg)
8 }
9
10 // Check if the message is from the second digital human
11 if (msg.frameId === secondDigitalHuman.frameId) {
12 console.log('Second Digital Human:', msg)
13 }
14});
HTML
1<html>
2 <head>
3 <title>Multi Human Test</title>
4 <style>
5 body {
6 margin: 0;
7 display: flex;
8 height: 100vh;
9 }
10 .first_container {
11 width: 50%;
12 height: 100vh;
13 background-color: #f9f9f9;
14 border-right: 2px solid #ddd;
15 box-sizing: border-box;
16 padding: 20px;
17 }
18 .second_container {
19 width: 50%;
20 height: 100vh;
21 background-color: #f3f3f3;
22 box-sizing: border-box;
23 padding: 20px;
24 }
25 </style>
26 </head>
27
28 <body>
29 <div class="first_container">
30 <div id="firstDigitalHumanLayout"></div>
31 </div>
32
33 <div class="second_container">
34 <div id="secondDigitalHumanLayout"></div>
35 </div>
36
37 <script src="https://cdn.uneeq.io/hosted-experience/deploy/index.js"></script>
38 <script>
39 let firstDigitalHumanOptions = {
40 connectionUrl: "https://api.uneeq.io",
41 personaId: "149f1f29-553e-46e5-a6cc-11dd58da854e",
42 displayCallToAction: false,
43 renderContent: true,
44 mobileViewWidthBreakpoint: 900,
45 layoutMode: "contained",
46 cameraAnchorPosition: "center",
47 logLevel: "info",
48 enableMicrophone: false,
49 showUserInputInterface: true,
50 enableVad: false,
51 enableInterruptBySpeech: false,
52 autoStart: true,
53 containedAutoLayout: true,
54 showClosedCaptions: true,
55 captionsPosition: "bottom-left",
56 languageStrings: {},
57 customMetadata: {},
58 speechRecognitionHintPhrasesBoost: 0,
59 containedElementIdName: "firstDigitalHumanLayout"
60 };
61
62 const firstDigitalHuman = new Uneeq(firstDigitalHumanOptions);
63
64 let secondDigitalHumanOptions = {
65 connectionUrl: "https://api.uneeq.io",
66 personaId: "aa47905f-501a-4050-af68-d27b10a08b4a",
67 displayCallToAction: false,
68 renderContent: true,
69 mobileViewWidthBreakpoint: 900,
70 layoutMode: "contained",
71 cameraAnchorPosition: "center",
72 logLevel: "info",
73 enableMicrophone: false,
74 showUserInputInterface: true,
75 enableVad: false,
76 enableInterruptBySpeech: false,
77 autoStart: true,
78 containedAutoLayout: true,
79 showClosedCaptions: true,
80 captionsPosition: "bottom-left",
81 languageStrings: {},
82 customMetadata: {},
83 speechRecognitionHintPhrasesBoost: 0,
84 containedElementIdName: "secondDigitalHumanLayout"
85 };
86
87 const secondDigitalHuman = new Uneeq(secondDigitalHumanOptions);
88
89 // Event listener to handle Uneeq messages
90 window.addEventListener('UneeqMessage', (event) => {
91 const msg = event.detail;
92
93 // Check if the message is from the first digital human
94 if (msg.frameId === firstDigitalHuman.frameId) {
95 console.log('First Digital Human:', msg)
96 }
97
98 // Check if the message is from the second digital human
99 if (msg.frameId === secondDigitalHuman.frameId) {
100 console.log('Second Digital Human:', msg)
101 }
102 });
103 </script>
104 </body>
105</html>