Hosted Experience
Getting Started

5min
Platform 2.0
Within UneeQ's Platform 2.0 admin panel when you access a Persona, you will find a in the top right-hand corner called Start Digital Human
Clicking this link will take you to a test page where you can interact with your digital human
﻿
Click Advanced Options in order to configure the JavaScript you need to add to any page where you wish for your digital human to appear
﻿
Change any of the default options you wish to change, then click Launch
Either Start Digital Human to interact with your character, or click Add this to my own site to retrieve the JavaScript which you will need to add to your website in order to display your digital human (don't forget to whitelist your domain!)
﻿
﻿
Complete HTML Example
HTML
<html>
    <head>
        <script src="https://cdn.uneeq.io/hosted-experience/deploy/index.js"></script>
        <script>
            let uneeqOptions = {
                connectionUrl: "https://api.uneeq.io",
                personaId: "your-persona-id",
                displayCallToAction: true,
                renderContent: true,
                layoutMode: "fullScreen",
                cameraAnchorHorizontal: "center",
                cameraAnchorDistance: "loose_close_up",
                logLevel: "info",
                enableMicrophone: false,
                showUserInputInterface: true,
                enableVad: true,
                autoStart: false,
                containedAutoLayout: true,
                showClosedCaptions: true,
                captionsPosition: "bottom-left",
                languageStrings: {},
                customMetadata: {
                    example_key: "example_value",
                },
                speechRecognitionHintPhrasesBoost: 0,
            };
            const uneeq = new Uneeq(uneeqOptions);
        </script>

        <style>
            body {
                margin: 0;
            }
        </style>
    </head>

    <body>
        <h1>Example Digital Human</h1>

        <button onclick="uneeq.startSession()">Start</button>

        <script>
            window.addEventListener("UneeqMessage", (event) => {
                const msg = event.detail;
                console.log("Received UneeQ message: ", msg);

                switch (msg.uneeqMessageType) {
                    case "SessionStateUpdate":
                        // example only
                        if (msg.live) {
                            document.body.classList.add("uneeq-session-live");
                        } else {
                            document.body.classList.remove("uneeq-session-live");
                        }
                        break;

                    // ... Handle other message types here

                    default:
                        break;
                }
            });
        </script>
    </body>
</html>

<html>
    <head>
        <script src="https://cdn.uneeq.io/hosted-experience/deploy/index.js"></script>
        <script>
            let uneeqOptions = {
                connectionUrl: "https://api.uneeq.io",
                personaId: "your-persona-id",
                displayCallToAction: true,
                renderContent: true,
                layoutMode: "fullScreen",
                cameraAnchorHorizontal: "center",
                cameraAnchorDistance: "loose_close_up",
                logLevel: "info",
                enableMicrophone: false,
                showUserInputInterface: true,
                enableVad: true,
                autoStart: false,
                containedAutoLayout: true,
                showClosedCaptions: true,
                captionsPosition: "bottom-left",
                languageStrings: {},
                customMetadata: {
                    example_key: "example_value",
                },
                speechRecognitionHintPhrasesBoost: 0,
            };
            const uneeq = new Uneeq(uneeqOptions);
        </script>

        <style>
            body {
                margin: 0;
            }
        </style>
    </head>

    <body>
        <h1>Example Digital Human</h1>

        <button onclick="uneeq.startSession()">Start</button>

        <script>
            window.addEventListener("UneeqMessage", (event) => {
                const msg = event.detail;
                console.log("Received UneeQ message: ", msg);

                switch (msg.uneeqMessageType) {
                    case "SessionStateUpdate":
                        // example only
                        if (msg.live) {
                            document.body.classList.add("uneeq-session-live");
                        } else {
                            document.body.classList.remove("uneeq-session-live");
                        }
                        break;

                    // ... Handle other message types here

                    default:
                        break;
                }
            });
        </script>
    </body>
</html>
﻿
﻿
﻿
Manual Override
By default, adding the JavaScript we provide is all you need to embed a digital human on any website which you own and administrate. If you would like to manually control how the JavaScript is executed - such as delaying the init() function until the user takes some specific action - you need only call this function within your code such as: window.uneeqInstance.init() (or however you instantiate the Uneeq class)
Pay special attention to the ORDER functions are called if you manually call init() 
Event Listeners must be created before initialization
﻿
Sequence Diagram
Securing your experience
Getting Started

Platform 2.0

﻿

Complete HTML Example

﻿

﻿

Manual Override
