# UI Branding

Following config properties allows clients to Brand the out of the box Chat 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

- ##### agentAlias

  Set the agent alias message for opener's.

- ##### startTyping

  Set the agent typing system message

- ##### stoppedTyping

  Set the agent stopped typing system message.

- ##### openerText

  Set the opener text which will override the portal configured opener script.

- ##### messagingNotAvailable

  Set the message that gets displayed when service is not available.

- ##### messagingDisconnected

  Set the message that gets displayed when network is diconnected.

- ##### messagingReconnected

  Set the message that gets displayed when network is reconnected.

- ##### messagingFailed

  Set the message that gets displayed when network is failed to reconnect.

- ##### customerName

  Set the customer name.

- ##### serviceQueued

  Set the message that is showed when service is queued. This will not be used when Nuance backed is configured to send dynamic service queued messages

- ##### agentAvailable

  Set the message that gets displayed when chat is moved to agent from a queue.

- ##### agentExitText

  Set the message that gets displayed when agent exit the engagement.

- ##### agentResolvedText

  Set the message that gets displayed when agent resolves the engagement.

- ##### agentInitiateTransfer

  Set the message that gets displayed when transfer is initiated either from va to live agent or live agent to another agent.

- ##### agentTransferStatusText

  Set the message that gets displayed when transfer completed and new agent joins the engagement.

- ##### agentLostText

  Set the message that gets displayed when agent lost from an on going chat.

- ##### conferenceModeText

  Set the message that gets displayed when the engagement has become a conference.

- ##### closeConfirmationText

  Close modal window confirmation text.

- ##### emailInputLabel

  Email modal label text.

- ##### closeModalNegativeButtonText

  Close modal window positive button text.

- ##### closeModalPositiveButtonText

  Close modal window positive button text.

- ##### emailModalNegativeButtonText

  Close modal window positive button text.

- ##### emailModalPositiveButtonText

  Close modal window positive button text.

- ##### disclaimerHeaderText

  Tex that appears in the discliamer area.

- ##### disclaimerFooterText

  Text that appears in the footer discliamer area.

- ##### autoEngageText

  Text that appears in Agent Interface when engagement is automatically created.

### 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

- ##### topBarConfig.topBarStyles

  Json object describing top bar css styles as key value pairs.

- ##### topBarConfig.overFlowMenuItemStyle

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

- ##### topBarConfig.iconStyles

  Json object describing the icon css styles as key value pairs.

- ##### topBarConfig.titleStyles

  Json object describing the title css styles as key value pairs.

- ##### topBarConfig.logoStyles

  Json object describing the logo css styles as key value pairs.

- ##### topBarConfig.descriptionStyles

  Json object describing the description css styles as key value pairs.

- ##### topBarConfig.topBarContainerStyles

  Json object describing the css styles for whole top bar container including the extended top bar items.

- ##### topBarConfig.extendedTopBarStyles

  Json object describing the css styles extended top bar.

- ##### topBarConfig.extendedTopBarItemStyles

  Json object describing the css styles extended top bar items.

##### Top Bar Drag config

- ##### topBarSettings.adjustDragBarLeft

  Set Drag bar left position.

- ##### topBarSettings.adjustDragBarWidth

  Set Drag bar width value.

- ##### topBarSettings.adjustDragBarHeight

  Set Drag bar height value.

### 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:{

                          }
                        }
                      }

- ##### footerSettings.multiline

  Displays multiline text area as the customer input. By default it is single line input control

- ##### footerSettings.autoGrow

  Text area grows and its background container grows as user continues to new lines.

- ##### footerSettings.placeholder

  Set the place holder text that is displayed.

- ##### footerSettings.sendButtonText

  Allows app to set text in the send button area. App can also display an image instead of text

- ##### footerSettings.typingTimeout

  Customer typing time out for SDK to send "customer stopped typing" message to agent. By default it is 4000

- ##### footerSettings.leftFooterItems

  Array of footer item object.

- ##### footerSettings.rightFooterItems

  Array of footer item object.

- ##### footerSettings.extendedFooterItems

  Array of extended Footer buttons that is displayed below the footer items.

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

##### 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

- ##### footerConfig.footerStyles

  Json object describing footer container css styles in key value pairs.

- ##### footerConfig.inputStyles

  Json object describing customer input area css styles in key value pairs.

- ##### footerConfig.sendButtonStyles

  Json object describing send button css styles in key value pairs.

- ##### footerConfig.disableStateStyle

  Json object describing footer buttons css styles in key value pairs when in disabled state. This style is applied to all footer buttons excluding input when disabled. This wont be used if there is a imgName or imgSrc and disabledImgName or disabledImgSrc is present.

- ##### footerConfig.enableStateStyle

  Json object describing footer buttons css styles in key value pairs when in enabled state. Only used if disableStateStyle is set.

- ##### topBarConfig.footerContainerStyles

  Json object describing the css styles for whole footer container including footer and extended footer.

- ##### topBarConfig.extendedFooterStyles

  Json object describing the css styles extended footer.

- ##### topBarConfig.extendedFooterItemStyles

  Json object describing the css styles extended footer items.

### 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

- ##### transcriptConfig.transcriptAreaStyles

  Json object describing transcript container div css styles in key value pairs.

- ##### transcriptConfig.bubbleStyleProperties.groupedBubbleMargin

  Set the margin value that will be used when bubbles are grouped. Default is 5px

##### Agent Bubble styles

- ##### transcriptConfig.bubbleStyleProperties.agentBubbleLeftMargin

  Set the left margin value of agent bubble. Default is 0px.

- ##### transcriptConfig.bubbleStyleProperties.agentBubbleRightMargin

  Set the right margin value of agent bubble. Default is 100px.

- ##### transcriptConfig.bubbleStyleProperties.agentBubbleBottomMargin

  Set the bottom margin value of agent bubble. Default is 15px.

- ##### transcriptConfig.agentAliasStyles

  Json object describing agent alias info text css styles in key value pairs.

- ##### transcriptConfig.dateTimeStyles

  Json object describing date time info text css styles in key value pairs.

- ##### transcriptConfig.agentBubbleStyles

  Json object describing agent bubble div css styles in key value pairs.

- ##### transcriptConfig.agentBubbleAfterStyles

  Json object describing agent bubble after selector css styles in key value pairs.

- ##### transcriptConfig.agentBubbleBeforeStyles

  Json object describing agent bubble before selector css styles in key value pairs.

##### Customer Bubble styles

- ##### transcriptConfig.bubbleStyleProperties.customerBubbleLeftMargin

  Set the left margin value of customer bubble. Default is 100px.

- ##### transcriptConfig.bubbleStyleProperties.customerBubbleRightMargin

  Set the right margin value of customer bubble. Default is 3px.

- ##### transcriptConfig.bubbleStyleProperties.customerBubbleBottomMargin

  Set the bottom margin value of customer bubble. Default is 15px.

- ##### transcriptConfig.customerNameStyles

  Json object describing customer name info text css styles in key value pairs.

- ##### transcriptConfig.dateTimeStyles

  Json object describing date time info text css styles in key value pairs.

- ##### transcriptConfig.customerBubbleStyles

  Json object describing customer bubble div css styles in key value pairs.

- ##### transcriptConfig.customerBubbleAfterStyles

  Json object describing customer bubble after selector css styles in key value pairs.

- ##### transcriptConfig.customerBubbleBeforeStyles

  Json object describing customer bubble before selector css styles in key value pairs.

##### Speech View styles

- ##### transcriptConfig.speechAvatarStyles

  Json object describing customer name info text css styles in key value pairs.

##### typing bubble styles

- ##### transcriptConfig.typingStyleProperties.typingLeftMargin

  Set the left margin value of typing bubble. Default is 0px.

- ##### transcriptConfig.typingStyleProperties.typingBottomMargin

  Set the right margin value of typing bubble. Default is 15px.

- ##### transcriptConfig.typingStyleProperties.typingTopMargin

  Set the bottom margin value of typing bubble. Default is 5px.

- ##### transcriptConfig.typingViewStyles

  Json object describing typing bubble css styles in key value pairs.

- ##### transcriptConfig.typingElipsisStyles

  Array of Json object describing typing elipsis css styles in key value pairs.

##### System bubble styles

- ##### transcriptConfig.systemStyleProperties.systemLeftMargin

  Set the left margin value of system bubble. Default is 0px.

- ##### transcriptConfig.systemStyleProperties.systemBottomMargin

  Set the right margin value of system bubble. Default is 15px.

- ##### transcriptConfig.systemStyleProperties.systemRightMargin

  Set the bottom margin value of system bubble. Default is 5px.

- ##### transcriptConfig.systemStyleProperties.systemTopMargin

  Set the bottom margin value of system bubble. Default is 0px.

- ##### transcriptConfig.systemViewStyles

  Json object describing system bubble css styles in key value pairs.

- ##### transcriptConfig.systemViewQueueStyles

  Json object describing system bubble for queue state css styles in key value pairs.

- ##### transcriptConfig.systemViewExitStyles

  Json object describing system bubble for exit state css styles in key value pairs.

- ##### transcriptConfig.systemViewDeniedStyles

  Json object describing system bubble for denied state css styles in key value pairs.

- ##### transcriptConfig.systemViewLostStyles

  Json object describing system bubble for lost state css styles in key value pairs.

- ##### transcriptConfig.systemViewTransferStartedStyles

  Json object describing system bubble for transfer started state css styles in key value pairs.

- ##### transcriptConfig.systemViewTransferJoinedStyles

  Json object describing system bubble for transfer joined state css styles in key value pairs.

- ##### transcriptConfig.systemViewConferenceStyles

  Json object describing system bubble for conference state css styles in key value pairs.

- ##### transcriptConfig.systemViewNetworkStyles

  Json object describing system bubble for network disconnected or reconnected state css styles in key value pairs.

- ##### transcriptConfig.systemImageConfig

  Application can set a Json object which describes the image configuration for each system state. System states that can be set are "queued", "denied", "exit", "transferInit", "transferJoined", "lost", "conf", "networkFailed", "networkDisconnected", "networkReconnected"

       {

                          "transcriptConfig":{
                              systemImageConfig:{
                               "exit":{
                                "imgsrc":"http://localhost:8080/exit.png"
                              }
                            }
                          }
                        }

##### Rich Widget Card settings

- ##### transcriptConfig.richStyleProperties.cardViewLeftMargin

  Set the left margin value of rich view card widget. Default is 0px. This is applicable only when rich widget json specifies it as card.

- ##### transcriptConfig.richStyleProperties.cardViewBottomMargin

  Set the right margin value of rich view card widget. Default is 15px. This is applicable only when rich widget json specifies it as card.

- ##### transcriptConfig.richStyleProperties.cardViewRightMargin

  Set the bottom margin value of rich view card widget. Default is 0px. This is applicable only when rich widget json specifies it as card.

- ##### transcriptConfig.richStyleProperties.cardViewTopMargin

  Set the bottom margin value of rich view card widget. Default is -10px. This is applicable only when rich widget json specifies it as card.

##### Rich Widget Form settings

- ##### transcriptConfig.richStyleProperties.formViewLeftMargin

  Set the left margin value of rich view card widget. Default is 0px. This is applicable only when rich widget json specifies it as form.

- ##### transcriptConfig.richStyleProperties.formViewBottomMargin

  Set the right margin value of rich view card widget. Default is 15px. This is applicable only when rich widget json specifies it as form.

- ##### transcriptConfig.richStyleProperties.formViewRightMargin

  Set the bottom margin value of rich view card widget. Default is 0px. This is applicable only when rich widget json specifies it as form.

- ##### transcriptConfig.richStyleProperties.formViewTopMargin

  Set the bottom margin value of rich view card widget. Default is -10px. This is applicable only when rich widget json specifies it as form.

##### Rich Widget QR settings

- ##### transcriptConfig.richStyleProperties.qrViewLeftMargin

  Set the left margin value of rich view card widget. Default is 0px. This is applicable only when rich widget json specifies it as quick reply.

- ##### transcriptConfig.richStyleProperties.qrViewBottomMargin

  Set the right margin value of rich view card widget. Default is 15px. This is applicable only when rich widget json specifies it as quick reply.

- ##### transcriptConfig.richStyleProperties.qrViewRightMargin

  Set the bottom margin value of rich view card widget. Default is 0px. This is applicable only when rich widget json specifies it as quick reply.

- ##### transcriptConfig.richStyleProperties.qrViewTopMargin

  Set the bottom margin value of rich view card widget. Default is -10px. This is applicable only when rich widget json specifies it as quick reply.

##### Rich Widget Receipt settings

- ##### transcriptConfig.richStyleProperties.receiptViewLeftMargin

  Set the left margin value of rich view card widget. Default is 0px. This is applicable only when rich widget json specifies a receipt for customer transition.

- ##### transcriptConfig.richStyleProperties.receiptViewBottomargin

  Set the right margin value of rich view card widget. Default is 15px. This is applicable only when rich widget json specifies a receipt for customer transition.

- ##### transcriptConfig.richStyleProperties.receiptViewRightMargin

  Set the bottom margin value of rich view card widget. Default is 0px. This is applicable only when rich widget json specifies a receipt for customer transition.

- ##### transcriptConfig.richStyleProperties.receiptViewTopMargin

  Set the bottom margin value of rich view card widget. Default is -10px. This is applicable only when rich widget json specifies a receipt for customer transition.

##### Rich Widget Other settings

- ##### transcriptConfig.richStyleProperties.otherViewLeftMargin

  Set the left margin value of rich view card widget. Default is 0px. This is applicable only when rich widget json did not specify a widget type.

- ##### transcriptConfig.richStyleProperties.otherViewBottomMargin

  Set the right margin value of rich view card widget. Default is 15px. This is applicable only when rich widget json did not specify a widget type.

- ##### transcriptConfig.richStyleProperties.otherViewRightMargin

  Set the bottom margin value of rich view card widget. Default is 0px. This is applicable only when rich widget json did not specify a widget type.

- ##### transcriptConfig.richStyleProperties.otherViewTopMargin

  Set the bottom margin value of rich view card widget. Default is -10px. This is applicable only when rich widget json did not specify a widget type.

##### Rich Widget styles

- ##### transcriptConfig.richStyleProperties.richCardViewStyles

  Json object describing Rich card container view css styles in key value pairs. This is applicable only when rich widget json specify a widget type as card.

- ##### transcriptConfig.richStyleProperties.richQRViewStyles

  Json object describing Rich Quick reply container view css styles in key value pairs. This is applicable only when rich widget json specify a widget type as quick reply.

- ##### transcriptConfig.richStyleProperties.richFormViewStyles

  Json object describing Rich form container view css styles in key value pairs. This is applicable only when rich widget json specify a widget type as form.

- ##### transcriptConfig.richStyleProperties.richReceiptViewStyles

  Json object describing Rich receipt container view css styles in key value pairs. This is applicable only when rich widget json specify a receipt for customer transition.

- ##### transcriptConfig.richStyleProperties.richOtherViewStyles

  Json object describing Rich widget container view css styles in key value pairs. This is applicable when rich widget json did not specify a widget type.

##### Conversation Header styles

- ##### transcriptConfig.headerStyleProperties.headerLeftMargin

  Set the left margin value of header view. Default is 0px.

- ##### transcriptConfig.headerStyleProperties.headerBottomMargin

  Set the right margin value of header view. Default is 15px.

- ##### transcriptConfig.headerStyleProperties.headerRightMargin

  Set the bottom margin value of header view. Default is 5px.

- ##### transcriptConfig.headerStyleProperties.headerTopMargin

  Set the bottom margin value of header view. Default is 0px.

- ##### transcriptConfig.headerViewStyles

  Json object describing header view css styles in key value pairs.

##### Disclaimer Message

- ##### transcriptConfig.disclaimerHeaderStyleProperties.disclaimerLeftMargin

  Set the left margin value of disclaimer view. Default is 40px.

- ##### transcriptConfig.disclaimerHeaderStyleProperties.disclaimerBottomMargin

  Set the right margin value of disclaimer view. Default is 15px.

- ##### transcriptConfig.disclaimerHeaderStyleProperties.disclaimerRightMargin

  Set the bottom margin value of disclaimer view. Default is 40px.

- ##### transcriptConfig.disclaimerHeaderStyleProperties.disclaimerTopMargin

  Set the bottom margin value of disclaimer view. Default is 15px.

- ##### transcriptConfig.disclaimerHeaderViewStyles

  Json object describing disclaimer view css styles in key value pairs.

- ##### transcriptConfig.disclaimerHeaderImageConfig

  Json object describing the disclaimer icon that is displayed along with disclaimer text.
  imgname - Name of the image that is found in the nuance chat skin folder
  imgsrc - Url pointing to an image source

- ##### transcriptConfig.disclaimerHeaderImageStyles

  Json object describing disclaimer image css styles in key value pairs.

- ##### transcriptConfig.disclaimerFooterStyleProperties.disclaimerLeftMargin

  Set the left margin value of disclaimer view. Default is 40px.

- ##### transcriptConfig.disclaimerFooterStyleProperties.disclaimerBottomMargin

  Set the right margin value of disclaimer view. Default is 15px.

- ##### transcriptConfig.disclaimerFooterStyleProperties.disclaimerRightMargin

  Set the bottom margin value of disclaimer view. Default is 40px.

- ##### transcriptConfig.disclaimerFooterStyleProperties.disclaimerTopMargin

  Set the bottom margin value of disclaimer view. Default is 15px.

- ##### transcriptConfig.disclaimerFooterViewStyles

  Json object describing disclaimer view css styles in key value pairs.

- ##### transcriptConfig.disclaimerFooterImageConfig

  Json object describing the disclaimer icon that is displayed along with disclaimer text.
  imgname - Name of the image that is found in the nuance chat skin folder
  imgsrc - Url pointing to an image source

- ##### transcriptConfig.disclaimerFooterImageStyles

  Json object describing disclaimer image css styles in key value pairs.

### 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

- ##### printWindowConfig

  Json object representing css styles for modal window button.

       {
                                     "appConfigProps": {

                                     },
                                     "appStringProps": {

                                     }
                                     "printWindowConfig": {

                                     }
                                 }

- ##### printWindowConfig.logoConfig

  imgName: Name of the image stored in skin folder
  imgSrc: Url pointing to the image

- ##### printWindowConfig.transcriptTitle

  Title text that is displayed in the print window header, defaults to "Chat Transcript".

- ##### printWindowConfig.transcriptTitleStyles

  Json object representing css styles for Transcript Title element.

- ##### printWindowConfig.transcriptLogoStyles

  Json object representing css styles for Transcript Logo element.

- ##### printWindowConfig.transcriptAgentAliasStyles

  Json object representing css styles for element that display agent alias.

- ##### printWindowConfig.transcriptTextStyles

  Json object representing css styles for element that display agent/customer text.

- ##### printWindowConfig.transcriptCustomerNameStyles

  Json object representing css styles for element that display customer name.