UI Branding

Following config properties allows clients to Brand the out of the box Chat window

  1. AppConfigProperties
  2. AppStringProperties
  3. TopBarConfigProperties
  4. OverFlow Menu ConfigProperties
  5. FooterConfigProperties
  6. TranscriptProperties
  7. ConfirmationModel
  8. EmailModel
  9. Print Window

appConfigProps

 { 
                               "appConfigProps": {

                               },
                               "appStringProps": {

                               }
                            
                           }
                        
  • enableHugging

    Setting it to true enables hugging of message bubble content.

  • enableMsgGrouping

    Setting it to true enables grouping of adjacent agent or adjacent customer bubbles.

  • displayAgentAlias

    Setting it to true will display agent alias information inside or outside the bubble.

  • agentAliasPosition

    Allows client app to decide position of agent alias info.
    outsideAbove - Displays outside and above the agent bubble
    outsideBelow - Displays outside and below the agent bubble
    withinTop - Displays inside but top of the bubble
    withinBottom - Displays inside but bottom of the bubble


  • enableMsgGroupingAgentAlias

    Setting it to true enables grouping of agent alias displayed within a bubble. This is applicable only when "agent alias" is either "withinTop" or "withinBottom"

  • displayCustomerName

    Setting it to true will display customer name information inside or outside the bubble.

  • customerNamePosition

    Allows client app to decide position of customer name info.
    outsideAbove - Displays outside and above the customer bubble
    outsideBelow - Displays outside and below the customer bubble
    withinTop - Displays inside but top of the bubble
    withinBottom - Displays inside but bottom of the bubble

  • enableMsgGroupingCustomerAlias

    Setting it to true enables grouping of customer alias displayed within a bubble. This is applicable only when "customer alias" is either "withinTop" or "withinBottom"

  • displayDateAndTime

    Setting it to true will display date and time information inside or outside the bubble.

  • dateTimePosition

    Allows client app to decide position of customer name info.
    outsideAbove - Displays outside and above the customer bubble
    outsideBelow - Displays outside and below the customer bubble
    withinTop - Displays inside but top of the bubble
    withinBottom - Displays inside but bottom of the bubble

  • enableMsgGroupingDateTime

    Setting it to true enables grouping of date and time displayed within a bubble. This is applicable only when "dateTimePosition" is either "withinTop" or "withinBottom"

  • timeStampFormat

    Allows client app to set the timestamp format.
    month, dd yyyy - April, 3 2020
    HH:mm - 16:03
    'yyyy': Year
    'MM': Month in numeric format
    'mm': Minutes
    'dd' : Date
    'HH' : 24 hour format
    'H' : 24 hour format with out preceding 0
    'hh' : 12 hour format
    'h' : 12 hour format with out preceding 0
    'ss' : Seconds
    'month': Month name

  • displayAgentAliasInRichWidget

    Setting it to true will display agent name when rich widget is rendered as inline.

  • displayDateAndTimeInRichWidget

    Setting it to true will display date and time information when rich widget is rendered as inline.

  • showTypingAnimation

    Setting it to true will show typing animation

  • setAgentSpeechView

    Setting it to true will turn on the speech view for agent bubble.

  • setCustomerSpeechView

    Setting it to true will turn on the speech view for customer bubble.

  • speechImgPosition

    Allows the client app to set the position of speech avatar.
    top - aligns to the top of the bubble
    center - aligns to the center of the bubble
    bottom - aligns to the bottom of the bubble


  • showSeperatorTransfer

    Allows app to set seperator view for agent transfer or virtual agent to agent transfer system messages.

  • showSeperatorExit

    Allows app to set seperator view for agent exit system message.


  • showSeperatorConference

    Allows app to set seperator view for conference system message.

  • showConvHeader

    Allows app control the visibility of conversation header , by default it is turned on.

  • showSeperatorHeader

    Allows app set a seperator view for conversation header.


  • headerTimeFormat

    Allows client app to set the header time format.

  • queuedMsgInAsync

    Allows app control the visibility of queued system messages when engagement is async, by default it is turned off.

  • showStoppedTyping

    Allows app control the visibility of agent stopped typing system message , by default it is turned on.

  • showTransferInitiateMessage

    Allows app control the visibility of agent transfer stared system message, by default it is turned on.

  • showTransferStatusMessage

    Allows app control the visibility of agent transfer status system message, by default it is turned on.

  • showConferenceModeMessage

    Allows app control the visibility of conference mode system message, by default it is turned on.

  • openerDelay

    Allows app control to control the delay when displaying openers message , delay will kick in when there is more thatn one opener. by default its is 3000ms. Its an integer value

  • showAsyncChatExitMsg

    Allows app control the visibility of agent exit system message during an async chat, by default is is turned off.

  • showAsyncChatResolvedMsg

    Allows app control the visibility of agent resolved system message during an async chat, by default is is turned off.

  • closeConfirmation

    Allows app to control if a confirmation modal should appear when customer closes the chat window.

  • showHeaderDisclaimer

    Allows app to display a disclaimer text in the chat window.

  • showFooterDisclaimer

    Allows app to display a disclaimer text or image below other transcript messages.

  • dragMode

    Allow the dragging of chat window to either "horizontal" only or whole viewport

  • vaTypingIndiatorDelay

    Allow app to control the display of typing message when engaging with VA. By default it is 0ms. Typing indicator will be displayed after the provided ms value. Its an integer value

  • displayPreChatSurvey

    Set to true if BR configured prechat survey should be displayed when customer launches chat.

  • startAutoEngagement

    Set to true will start the engagement automatically upon chat ui is displayed. autoEngageText must be set for auto engagement.

appStringProps

Layout styles

  • frameStyles

    Json object with key values representing the styles of chat window.

     { 
                                   "appConfigProps": {
    
                                   },
                                   "appStringProps": {
    
                                   }
                                   "frameStyles": {
                                    "background":"#ff0000"
                                   }
                               }
                            

topBarConfig

 { 
                     "appConfigProps": {

                     },
                     "appStringProps": {

                     }
                     "frameStyles": {
                      "background":"#ff0000"
                     },
                     "topBarConfig": {
                        "topBarSettings": {
                       }
                     }
                  }
            
  • topBarSettings.topBarType

    Chat window support "material" and "normal" type.


  • topBarSettings.materialItemPosition

    Position of items that are placed within material bar.
    left: items align to left side of the material container.
    center: items align to the center of the material container.
    adjacent: By default items are stacked vertically but in this mode items align to left but arranged one after other horizontally

  • topBarSettings.leftTopBarItems

    Array of topbar icon object. Each item in the array describes a title bar icon and type which is align to the left side of top bar.

  • topBarSettings.rightTopBarItems

    Array of topbar icon object.Each item in the array describes a title bar icon and type which is align to the right side of top bar.

  • topBarSettings.centerTopBarItems

    Array of topbar icon object. Each item in the array describes a title bar icon and type which is align to the center of top bar.

  • topBarSettings.materialBarItems

    Array of topbar icon object. Each item in the array describes a material bar icon and type which displayed as per the topBarSettings.materialItemPosition setting.

  • topBarSettings.extendedTopBarItems

    Array of extended TopBar buttons that is displayed below the TopBar items.


    Print, Email, Chime, Minimize, Close are supported in extended TopBar. Each item supports imgName or imgSrc and text


Top Bar Menu Config
  • type

    Type of the top bar icon
    "Minimize": minimize the chat window
    "Close": close the chat window
    "Logo": Chat Window logo
    "Print": Launches Print window
    "Email": Launches an email address modal
    "Chime": Chime sound on/off toggle
    "Overflow": Overflow icon is displayed, upon user click. Item in the topBarSettings.overFlowItems is displayed
    "Title": Chat Window title also display a sub title
    "Description": Description text that is displayed in the material area.
    "Status": Allows chat window to display engagement status in the top bar. Except for disconnectText and QueueText, Status is dynamically determined by the chat window. Status also displays a sub status item.

    For OverFlow items only type (excluding Overflow,Title,Description,Status, Logo) ,imgName or imgSrc, text are used

    Chime: Images provided for chime on or off toggle should be appended with _on and _off

  • imgName

    Name of the image stored in skin folder

  • imgSrc

    A url pointing to the image

  • text

    text is only applicable when type is Description or Title top bar menu item.

    text is also applicable for over flow items.

    text is also applicable for extended Top or Footer items.

  • mode

    Supported values are fullScreenOnly. Default is empty, When setting mode,this top bar element is displayed only when chat window in full screen mode

  • subText

    subText is only applicable when type is Title top barmenu item.

  • agentSubtext

    agentSubtext is only applicable when type is Status menu item. Displays a sub text to status top bar item.

  • vaSubtext

    vaSubtext is only applicable when type is Status menu item. Displays a sub text to status top bar item.

  • queueText

    queueText is only applicable when type is Status menu item. Displays queue text to status top bar item.

  • queueSubText

    agentSubtext is only applicable when type is Status menu item. Displays a sub text to status top bar item.

  • disconnectText

    disconnectText is only applicable when type is Status menu item. Displays disconnect text to status top bar item.

  • disconnectSubtext

    agentSubtext is only applicable when type is Status menu item. Displays a sub text to status top bar item.

  • conferenceSubText

    agentSubtext is only applicable when type is Status menu item. Displays a sub text to status top bar item.

  • hiddenStates

    PreEngagement,InEngagement,PostEngagement. Its an array with the provided engagement states. Based on the states in this property, buttons will be visible or not. This is not applicatble to OverFlow Type.

Top Bar styles config
Top Bar Drag config

OverFlow configs

 { 
                     "appConfigProps": {

                     },
                     "appStringProps": {

                     }
                     "frameStyles": {
                      "background":"#ff0000"
                     },
                     "topBarConfig": {
                        "topBarSettings": {
                       }
                     },
                     "overFlowMenus": [
                       { 

                       },
                    ]
                  }
            

overFlowMenus contain an array of over flow configs, This works in conjuction with the type: Overflow top bar menu config or type: Overflow

in footer item config

  • position

    Position where over flow menus appear, in case of top bar values can be either "TopBarLeft" or "TopBarRight". In case of footer it is "FooterLeft"

  • items

    Array of overflow items object. Each item in the array describes an overflow menu item.

  • menuStyle

    Json object describing overflow menu css styles as key value pairs.

FooterConfig

 { 
                     "appConfigProps": {

                     },
                     "appStringProps": {

                     }
                     "frameStyles": {
                      "background":"#ff0000"
                     },
                     "topBarConfig": {
                        "topBarSettings": {
                       }
                     },
                     "footerConfig":{
                      footerSettings:{

                      }
                    }
                  }
            
Footer Item Config
  • type

    Type of the Footer item
    "Input": input box to take the customer input
    "Send": Send Button
    "Overflow": Overflow button

  • imgName

    Name of the image stored in skin folder

  • imgSrc

    A url pointing to the image

  • disabledImgName

    Name of the image stored in skin folder that will be displayed when this item is disabled.

  • disabledImgSrc

    A url pointing to the image that will be displayed when this item is disabled.

  • buttonEnabledState

    Control when this button is enabled. Allowed values are
    "inputEnabled": Only when customer input item is enabled
    "textEntered":Only When customer is typing or input has value in it
    "always": Always enabled

Footer styles config

transcriptConfig

 { 
                     "appConfigProps": {

                     },
                     "appStringProps": {

                     }
                     "frameStyles": {
                      "background":"#ff0000"
                     },
                     "topBarConfig": {
                        "topBarSettings": {
                       }
                     },
                     "footerConfig":{
                      footerSettings:{

                      }
                    },
                    "transcriptConfig":{

                    }
                  }
            
  • transcriptConfig.customerTextAlignment

    Allows app to set the customer text alignment ie left or right, by default it is right.


  • transcriptConfig.openerSpeechAvatarConfig

    Json object describing the avatar image that is displayed for agent bubble.
    imgname - Name of the image that is present in the nuance chat skin folder
    imgsrc - Url pointing to an image source

  • transcriptConfig.agentSpeechAvatarConfig

    Json object describing the avatar image that is displayed for agent bubble.
    imgname - Name of the image that is present in the nuance chat skin folder
    imgsrc - Url pointing to an image source
    agentColors - Array of colors that will be used in avatar instead of an image
    agentIntial - Should avatar display Agent name intial Letter in the avatar, This works only when colors are used for agent avatar

  • transcriptConfig.vaSpeechAvatarConfig

    Json object describing the avatar image that is displayed for virtual agent bubble.
    imgname - Name of the image that is present in the nuance chat skin folder
    imgsrc - Url pointing to an image source

  • transcriptConfig.customerSpeechAvatarConfig

    Json object describing the avatar image that is displayed for customer bubble.
    imgname - Name of the image that is present in the nuance chat skin folder
    imgsrc - Url pointing to an image source

    customerColors - Array of colors that will be used in avatar instead of an image customerIntial - Should avatar display customer name intial Letter in the avatar, This works only when colors are used for customer avatar
Transcript Container styles
Agent Bubble styles
Customer Bubble styles
Speech View styles
typing bubble styles
System bubble styles
Rich Widget Card settings
Rich Widget Form settings
Rich Widget QR settings
Rich Widget Receipt settings
Rich Widget Other settings
Rich Widget styles
Conversation Header styles
Disclaimer Message

Confirmation Modal

  • modalButtonStyles

    Json object representing css styles of modal window button.

     { 
                                   "appConfigProps": {
    
                                   },
                                   "appStringProps": {
    
                                   }
                                   "modalButtonStyles": {
                                    
                                   }
                               }
                            

  • modalTextStyles

    Json object representing css styles of confirmation text .

Email Modal

  • modalButtonStyles

    Json object representing css styles of modal window button.

     { 
                                   "appConfigProps": {
    
                                   },
                                   "appStringProps": {
    
                                   }
                                   "modalButtonStyles": {
                                    
                                   },
                                   "emailModelTextStyles" :{
    
                                 }
                               }
                            

  • emailModelTextStyles

    Json object representing css styles of email text.

  • emailModelInputStyles

    Json object representing css styles of email input.

Print Window Config

Copyright © 2018. All right reserved