Integration Script

You can integrate the embedded assistant into your html page with the following script

<script>
  const loadAlghoViewer = function () {

    const addAlgho = function(data, url) {
      const addTag = function(data) {
        const tag = document.createElement("algho-viewer");
        tag.setAttribute("id", "algho-viewer");
        Object.keys(data).map(function (key) { tag.setAttribute(key, data[key]); });
        document.body.appendChild(tag);
      };

      const addScript = function(url) {
        const script = document.createElement("script");
        script.setAttribute("id", "algho-viewer-module");
        script.setAttribute("type", "text/javascript");
        script.setAttribute("defer", "defer");
        script.setAttribute("charset", "UTF-8");
        script.setAttribute("src", url);
        document.body.appendChild(script)
      };

      addTag(data);
      addScript(url);
    };

    const timeout = 0;
    const data = {
      "bot-id": "5baa603a486bff7ff7501820c9680393",
      "widget": "true",
      "open": "false",
      "z-index": "9999",
    };

    setTimeout(function() {
      addAlgho(data, "https://virtualassistant.alghoncloud.com/algho-viewer.min.js");
    }, timeout);
  };

  document.addEventListener("DOMContentLoaded", loadAlghoViewer, {once : true});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const tag = document.createElement("algho-viewer");
    tag.setAttribute("id", "algho");
    tag.setAttribute("bot-id", "5baa603a486bff7ff7501820c9680393");
    tag.setAttribute("widget", "true");
    tag.setAttribute("open", "false");
    tag.setAttribute("z-index", "9999");
    document.body.appendChild(tag);

    const script = document.createElement("script");
    script.setAttribute("id", "algho-viewer-module");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("defer", "defer");
    script.setAttribute("src", "https://virtualassistant.alghoncloud.com/algho-viewer.min.js");
    document.body.appendChild(script);
});
</script>

<script>
    const tag = document.createElement("algho-viewer");
    tag.setAttribute("id", "algho");
    tag.setAttribute("bot-id", "5baa603a486bff7ff7501820c9680393");
    tag.setAttribute("widget", "true");
    tag.setAttribute("open", "false");
    tag.setAttribute("z-index", "9999");
    document.body.appendChild(tag);

    const script = document.createElement("script");
    script.setAttribute("id", "algho-viewer-module");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("defer", "defer");
    script.setAttribute("src", "https://virtualassistant.alghoncloud.com/algho-viewer.min.js");
    document.body.appendChild(script);
</script>

or at bottom of body element

<algho-viewer
  id="algho"
  bot-id="5baa603a486bff7ff7501820c9680393"
  open="false"
  widget="true"
  z-index="9999"
/>
<script defer src="https://virtualassistant.alghoncloud.com/algho-viewer.min.js"></script>

Tag Params

Main params

Tag Params	Type	Default	Description
`bot-id`	String		Bot Id identifier
`group-id`	Numeric		Group Id identifier for multilanguage
`question-id`	Numeric		Opens the assistant with preset QA
`question-repeat`	Boolean	false	Opens the assistant with preset QA [for each access or not]
`force-start-conversation`	Boolean	false	Force start conversation to recover conversationId
`open`	Boolean	false	Open widget at startup
`restore-open`	Boolean	true	Remember open status at startup (only desktop interface, not mobile)
`open-delay`	Numeric	0	Automatic opening delay of widget at startup in seconds
`audio`	Boolean	true	Enable audio output
`voice`	Boolean	true	Enable audio input
`mic`	Boolean	true	Enable microphone input
`sound`	Boolean	true	Enable sound notifications
`cookie-domain`	String		Override domain for cookies
`cookie-expire`	String	1y	Override expire for cookies
`iframe`	Boolean	false	Enable interface to be used inside iframe
`force-desktop`	Boolean	false	Force desktop UI on mobile devices
`force-show-close`	Boolean	false	Force showing close UI button if widget is false
`close-time`	Numeric	0	Automatic closing after specified time in seconds (no interaction)
`split-answer`	Boolean	true	Split response paragraphs into multiple balloon

If bot-id is omitted, it will be retrieved from bot query string params from url page.

Positioning and Sizing params

Tag Params	Type	Default	Description
`inline`	Boolean	false	Force interface boxed inside parent html element
`floating`	Boolean	false	Force floating positioning inside page
`floating-right`	Boolean	true	Force right floating positioning inside page
`floating-left`	Boolean	false	Force left floating positioning inside page
`floating-width`	Unit		Force width in floating positioning
`floating-height`	Unit		Force height in floating positioning
`width`	Unit		Width in pixel where floating enabled and inline disabled
`height`	Unit		Height in pixel where floating enabled and inline disabled
`margin-right`	Unit		Right margin in pixel where floating enabled and inline disabled
`margin-left`	Unit		Left margin in pixel where floating enabled and inline disabled
`margin-bottom`	Unit		Bottom margin in pixel where floating enabled and inline disabled
`chat-margin-bottom`	Unit	150px	Top margin in pixel to reduce chat space in DHI (Embed)

Microphone params

Tag Params	Type	Default	Description
`auto-microphone`	Boolean	false	Auto open microphone after speech (disabled on forms and multimedia)
`auto-microphone-delay`	Numeric	100	Delay in milliseconds to open microphone after speech (default 100 ms)
`force-auto-microphone`	Boolean	false	Force auto open microphone after speech
`stt-timeout`	Number	3.0	Recognition timeout (no voice recognition on Chrome Google STT)
`stt-manual`	Boolean	false	Force manual click to start and stop speech recognition

Vocal Activation Command params

Tag Params	Type	Default	Description
`command`	Boolean	false	Enable speech command module (Google Crome STT)
`command-language`			Override command module language (Google Crome STT)
`command-alias`			Add other names for command module separated by ',' (Google Crome STT)
`command-offline`	Boolean	false	Enable offline speech command module (Vosk)

Webcam Activation Command params

Tag Params	Type	Default	Description
`webcam`	Boolean	false	Enable webcam module
`command-webcam`	Boolean	false	Enable webcam "thumb up" hand command module

Digital Human Interface (DHI) params

Tag Params	Type	Default	Description
`dhi`	Boolean	false	Enable DHI interface
`fullscreen`	Boolean	false	Force fullscreen
`allow-fullscreen`	Boolean	false	Allow switch fullscreen
`allow-switch-interface`	Boolean	true	Allow switch interface from textual to dhi and vice versa
`transparent`	Boolean	false	Force transparent background for embedded
`dhi-config`	Boolean	true	Use DHI configuration from Composer
`bg-image`	Url		Override DHI background image (jpg, png)
`bg-video`	Url		Override DHI background video (mp4)
`bg-webcam`	String		Use DHI background webcam video (0, 1, user, environment)
`model3d`	Url		Override DHI 3d model
`config3d`	Json		Override DHI 3d config
`hdr`	Url		Override DHI hdr file
`pixel-ratio`	Decimal		Override screen pixel ratio for decrease 3d quality
`avatar-lite`	Boolean	false	Force loading light version of 3d avatar with 1024x1024 texture (Mobile version)
`avatar-delayed`	Boolean	true	Force loading 3d avatar only when widget was opened (not at startup)
`avatar-wait`	Boolean	true	Wait to open chat panel after avatar is loaded
`chat`	Boolean	true	Show chat panel
`group-last-message`	Boolean	true	Show grouped messages inside DHI or last message
`hide-last-message`	Boolean	false	Hide standard text messages
`hide-loading-message`	Boolean	false	Hide loader before show message
`hide-suggestion-last-message`	Boolean	false	Hide suggestions inside DHI when close message
`auto-hide-message`	Numeric	0	Enable auto hide standard text messages in seconds (0: disabled)
`show-full-chat`	Boolean	false	Show full chat interface on DHI
`dhi-notch`	Boolean	false	Show Notch on DHI interface
`command-app`	Boolean	false	Enable notch message for custom application (Ex. Robot)
`dhi-mode`	String		Force dhi config mode: [desktop,mobile,embed,kiosk,app]
`lis`	Boolean	false	Enable Lis input webcam interface
`avatar-reload`	Boolean	true	Reload 3d avatar on switch bot if has different 3d configs
`force-dhi-left`	Boolean	false	Force dhi avatar position on left with full chat (only on desktop device)

DHI Kiosk Interface params

Tag Params	Type	Default	Description
`kiosk`	Boolean	false	Enable kiosk interface
`session`	Numeric	60	Session timeout in seconds
`standby-hours`	Ranges		Standby hours ranges (Ex. 12:00-13:00,18:00-19:00)
`reload-time`	Times		Reload the interface at specified times if there is no user interaction (Ex. 12:00,13:00,18:00,19:00)
`gps-location`	Address		Gps address location (Ex. Via Roma, 12 53100 Siena)
`avatar`	Boolean	true	Show avatar panel
`kiosk-notch`	Boolean	true	Show top notch
`kiosk-banner`	Boolean	true	Show bottom banner
`kiosk-welcome`	Boolean	true	Show welcome video
`disable-privacy-message`	Boolean	false	Show privacy message after welcome message
`kiosk-reset-switch`	Boolean	false	Reset bot on standby to original value

Conversational params

Tag Params	Type	Description
`token`	String	Algho Token. The token was passed to any post call inside http header "Algho-Token: token" and can be a jwt token or an encrypted token with other methods.For Jwt Token see https://jwt.io/introduction/
`ajwt`	String	Algho Json Web Token. See Algho JWT payload
`context`	String	Algho context
`current-url`	Url	Current url to override send to conversation API and WS Form
`user-id`	String	User identifiler for session
`user-id-prefix`	String	User identifiler prefix

Emotional params

Tag Params	Type	Default	Description
`webcam-time`	Numeric	30	How much data send for emotional recognition (time in seconds)

UI params

Tag Params	Type	Default	Description
`bot-name`	Boolean	false	Show assistant name inside header
`bot-icon`	Boolean	false	Show assistant icon inside chat
`bot-logo`	Url		Set image logo
`auto-narration`	Boolean	false	Enable auto narration without confirm dialog
`dictate-preview-message`	Boolean	true	Enable new preview interface when dictate with microphone
`disable-select`	Boolean	false	Disable mouse click text selection
`hide-settings`	Boolean	false	Hide settings panel and menu
`hide-infos`	Boolean	false	Hide info panel and menu
`hide-operator`	Boolean	false	Hide operator request (disable)
`hide-menu`	Boolean	false	Hide main menu
`livechat-menu`	Boolean	true	Hide livechat menu
`allow-input`	Boolean	true	Enable input (keyboard and microphone) interaction
`allow-form-input`	Boolean	false	Enable input (keyboard) interaction on forms
`invert-privacy`	Boolean	false	Invert privacy message on start screen
`privacy-message`	String		Custom privacy message es: "Click here for privacy"
`privacy-url`	String		Custom privacy url
`start-message`	String		Custom start message es: "Click here to start"
`hide-history`	Boolean	false	Hide chat history
`hide-past-history`	Boolean	false	Hide past chat history (show only last session if active)
`auto-accept-policy`	Boolean	false	Force accept privacy
`disable-welcome`	Boolean	false	Disable welcome & welcome back messages
`show-all-message`	Boolean	false	Show all messages in DHI Embed
`show-baloon-time`	Boolean	false	Show time inside baloon message (New)
`group-baloon-time`	Boolean	false	Group time in last baloon message (New)
`split-answer`	Boolean	true	Split answer by paragraph
`lang-open`	Boolean	false	Force show new language selector panel
`language-panel`	Boolean	false	Force show new language selector panel
`disable-language-tooltip`	Boolean	false	Disable language tooltip in selector
`force-input-keyboard`	Boolean	false	Force show input keaboard as default
`limit-history`	Number	0	Limit messages on history
`baloon-menu`	Boolean	false	Force show botton to toggle messages baloon

Suggestions & Cards params

Tag Params	Type	Default	Description
`hide-mobile-suggestion`	Boolean	false	Enable correlated button to show suggestions on mobile devices
`scroll-down-suggestion`	Boolean	false	Force scroll down suggestions when expanded
`show-all-suggestion`	Boolean	false	Show all suggestions (not limited to 3 elements)
`keep-suggestion-open`	Boolean	false	Keep all suggestions open
`limit-suggestion`	Number	3	Set number of suggestion to show
`paginate-suggestion`	Boolean	false	Paginate suggestion to show
`limit-card`	Number	5	Set number of card (admissible values) to show
`welcome-back-suggestion`	Boolean	false	Force suggestions on the welcome back message

Input area

Tag Params	Type	Default	Description
`input-placeholder`	String		Text for input placeholder
`suggestion-placeholder`	Boolean	false	Text for input placeholder if response has suggestions
`input-style`	String		CSS input style to override

Link params

Tag Params	Type	Default	Description
`link-preview`	Boolean	true	Enable link preview
`link-opener`	String		Base url to disable link preview (ex: authenticated area)
`link-text`	String		Alternative text to show if link preview is disabled
`link-target`	String	_self	Link target for url on same domain [_blank, _self, _parent, _top, {framename}]
`link-auto-open`	Boolean	true	Enable auto open link on same domain
`link-tooltip`	Boolean	true	Enable link tooltip on mouse over
`disable-link-opener`	Boolean	false	Disable open link on opener window if match link-opener host domain

Params	Type	Default	Description
`widget`	Boolean	false	Enable widget
`tooltip`	String		Tooltip message
`widget-icon`	String		Url of widget icon or base64
`widget-old`	Boolean	false	Use old widget style
`widget-border-radius`	Unit		Old widget radius in pixel
`widget-bottom`	Unit		Position from bottom margin in pixel
`widget-right`	Unit		Position from right margin in pixel
`widget-top`	Unit		Position from top margin in pixel
`widget-left`	Unit		Position from left margin in pixel
`widget-size`	Unit	70px	Size in pixel
`widget-move`	Boolean	false	Allow widget move with mouse
`widget-color`	String	currentColor	Widget color
`widget-border-color`	String	#ffffff3c	Widget border color

Theme Color params

Tag Params	Type	Default	Description
`color-config`	Boolean	true	Use color configuration from Composer
`theme-style`	Enum		Override theme style [Dark, Light, Icy]
`theme-invert`	Boolean		Invert theme colors
`color`	Color		Generate light theme by color
`dark`	Boolean	false	Generate dark theme by color
`theme`	Json		Theme styles override
`theme-css`	Url		Theme styles css link to override
`font-family`	String	Poppins	Theme font-family
`font`	String	Poppins	Css font file [poppins, manrope, titillium] or google font url
`font-large`	Boolean	false	Use preset large font size
`icon-set`	Enum		Use old google icon set [Old]

Livechat

Tag Params	Type	Default	Description
`livechat-timeout`	Number	180	Timeout in seconds to wait operators
`livechat-input`	Boolean	false	Show livechat close button on input bar
`livechat-confirm`	Boolean	true	Show livechat connect confirm message

Accessibility params

Tag Params	Type	Default	Description
`screen-reader`	Boolean	false	Enable specific features for screen readers
`show-tab-index`	Boolean	false	Show current focused element

Tag Params	Type	Default	Description
`browser`	Boolean	false	Enable smart navigation on iframe
`home`	Url		Home page to show inside iframe

Api path and WS forms params

Params	Type	Default	Description
`api-url`	Url		api base url
`api-path`	Path	/api	api base path
`ws-url`	Url		Url base for Algho Forms

If ws-url is present, it will be used to compose the final url by combining it with the relative one saved on the forms/fields.

DHI Postprocessing Lut Cube params

Tag Params	Type	Default	Description
`lut-cube`	Url		Use lut cube file
`lut-intensity`	Decimal	1.0	Lut intensity

DHI Postprocessing effects params

Experimental: may change in future

Tag Params	Type	Default	Description
`postprocessing`	Enum		Use postprocessing effects [bokeh, chromatic, bleach, motionblur, custom]

Debug params

Tag Params	Type	Default	Description
`log`	Enum	none	Enable console logging [none, warn, info, debug]

QueryString Params

Digital Human Interface (DHI)

QueryString Params Params	Default	Description
`theme-style`		Override theme style [Dark, Light, Icy]
`theme`		Theme styles override. See Theme colors

DHI Kiosk Interface

QueryString Params Params	Default	Description
`webcam`	0	Enable webcam module
`commandWebcam`	0	Enable webcam "thumb up" hand command module
`webcamDebug`	0	Enable webcam debug
`command`	0	Enable speech command module (Google Crome STT)
`commandLanguage`		Override command module language (Google Crome STT)
`commandAlias`		Add other names for command module separated by ',' (Google Crome STT)
`commandOffline`	0	Enable offline speech command module (Vosk)
`session`	60	Session timeout in seconds
`sessionCountdown`	10	Session countdown in seconds (0: disable countdown)
`standbyHours`		Standby hours ranges (Ex. 12:00-13:00,18:00-19:00)
`reloadTime`		Reload the interface at specified times if there is no user interaction (Ex. 12:00,13:00,18:00,19:00)
`gpsLocation`		Gps address location (Ex. Via Roma, 12 53100 Siena)
`microphone`	1	Enable/disable microphone
`autoMicrophone`	0	Auto open microphone after speech (disabled on forms and multimedia)
`autoMicrophoneDelay`	100	Delay in milliseconds to open microphone after speech (default 100 ms)
`forceAutoMicrophone`	0	Force auto open microphone after speech
`sttTimeout`	3.0	Recognition timeout (no voice recognition on Chrome Google STT)
`exit`	0	Show exit session button
`avatarLite`	0	Force loading light version of 3d avatar with 1024x1024 texture (Mobile version)
`pixelRatio`		Override screen pixel ratio for decrease 3d quality
`stats`	0	Show 3D FPS statistics
`pdf`	0	Use our pdf viewer (as an alternative to the Chrome viewer which opens the internal links to the PDF on the same page by exiting the Kiosk interface)
`media`	0	Open multimedia content in fullscreen (image,video,iframe,slideshow,charts,pdf)
`hideLastMessage`	0	Hide standard text messages
`avatar`	1	Show avatar panel
`backgroundWebcam`		Use webcam as DHI background (0, 1, user, environment)
`accessibility`	0	Force full screen close button at bottom
`langOpen`	0	Force language selector opened
`languagePanel`	0	Force show new language selector panel
`webcamDistance`	0.0	Minimal face rectangle ratio for webcam engagement [0..100]
`disablePrivacyMessage`	0	Show privacy message after welcome message
`invertChat`	0	Invert chat top to bottom
`chatMarginTop`		Chat margin from top (example: 200px)
`kioskLandscape`	0	Enable Kiosk Landscape interface
`kioskSubtitles`	0	Enable Kiosk subtitles interface (if hideLastMessage = 1)
`kioskSubtitlesOnlyLis`	0	Enable Kiosk subtitles interface only for lis (if hideLastMessage = 1)
`webcamDelay`	900	Initial delay in ms for elaborate face recognition
`webcamDelayActive`	900	Delay in ms for elaborate face recognition when interface is active
`webcamDelayInactive`	900	Delay in ms for elaborate face recognition when interface is inactive
`webcamDelaySpeech`	900	Delay in ms for elaborate face recognition when interface speech
`webcamBackend`	webgl	Engine for webcam analysis [webgl, cpu]
`kioskResetSwitch`	0	Reset bot on standby to original value
`avatarReload`	1	Reload 3d avatar on switch bot if has different 3d configs
`kioskWebcamActivation`	1	Enable Kiosk activation by webcam (if webcam was enabled)
`kioskWebcamDeactivation`	1	Enable Kiosk deactivation by webcam (if webcam was enabled)
`kioskExit`	1	Enable Kiosk exit button
`kioskExitText`		Kiosk exit button text

DHI Kiosk STT VAD

The new STT Vad module (Speech to Text with Vocal Activity Detection) enables automatic speech recognition and transcription without the need to click the microphone to make requests. When combined with the kiosk interface with an enabled webcam, it will activate only when a person is detected in front of the totem.

It cannot be used in the mobile interface.

QueryString Params Params	Default	Description
`sttVad`	0	Enable new STT Vad module for interactive vocal transcription and request
`sttVadBreak`	0	Enable vocal interrupt for new request
`sttVadTimeout`	0	Enable autosend after timeout (milliseconds) of incomplete vocal transcription
`sttVadPause`	1152	Change value for detect pause on speech (milliseconds)

Backward compatibility

QueryString Params	Description
`botId`	Bot Id identifier
`autostartQuestionId`	Opens the assistant with pre-set QA [only on first access] (Optional)
`autostartEveryTimeQuestionId`	Opens the assistant with pre-set QA [for each access] (Optional)
`autoOpen`	Automatic opening of notch at startup-1 close0 open,1,2,... open with delays in seconds
`alghoId`	User identifier and session id (Optional)
`ajwt`	Algho Json Web Token. See Algho JWT payload
`token`	Algho Token (Optional) The token was passed to any post call inside http header "Algho-Token: token" and can be a jwt token or an encrypted token with other methods.For Jwt Token see https://jwt.io/introduction/
`currentUrl`	Current url to override send to conversation API and WS Form (Optional)

Note: These parameters are used only if botId is not set on the integration script.

QueryString params to be used in the links of the host site

QueryString Params	Description
`qaId`	Opens the assistant with pre-set QA [for each access] (Optional)
`qaOpen`	Automatic opening of notch at startup-1 close0 open,1,2,... open with delays in seconds

Functions

Algho Viewer functions cam be accessed on multiple modes:

using window.algho instance
using algho instance on HTMLElement

To use HTMLElement

const algho = document.getElementsByTagName("algho-viewer")[0].algho;

It is possible to call up some functions to automate the chat window.

Description	Function
Open widget	algho.open()
Close widget	algho.close()
Open microphone	algho.openMic()
Close microphone	algho.closeMic()
Mute audio	algho.mute()
unMute audio	algho.unMute()
Enable voice components	algho.enableVoice()
Disable voice components	algho.disableVoice()
Send bot message	algho.sendBotMessage(string: text)
Send user message	algho.sendUserMessage(string: text, bool: hide [optional])
Send user start message	algho.sendUserStartMessage(string: qaId, string: text [optional])
Send user stop form	algho.sendUserStopForm(bool: silent)
Send user stop conversation	algho.sendUserStopConversation()
Set user Id	algho.setUserId(string: userId)
Get user Id	algho.etUserId()
Set Bot Id	algho.setBotId(string: botId)
Set Bot Id, Answert Id	algho.setBotId(string: botId, string: answerId)
Get Bot Id	algho.getBotId()
Set Algho token	algho.setToken(string: token)
Set Algho JWT	algho.setAJWT(string: ajwt)
Set context	algho.setContext(string: context)
Set current url	algho.setCurrentUrl(string: url)
Set current url	algho.setCurrentUrl(string: url)
Get conversation Id	algho.getConversationId()
Reset chat history	algho.resetChatHistory()
Reset all cookies and settings	algho.resetAll(bool: reload)
Dispose all	algho.dispose()
Resize 3d scene	algho.resize3d()
Set logger	algho.setlogger(string: mode) ['info','debug','warn','none']
Set auto microphone	algho.setAutoMicrophone(bool: status)
Set force auto microphone	algho.setForceAutoMicrophone(bool: status)
Set Gps location	algho.setGpsLocation(string: location)
Break voice speaking	algho.stopSpeak()
Set specific features	algho.setFeatures({})

Features allowed

['theme', 'lis', 'dhi', 'showAllMessage', 'screenReader', 'showTabIndex', 'stt', 'tts', 'audio', 'splitAnswer', 'chatMarginTop']

Kiosk specific function

Description	Function
Resume from standby	algho.startKiosk()
Go to standby	algho.stopKiosk()

setlogger(info,debug, warn,none)

Events

Algho Viewer create new events on HTML Element algho-viewer

alghoLoaded
alghoLoadedAvatar
alghoReady
alghoMessage
alghoMicrophone
alghoShow
alghoHide
alghoPreSendMessage
alghoSendMessage
alghoRequestOperator
alghoTranscript
alghoTrack
alghoStartSpeak
alghoStopSpeak
alghoChangeLanguage
alghoKioskSessionStandby
alghoKioskSessionResume

const alghoElement = document.getElementById("algho");

alghoElement.addEventListener("alghoInitialized", function() {
  alert("Algho initialized");
}, false);

alghoElement.addEventListener("alghoLoaded", function() {
  alert("Algho loaded");
}, false);

alghoElement.addEventListener("alghoLoadedAvatar", function() {
  alert("Algho loaded avatar");
}, false);

alghoElement.addEventListener("alghoReady", function() {
    alert("Algho ready");
}, false);

alghoElement.addEventListener("alghoMessage", function(event) {
    alert(JSON.stringify(event.detail));
}, false);

alghoElement.addEventListener("alghoMicrophone", function(status) {
    alert("Algho microphone " + status);
}, false);

alghoElement.addEventListener("alghoShow", function() {
    alert("Algho showed");
}, false);

alghoElement.addEventListener("alghoHide", function() {
    alert("Algho hidden");
}, false);

alghoElement.addEventListener("alghoPreSendMessage", function(event) {
    alert(JSON.stringify(event.detail));
}, false);

alghoElement.addEventListener("alghoSendMessage", function(event) {
    alert(JSON.stringify(event.detail));
}, false);

alghoElement.addEventListener("alghoRequestOperator", function(event) {
    alert(JSON.stringify(event.detail));
}, false);

alghoElement.addEventListener("alghoTranscript", function(event) {
    console.log(event.detail);
}, false);

alghoElement.addEventListener("alghoStartSpeak", function() {
  alert("Algho Start Speak");
}, false);

alghoElement.addEventListener("alghoStopSpeak", function() {
  alert("Algho Stop Speak");
}, false);

alghoElement.addEventListener("alghoChangeLanguage", function(event) {
    console.log(event.detail);
}, false);

alghoElement.addEventListener("alghoKioskSessionStandby", function() {
    alert("Algho Kiosk Standby");
}, false);

alghoElement.addEventListener("alghoKioskSessionResume", function() {
    alert("Algho Kiosk Resume");
}, false);

After event alghoReady algho instance was initialized.

Track Event

Events can be tracked for use in Google Analytics 4 or other services.

const alghoElement = document.getElementById("algho");

alghoElement.addEventListener("alghoReady", function() {
    // Use empty array [] for all events, or specific event ["open", "close"]
    alghoElement.algho.initTrack(["open", "close", "send", "link"]);
}, false);

alghoElement.addEventListener("alghoTrack", function(event) {
  console.log(event.detail);
}, false);

Details

Examples

Landscape Vocal https://ghiy2r.csb.app/index_landscape_vocal.html

Landscape Text https://ghiy2r.csb.app/index_landscape_text.html

Landscape DHI https://ghiy2r.csb.app/index_landscape_dhi.html

Inline Vocal https://ghiy2r.csb.app/index_inline_page.html

Inline Dhi https://ghiy2r.csb.app/index_inline_dhi.html

Widget Vocal https://ghiy2r.csb.app/index_widget.html

Widget Dhi https://ghiy2r.csb.app/index_widget_dhi.html

Theme colors

Theme color example "Icy"

primary-color: #31b3f4;
primary-color-text: #31b3f4;
suggested-color: #31b3f44d;

fg-color: #FFFFFF;

fg-color-widget: #FFFFFF;
bg-color-widget: #31b3f4;

fg-color-bot: #FFFFFF;
fg-color-user: #FFFFFF;

bg-color-user: #8181811D;
bg-color-bot: #8181811D;

bg-color: #40444d;
bg-color-gradient: #292b31;
bg-color-overlay: #00000000;

bg-color-card: #8181811D;

fg-other-color: #FFFFFF;
bg-other-color: #8181811D;

border-other-color: #FFFFFF50;

fg-color-input: #FFFFFF;
border-color-input: #FFFFFF50;

border-color: #6e7585;

caption-color: #74767c;
timestamp-color-user: #FFFFFF;
timestamp-color-bot: #FFFFFF;

fg-button-color: #FFFFFF;
fg-button-color-active: #31b3f4;
fg-button-color-deactive: #d93025;
fg-button-color-hover: #31b3f4;
fg-button-color-disabled: #70798f;

bg-button-color: #8181811D;
bg-button-color-hover: #8181811D;

bg-keyboard-color: #FFFFFF1D;
bg-keyboard-other-color: #FFFFFF30;

fg-button-color-transparent: #FFFFFF;
bg-button-color-transparent: #8181811D;

fg-tooltip-color: #FFFFFF;
bg-tooltip-color: #353840;

scroll-color: #FFFFFF;

border-radius-frame: 24px;
border-radius: 16px;
border-radius-small: 4px;

backdrop-filter: blur(16px);

fg-option-color-hover: #31b3f4;
bg-option-shadow-hover: #00000000 0px 0px 4px 1px;
bg-option-color-active: #3e4550;
bg-option-color-disabled: #3e4550;
fg-option-color-disabled: #70798f;
fg-option-color-other: #31b3f4;

link-color: #31b3f4;
stt-color: #31b3f4;

Integration Script

Tag Params

Main params

Positioning and Sizing params

Microphone params

Vocal Activation Command params

Webcam Activation Command params

Digital Human Interface (DHI) params

DHI Kiosk Interface params

Conversational params

Emotional params

UI params

Suggestions & Cards params

Input area

Link params

Widget params

Theme Color params

Livechat

Accessibility params

Smart Navigation params

Api path and WS forms params

DHI Postprocessing Lut Cube params

DHI Postprocessing effects params

Debug params

QueryString Params

Digital Human Interface (DHI)

DHI Kiosk Interface

DHI Kiosk STT VAD

Backward compatibility

QueryString params to be used in the links of the host site

Functions

Features allowed

Kiosk specific function

Events

Track Event

Theme colors

Tag Params​

Main params​

Positioning and Sizing params​

Microphone params​

Vocal Activation Command params​

Webcam Activation Command params​

Digital Human Interface (DHI) params​

DHI Kiosk Interface params​

Conversational params​

Emotional params​

UI params​

Suggestions & Cards params​

Input area​

Link params​

Widget params​

Theme Color params​

Livechat​

Accessibility params​

Smart Navigation params​

Api path and WS forms params​

DHI Postprocessing Lut Cube params​

DHI Postprocessing effects params​

Debug params​

QueryString Params​

Digital Human Interface (DHI)​

DHI Kiosk Interface​

DHI Kiosk STT VAD​

Backward compatibility​

QueryString params to be used in the links of the host site​

Functions​

Features allowed​

Kiosk specific function​

Events​

Track Event​

Theme colors​

Tag Params

Main params

Positioning and Sizing params

Microphone params

Vocal Activation Command params

Webcam Activation Command params

Digital Human Interface (DHI) params

DHI Kiosk Interface params

Conversational params

Emotional params

UI params

Suggestions & Cards params

Input area

Link params

Widget params

Theme Color params

Livechat

Accessibility params

Smart Navigation params

Api path and WS forms params

DHI Postprocessing Lut Cube params

DHI Postprocessing effects params

Debug params

QueryString Params

Digital Human Interface (DHI)

DHI Kiosk Interface

DHI Kiosk STT VAD

Backward compatibility

QueryString params to be used in the links of the host site

Functions

Features allowed

Kiosk specific function

Events

Track Event

Theme colors