Configuration

Configuration object

Field name (required)TypeDescriptionExample value
chatSrc *string

URL: https://webchat.app.chatbots.sentione.com/fullscreen.

This address should be changed for on-premise deployments

https://webchat.app.chatbots.sentione.com/fullscreen
projectId *stringProject id
authorstringName of the user, this value will be visible in Conversation analytics
sourceTypestringField to mark conversation with custom source name. Value will be visible in conversation analytics
appearanceobjectObject to set up appearance of the webchat
appearance: {
    	headerTitle: "Sentione chat",
      avatar: {
        src: '[https://cdn.sentione.com/chat-ui-launcher/avatars/avatar-male.png](https://cdn.sentione.com/chat-ui-launcher/avatars/avatar-male.png)',
        showNearBubble: true,
        showInHeader: false,
      },
    },
appearance.avatarobjectObject to config avatar
        src: '[https://cdn.sentione.com/chat-ui-launcher/avatars/avatar-male.png](https://cdn.sentione.com/chat-ui-launcher/avatars/avatar-male.png)  ',
        showNearBubble: true,
        showInHeader: false,
      },
appearance.avatar.srcappearance.avatar.srcUrl to custom avatar
appearance.avatar.showNearBubblebooleanDisplay setting of the avatar near to message bubble
appearance.avatar.showInHeaderbooleanDisplay setting of the avatar in chat header
appearance.iconsobject
appearance.icons.openButtonIconstringURL to icon which will be displayed as open conversation window button
appearance.icons.minimizeButtonIconstringURL to icon which will be displayed as minimize conversation window button
appearance.icons.closeButtonIconstringURL to icon which will be displayed as close and reset conversation window button
appearance.icons.activeSendMessageButtonIconstringURL to icon which will be displayed as send message button (active)
appearance.icons.disabledSendMessageButtonIconstringURL to icon which will be displayed as send message button (disabled - not active)
appearance.icons.autoScrollToBottomIconstringURL to icon which will be displayed as scroll to bottom button
appearance.stylesobjectObject to setup custom styles of webchat (how webchat will looks like inside)
styles: { url: '\<https\://cdn.sentione.com/chat-ui-launcher/themes/dark-blue.css>  ', themeColor: 'red' }\`\`\`  
appearance.styles.urlstringUrl to custom stylesheet
styles: { url: '\<https\://cdn.sentione.com/chat-ui-launcher/themes/dark-blue.css>  ', }\`\`\`  
appearance.styles.customCssstringCustom css rulesstyles: { customCss: '.chat-header__title {color: red;}', }
appearance.styles.themeColorstringMain color of webchatstyles: { themeColor: 'red', }
appearance.outerStylesobjectObject to setup mostly position of webchat on host page. These styles will be injected to host page
appearance.outerStyles.urlstringUrl to custom stylesheet
appearance.outerStyles.customCssstringCustom css rules
appearance.headerTitlestringUser will see it in header
appearance.endOfConversationLabelstringUser will see this label as end of conversation message
appearance.startNewConversationButtonLabelstringUser will see this label in button to start new conversation
appearance.conversationWindowWidthstringField to set up width of the conversation window{conversationWindowWidth: '300px'}
appearance.conversationWindowHeightstringField to set up height of the converstion window{conversationWindowHeight: '300px'}
appearance.inputPlaceholderstringPlaceholder of the input
autoStartobject or numberField to setup auto open chat behavior.
  • no field or -1 - chat will stay closed until user click to open manually
  • 0 - chat will open automatically
  • above 0 - chat will open after defined time
autoStart: {
      delayTime: 2000,
    },
```or  

`autoStart: 2000`  
autoStart.delayTimenumberTime to delay automatically open chatautoStart: 2000
initialMessageobjectObject to set up initial message. Thanks to it, bot can start from specific block
    initialMessage: {
        extraData: { process: "process_name" },
      },
initialMessage.extraDataobjectInitial extraData that will be sent to bot to start conversationextraData: { process: "process_name" }
initialMessage.delayTimenumber

There is posibility to start conversation automatically (send initialMessage) even if conversation window is closed without opening.

Available from v234

For example
delayTime = 2000 and auto open is disabled, webchat after 2s will send initial message with extradata to API, without opening webchat. When user decide to open conversation window, will see already started conversation.

If this setting is enabled, after each page refresh, webchat will send initialMessage after specified time so consider using this option with conversationHistory setting (read more below) to avoid to many messages from bot in conversation window.

conversationHistory'load' | 'abandon' | 'no-load'Setting to provide what webchat should do with conversation history.
Load - conversation history will be loaded (default behaviour)
Abandod - previous conversation will be abandoned
No-load - previous conversation will be continued but without loading conversatio history
silenceMessageobject or numberOption to setup behaviour to handle missing message from a user
silenceMessage: { delayTime: 2000
},

```or  

`silenceMessage: 2000`  
silenceMessage.delayTimenumberDelay value to send message while user is not responding
silenceMessage: {
    delayTime: 2000
}
silenceMessage.extraDataobjectObject that will be send to bot while user is not responding
silenceMessage: {
    delayTime: 2000,
    text: "",
    extraData: {"process:" :"X"}
}
silenceMessage.maxRepetitionnumberValue to specify how many silence message webchat should send in one conversation turn. For example with setting maxRepetition = 1, webchat will send only one silence message in one conversation turn. Remember that delayTime and (one of) extraData or text is required to turn on silence message mechanism. Field available from version 214
silenceMessage: {
    delayTime: 2000,
    extraData: {"process:" :"X"}, maxRepetition: 1
}
everyMessageobject
everyMessage.extraDataobjectField to pass extraData object with every message from user to bot. If extraData from silenceMessage or initialMessage is used, object will be merged, and more specific (silenceMessage and initialMessage) will overwrite the same keys in object
actionButtonsobjectObject to define which action buttons should be visible
actionButtons: {
    conversationWindow: {
       minimize: true
},
}
actionButtons.conversationWindow.minimizebooleanShow or hide button to minimize conversation window
actionButtons: {
    conversationWindow: {
       minimize: true
},
}
actionButtons.conversationWindow.resetAndMinimizebooleanShow or hide button to reset (clear) conversation and minimize conversation window
actionButtons: {
    conversationWindow: {
       resetAndMinimize: true
},
}
languagestring ('en' | 'pl')Language to use by default, this is mostly important when errors occur (for example message can't be sent)'en'
scrollOptionsobject
scrollOptions.scrollTostring ('topOfMessage' or 'bottom')

The scroll behavior control option provides users with the ability to determine how the WebChat interface responds when encountering lengthy messages. Traditionally, the conversation window would scroll automatically to the bottom, displaying the latest message at the bottom of the visible area. However, with this new feature, users can now modify this behavior based on their preference.

When the option is set to "Scroll to Top," the WebChat interface will intelligently scroll upwards to display the beginning of the lengthy message at the top of the conversation window. This is particularly useful when users want to read the entire message from the beginning, ensuring they don't miss any crucial details. By having the message displayed at the top, users can easily review the content without the need to manually scroll upwards.

On the other hand, when the option is set to "Scroll to Bottom" (the default behavior), the conversation window will continue to scroll automatically to the bottom, displaying the latest message at the bottommost visible area. This behavior is suitable for users who prefer to focus on the most recent message without interruptions, allowing them to keep up with the ongoing conversation seamlessly.

The new scroll behavior control option can be easily accessed and modified within the WebChat configuration settings.

sessionobject
session.hostSessionCookiebooleanTo enable conversation session cookie managed by frontend (better support by browsers like Safari)
  • announcementBanner* (from v246)
objectThe Announcement Banner feature provides a customizable topbar in the web chat interface. It can be configured to display important messages or announcements with options for markdown content, link behaviors, and dismissible actions.
announcementBanner.contentstring
  • Required*. The text or markdown content to display in the banner.
announcementBanner.closablebooleanOptional. If true, displays a close button for the banner. Default: true.
announcementBanner.markdownLinkBehavior'new-tab' | 'callback'Optional. Defines how markdown links behave. Default: 'new-tab'.
announcementBanner.onlyOncebooleanOptional. If true, the banner is shown only once per conversation. Default: true.
indicatorobject
indicator.unreadMessagesobject
indicator.unreadMessages.symbolstringSymbol will be presented in Orange dot (color, size, can be changes via custom CSS). Can be empty, then orange dot will be empty.
indicator.unreadMessages.delayTimenumberDuration in milliseconds for the 'orange dot' popup delay. (Default is 1000ms)
indicator.encouragementMessageobject
indicator.encouragementMessage.textstringThe text provided will appear within a 'message bubble' and can be left empty. The maximum length allowed for the text is 300 characters
indicator.encouragementMessage.delayTimenumberDuration in milliseconds for the 'message bubble' popup delay. (Default is 1000ms)
translationsobject

Method getTranslations() can be used to get all translation keys.

onOpenChatfunctionCallback function
onOpenChat: () => {
        console.log('Chat is open');
    }
onCloseChatfunctionCallback function
onCloseChat: () => {
        console.log('Chat is closed');
    }
onInitializedChatfunctionCallback function
onInitializedChat: () => {
        console.log('Chat is initialized');
    }
onOpeningButtonClickfunctionCallback function
onOpeningButtonClick: () => {
        console.log('User clicked to open chat');
    }
onConversationEndfunctionCallback function
onConversationEnd: () => {
        console.log('End of conversation');
    }
onMinimizeConversationWindowfunctionCallback function
onMinimizeConversationWindow: () => {
        console.log('User minimized conversation window');
    }
onCloseConversationWindowfunctionCallback function
onCloseConversationWindow: () => {
        console.log('User closed conversation window');
    }
onMessageSentfunction: (message: string) => void;
onMessageReceivedfunction: (response) => void;
onDestroyedChatvoidCallback method. Method is called after the webchat has been removed from a web page. This method can be used to perform any cleanup tasks that may be necessary after the webchat has been removed.
onDestroyedChat: () => {  
    console.log('Chat destroyed an session is destroyed');  
}
updateConfigvoidMethod to update webchat configuration, without reloading webchat.
getTranslationsobjectMethod that allows developers to programmatically retrieve the currently active translation object.
onAnnouncementBannerLinkClickdatavoidTriggered when a link in the banner is clicked
onAnnouncementBannerClosedatavoidTriggered when the banner is closed

sentiOneChat object available methods

On object window.sentiOneChat host page can call several methods to control state of webchat conversation window

Available methods:

Field name (required)ArgumentsReturn typeDescription
isChatOpen()booleanMethod to check if conversation window is opened or closed
isChatInitialized()booleanMethod to check if webchat is available and initialized on page or not
initWebChat(configurationObject)configurationObject - objectvoidMethod to initialize webchat component on page
open()voidMethod to open (show) chat conversation window.
close()voidMethod to close conversation window and reset current conversation (it will also turn off silence Message functionality)
minimize()voidMethod to close conversation window but without closing/resting current conversation (if silence message functionality is turned on, after receive new message from bot, conversation window will open automatically)
destroy()voidMethod to remove at all webchat from page, and reset conversation session. To do an action after destroy, use onDestroyedChat() callback
updateConfigconfigurationObjectvoid

Method to update webchat configuration, without reloading webchat. Example:

window.sentiOneChat.updateConfig({
      everyMessage: {  
        extraData: {  
          token: 'new_token'  
        }  
      }  
    })

`

sendEventpayload?: { label?: string; extraData?: object }void

Triggers a technical bot event. If label is provided, the user sees a system badge; if not, nothing is shown in chat. Sends extraData
to bot Flow for routing and operations.


extraData from initialMessage and everyMessage is merged with extraData from the event
payload.


Because the system can process only one message at a time, it does not support parallel event submissions; therefore, the host
page is responsible for guarding against repeated or concurrent sendEvent() calls.


Supported Commands

  • BlockingOperation - will block (hide) input during long operation (mostly integration).
  • AnnouncementBanner - command allows dynamic control over the banner during a session. This is particularly useful for context-specific messages. Read more here
  • Carousel - Carousel is an interactive element of the webchat interface that allows presentation of content in the form of a horizontal slider with multiple slides. Each slide can contain a title, text, graphics, and action buttons. Users can navigate between slides using buttons or touch gestures (swipe). Read more here

More info: