Hosted experience overview
Getting started

7min
The process is really simple, all you have to do is paste our code snippet into the <head></head> section of your website, then update a few identifying details in the code snippet. You don't have to be technical, or a developer to do this!
If you need any support, feel free to reach out to us at [email protected]﻿
Try Mode, the default conversation mode of a newly-configured Persona, is not compatible with our Hosted experience. You must create a custom conversation integration when using Hosted or your digital human will not speak.
1. Paste our code snippet into your website
The code snippet below should be copied and pasted into the <head> section of your website, just before the closing </head> tag. This snippet includes some of the optional tags listed below. Not all tags are required, but this snippet will get you started. You can view the full list of customizations here: Customizing your experience﻿ 
personaShareId is available via the Persona's page within Creator.  There is a separate "Persona ID" value within the Creator page that must NOT be used in the code below.
HTML
<script>
    window.uneeqInteractionsOptions = {
        personaShareId: "ENTER-PERSONA-SHARE-ID-HERE",
        layoutMode: 'fullScreen',
        showUserInputInterface: true,
        displayCallToAction: true,
        enableMicrophone: true,
        						voiceInputMode: "SPEECH_RECOGNITION",
    }
</script>
<script src="SELECT-YOUR-REGION-FROM-THE-OPTIONS-BELOW"></script>
<script>
    window.uneeqInteractionsOptions = {
        personaShareId: "ENTER-PERSONA-SHARE-ID-HERE",
        layoutMode: 'fullScreen',
        showUserInputInterface: true,
        displayCallToAction: true,
        enableMicrophone: true,
        						voiceInputMode: "SPEECH_RECOGNITION",
    }
</script>
<script src="SELECT-YOUR-REGION-FROM-THE-OPTIONS-BELOW"></script>
﻿
﻿
2. Select your region
From the code snippet you pasted into your website, replace SELECT-YOUR-REGION with the Region URL corresponding to the region your digital human was provisioned in.
Region
Region URL
North America
https://hosted.us.uneeq.io/interactions/v1/deploy
Europe
https://hosted.eu.uneeq.io/interactions/v1/deploy
Oceania
https://hosted.au.uneeq.io/interactions/v1/deploy
Frankfurt
https://hosted.de.uneeq.io/interactions/v1/deploy
﻿
North American region example:
HTML
<script>
    window.uneeqInteractionsOptions = {
        personaShareId: "ENTER-PERSONA-SHARE-ID-HERE"
    }
</script>
<script src="https://hosted.us.uneeq.io/interactions/v1/deploy"></script>
<script>
    window.uneeqInteractionsOptions = {
        personaShareId: "ENTER-PERSONA-SHARE-ID-HERE"
    }
</script>
<script src="https://hosted.us.uneeq.io/interactions/v1/deploy"></script>
﻿
﻿
3. Update your persona share Id
From the code snippet you pasted into your website, replace ENTER-PERSONA-SHARE-ID-HERE with your persona share Id.
Hint: Your persona share Id is available through our Creator portal, or provided to you by our Custom Success team.
﻿
Example
HTML
<html>
    <head>
        <title>Your Website</title>
        <script>
            window.uneeqInteractionsOptions = {
                personaShareId: "ebsdw401-94ae-4088-8e3c-4283d9904972"
            }
        </script>
        <script src="https://hosted.us.uneeq.io/interactions/v1/deploy"></script>
    </head>
    <body>
        Your website Content.
    </body>
</html>
<html>
    <head>
        <title>Your Website</title>
        <script>
            window.uneeqInteractionsOptions = {
                personaShareId: "ebsdw401-94ae-4088-8e3c-4283d9904972"
            }
        </script>
        <script src="https://hosted.us.uneeq.io/interactions/v1/deploy"></script>
    </head>
    <body>
        Your website Content.
    </body>
</html>
﻿
﻿
﻿
Full HTML Template
For simplicity, we are providing a full HTML document to help get you started. You can copy and paste the below into an index.html file, push that file onto a webserver (for instance, an AWS S3 Bucket with web hosting setting enabled) and immediately have a live website with a digital human running.
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Digital Human Demo</title>
    <link rel="stylesheet" href="https://cf-assets.digitalhumans.com/sample-site/style.css">
    <link rel="icon" href="https://cf-assets.digitalhumans.com/sample-site/favicon.ico" type="image/x-icon">
    <script>
        window.uneeqInteractionsOptions = {
          personaShareId: "ENTER-PERSONA-SHARE-ID-HERE",
          layoutMode: 'fullScreen',
          voiceInputMode: "SPEECH_RECOGNITION",
          showUserInputInterface: true,
          customData: {
            "myCustomKey": "myCustomValue"
          },
          displayCallToAction: true,
          renderContent: true,
          cameraPosition: "CENTER",
          playWelcome: true,
          mobileViewWidthBreakpoint: 900,
          enableMicrophone: true,
          languageStrings: {
            "ja": {
                "callToActionText": "やあ！会話を始めるにはここをクリックしてください。",
                "textInputPlaceholder": "ここに入力..."
            },
            "de-DE": {
                "callToActionText": "Hi! Klicken Sie hier, um ein Gespräch zu beginnen.",
                "textInputPlaceholder": "Geben Sie hier ein ..."
            },
            "default": {
                "callToActionText": "Hi! Click here to start a conversation.",
                "textInputPlaceholder": "Type here..."
            }
          }
        }
        
        window.addEventListener('UneeqMessage', (event) => {
            const msg = event.detail;
            console.log('UneeQ Message: ', msg);
            switch (msg.uneeqMessageType) {
                case 'AvatarQuestionText':
                    console.log(`User input received`)
                    break;
                case 'StartedSpeaking':
                    console.log(`Digital human started speaking`)
                    break;
                default:
                    break;
            }
        });
    </script>
    <script src="SELECT-YOUR-REGION-FROM-THE-OPTIONS-ABOVE"></script>
  </head>
  <body>
    <main class="flex-container">
        <p class="flex-item banner-text">Digital Humans!</h1>
            <p class="flex-item"></p>
    </main>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Digital Human Demo</title>
    <link rel="stylesheet" href="https://cf-assets.digitalhumans.com/sample-site/style.css">
    <link rel="icon" href="https://cf-assets.digitalhumans.com/sample-site/favicon.ico" type="image/x-icon">
    <script>
        window.uneeqInteractionsOptions = {
          personaShareId: "ENTER-PERSONA-SHARE-ID-HERE",
          layoutMode: 'fullScreen',
          voiceInputMode: "SPEECH_RECOGNITION",
          showUserInputInterface: true,
          customData: {
            "myCustomKey": "myCustomValue"
          },
          displayCallToAction: true,
          renderContent: true,
          cameraPosition: "CENTER",
          playWelcome: true,
          mobileViewWidthBreakpoint: 900,
          enableMicrophone: true,
          languageStrings: {
            "ja": {
                "callToActionText": "やあ！会話を始めるにはここをクリックしてください。",
                "textInputPlaceholder": "ここに入力..."
            },
            "de-DE": {
                "callToActionText": "Hi! Klicken Sie hier, um ein Gespräch zu beginnen.",
                "textInputPlaceholder": "Geben Sie hier ein ..."
            },
            "default": {
                "callToActionText": "Hi! Click here to start a conversation.",
                "textInputPlaceholder": "Type here..."
            }
          }
        }
        
        window.addEventListener('UneeqMessage', (event) => {
            const msg = event.detail;
            console.log('UneeQ Message: ', msg);
            switch (msg.uneeqMessageType) {
                case 'AvatarQuestionText':
                    console.log(`User input received`)
                    break;
                case 'StartedSpeaking':
                    console.log(`Digital human started speaking`)
                    break;
                default:
                    break;
            }
        });
    </script>
    <script src="SELECT-YOUR-REGION-FROM-THE-OPTIONS-ABOVE"></script>
  </head>
  <body>
    <main class="flex-container">
        <p class="flex-item banner-text">Digital Humans!</h1>
            <p class="flex-item"></p>
    </main>
  </body>
</html>
﻿
﻿
Next Steps...
﻿Customizing your experience﻿ 
﻿Displaying content﻿﻿
﻿Methods﻿ 
﻿Keeping your experience secure﻿﻿
﻿Custom styling (advanced)﻿ 
﻿Event handling﻿ 
Region	Region URL
North America	https://hosted.us.uneeq.io/interactions/v1/deploy
Europe	https://hosted.eu.uneeq.io/interactions/v1/deploy
Oceania	https://hosted.au.uneeq.io/interactions/v1/deploy
Frankfurt	https://hosted.de.uneeq.io/interactions/v1/deploy
Hosted experience overview
Customizing your experience