Hosted Experience
Configuration Options

44min
Constructor
The Uneeq class is instantiated with the following constructor:
JS
constructor(options);
constructor(options);
﻿
Parameters
options (Object): Configuration options for initializing the Uneeq instance.
﻿
Options
The configuration options you may pass when initializing the Uneeq class.
autoStart
(Optional) A boolean indicating whether to automatically start the session. This option will configure your session to start automatically on page load, without calling startSession(). Default value is false.
JS
autoStart: false
autoStart: false
﻿
﻿
cameraAnchorHorizontal
(Optional) A string defining the initial camera anchor horizontal position when the session starts.
Values:
left
right
center
JS
cameraAnchorHorizontal: "right"
cameraAnchorHorizontal: "right"
﻿
﻿
cameraAnchorDistance
(Optional) A string defining the initial camera anchor distance (zoom) when the session starts.
Values:
close_up
loose_close_up
tight_medium_shot
medium_shot
medium_full_shot
full_shot
JS
cameraAnchorDistance: "close_up"
cameraAnchorDistance: "close_up"
﻿
﻿
captionsPosition
(Optional) A string defining where the closed captions will be positioned. Default value is 'bottom-left'.
Values:
bottom-left
bottom-right
bottom
top-left
top-right
top
﻿
connectionUrl
(Required) A string URL for the connection endpoint.
JS
connectionUrl: "https://api.uneeq.io"
connectionUrl: "https://api.uneeq.io"
﻿
﻿
ctaThumbnailUrl
(Optional) A string URL to override the call-to-action thumbnail image. The image provided by the URL should be a square 140px .jpg .png or .gif.
﻿
JS
ctaThumbnailUrl: "https://cdn.your-domain.com/image1"
ctaThumbnailUrl: "https://cdn.your-domain.com/image1"
﻿
﻿
customMetadata
(optional) JSON data to be passed with all chat prompt or voice prompts. Note, this value can be overwritten at run time using setCustomPromptMetadata(). Data set via customMetadata will be sent to your conversation platform, and may be used when generating responses.
JS
customMetadata: {"name": "John"}
customMetadata: {"name": "John"}
﻿
﻿
customStyles
(Optional) A string defining custom css that will be applied to the hosted experience frame. For example, this may be used to change the color of a button within the hosted experience frame.
JS
customStyles: `h1 { font-size: 150%; }`
customStyles: `h1 { font-size: 150%; }`
﻿
﻿
displayCallToAction
(Optional) A boolean indicating whether to display a call to action. Default value is true.
JS
displayCallToAction: false
displayCallToAction: false
﻿
﻿
enableMicrophone
(Optional) A boolean indicating whether the microphone permission is requested as soon as the session starts. Default value is false.
JS
enableMicrophone: true
enableMicrophone: true
﻿
﻿
enableVad
(Optional) A boolean indicating whether to enable voice activity detection (VAD). VAD allows the user to speak without pushing a button to start/stop recording. Setting this value to false will require the user to push to talk. Default value is true.
JS
enableVad: false
enableVad: false
﻿
﻿
initLoadHandler
(Optional) A boolean indicating whether the digital human frame should be initialised on page load. When this value is true the digital human frame will be initialized when the page is loaded (via a page load event handler). When this value is false , then the digital human frame will not be added to the page on page load.
If you set this value to false then you will need to call uneeq.init() yourself when you want the digital human frame to be loaded. This is desirable in some situations when you want to delay or prevent loading the digital human script until some data has been retrieved, or action taken on the page.
Default value is true.
﻿
JS
initLoadHandler: false
initLoadHandler: false
﻿
﻿
languageStrings
(Optional) The languageStrings property can be defined to update any of the text displayed within the Hosted Experience interface. Language strings object should contain values corresponding to ISO-639-1 languages, e.g. en, es, ja, etc. Within each language code value, provide an object containing the key of the value you want to update. Additionally a specific locale/region may be provided for more precise language targetting, e.g. en-US, en-GB, de-DE, pt-BR.
When a user loads the digital human experience their browser will provide a list of their preferred languages (an array in preference order). Hosted Experience will iteratively search the list of languageStrings you provide to find a match for the key based on the users preferred languages set in their browser. More information on how the browser detects the preferred language can be found here.
If a language code is not provided then the 'default' value will be used. If no 'default' configuration is specified by you, then the Hosted Experience base values will be used.
A complete list of languageString keys may be found here: Language Strings﻿ 
JS
languageStrings: {
	es: {
		callToActionText: "¡Hola! Haga clic aquí para iniciar una conversación.e",
		textInputPlaceholder: "Escriba aquí...",
	},
	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...",
	},
}
languageStrings: {
	es: {
		callToActionText: "¡Hola! Haga clic aquí para iniciar una conversación.e",
		textInputPlaceholder: "Escriba aquí...",
	},
	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...",
	},
}
﻿
﻿
layoutMode
(Optional) A string defining the layout mode.
Overlay:
Value: overlay
Displays the digital human in a small overlaid window in the bottom right of the users view. This view is best when the user needs to continue viewing the website they are on.
Full Screen:
Value: fullScreen
Displays the digital human in a view that covers the users entire view. The user will not be able to view or interact with the hosting website. This view is best for an emersive digital human experience.
Contained:
Displays the digital human inside an html div container element that the client adds to their page and controls. To use this layout mode the client must have a div element on the page with the id uneeqContainedLayout. The digital human will be rendered inside this container, while allowing the client to restyle the container. For example the client could move the element, resize, or hide the digital human according to the context.
Note: The container element cannot be removed from the DOM without ending the session.
JS
layoutMode: "overlay"
layoutMode: "overlay"
﻿
﻿
logLevel
(Optional) A string defining the desired log level. Selecting a lower log level will include all log levels above it. For example, using 'info' will also include log levels above it, such as 'warn', 'error' and 'fatal'. To have the minimal amount of logging from Hosted Experience, you should use 'error'.
Values:
error
warn
info
debug
trace
JS
logLevel: "warn"
logLevel: "warn"
﻿
﻿
personaId
(Required) The id of the digital human to be started. This value can be copied from the UneeQ configuration portal -> Digital Human page.
JS
personaId: "323d5c36-e01c-4c0d-9ef5-2c00de4aa166"
personaId: "323d5c36-e01c-4c0d-9ef5-2c00de4aa166"
﻿
﻿
renderContent
(Optional) A boolean indicating whether to render HTML content within the digital human frame. If this option is set to false, you may choose to catch the html content message in the client implementation and render content within your own view.
JS
renderContent: false
renderContent: false
﻿
﻿
showClosedCaptions
(Optional) A boolean indicating whether to show closed captions within the view. When disabled, the client may catch the event and render their close. The default value is true.
JS
showClosedCaptions: false
showClosedCaptions: false
﻿
﻿
showUserInputInterface
(Optional) A boolean indicating whether to show the user input interface, which includes the text input element used for typing text messages, and the microphone mute button. When disabled, you may prefer to implement your own input interface outside of the UneeQ frame.
JS
showUserInputInterface: true
showUserInputInterface: true
﻿
﻿
speechRecognitionHintPhrases
(Optional) A comma separated string of hint phrases that should be used to hint the speech recognition system about words to expect. If you provide hint phrases here, then they are more likely to be detected in the speech recognition system.
JS
speechRecognitionHintPhrases: "uneeq,digital humans"
speechRecognitionHintPhrases: "uneeq,digital humans"
﻿
﻿
speechRecognitionHintPhrasesBoost
(Optional) An integer between 0 and 20 that can be used to boost the likelyhood of hint phrase words being detected in speech.
JS
speechRecognitionHintPhrasesBoost: 10
speechRecognitionHintPhrasesBoost: 10
﻿
﻿
speechRecognitionLocales
(Optional) This option specifies up to four locales that the Digital Human should understand a person speaking (speech recognition). The locales are specified in the BCP-47 format e.g "en-US". The first locale is considered the primary locale. Locales should be separated with a colon.
JS
speechRecognitionLocales: en-US:en-GB:en-AU
speechRecognitionLocales: en-US:en-GB:en-AU
﻿
﻿
welcomePrompt
(Optional) The prompt that will be sent to your conversation (LLM) system when the session starts. Default value is "Hello".
Note: This value is not what will be spoken to the user when the session starts, it is the prompt (question) that is sent to your language model from the user.
JS
welcomePrompt: "Hi, can you welcome me and see if I need any help."
welcomePrompt: "Hi, can you welcome me and see if I need any help."
﻿
﻿
Complete Example
JS
let uneeqOptions = {
    connectionUrl: "https://api.uneeq.io",
    personaId: "323d5c36-e01c-4c0d-9ef5-2c00de4aa166",
    displayCallToAction: true,
    renderContent: true,
    ctaThumbnailUrl: "https://your-cta-image.com",
    customStyles: "/* Define your own styles */",
    mobileViewWidthBreakpoint: 900,
    layoutMode: "fullScreen",
    cameraAnchorPosition: "loose_close_up",
    logLevel: "info",
    enableMicrophone: false,
    showUserInputInterface: true,
    enableVad: true,
    enableInterruptBySpeech: false,
    autoStart: false,
    containedAutoLayout: true,
    showClosedCaptions: true,
    languageStrings: {
        es: {
            callToActionText: "¡Hola! Haga clic aquí para iniciar una conversación.e",
            textInputPlaceholder: "Escriba aquí...",
        },
        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...",
        },
    },
    speechRecognitionLocales: "en-US:en-GB:en-AU",
    speechRecognitionHintPhrases: "uneeq, digital human",
    speechRecognitionHintPhrasesBoost: 20,
};
const uneeq = new Uneeq(uneeqOptions);
let uneeqOptions = {
    connectionUrl: "https://api.uneeq.io",
    personaId: "323d5c36-e01c-4c0d-9ef5-2c00de4aa166",
    displayCallToAction: true,
    renderContent: true,
    ctaThumbnailUrl: "https://your-cta-image.com",
    customStyles: "/* Define your own styles */",
    mobileViewWidthBreakpoint: 900,
    layoutMode: "fullScreen",
    cameraAnchorPosition: "loose_close_up",
    logLevel: "info",
    enableMicrophone: false,
    showUserInputInterface: true,
    enableVad: true,
    enableInterruptBySpeech: false,
    autoStart: false,
    containedAutoLayout: true,
    showClosedCaptions: true,
    languageStrings: {
        es: {
            callToActionText: "¡Hola! Haga clic aquí para iniciar una conversación.e",
            textInputPlaceholder: "Escriba aquí...",
        },
        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...",
        },
    },
    speechRecognitionLocales: "en-US:en-GB:en-AU",
    speechRecognitionHintPhrases: "uneeq, digital human",
    speechRecognitionHintPhrasesBoost: 20,
};
const uneeq = new Uneeq(uneeqOptions);
﻿
﻿
Securing your experience
Language Strings