Nuance Messaging UI Framework

Handling Minimized state of engagement

User should be provided with a feedback of new agent messages when messaging window is minimized. Once the messaging window is minimized its application responsibility to query for new agent messaging within the application viewWillAppear method, as user navigates from one screen to another this code should be reexecuted for every screen user is in.

/**
      You must initialize the GetMessageAPI in your viewController viewDidLoad method.
  **/
  override func viewDidLoad() {
        super.viewDidLoad()
        self.message = GetMessageAPI.getInstance();
      }

/**
  To continue receiving agent message while in minimized state and to display a restore button,
  refer the following code snippet
**/
override func viewWillAppear(_ animated: Bool) {
        // Check if there is an engagement session in progress
        if(NuanMessaging.getInstance().getChatProgress()) {
        //continue pooling for new agent messages , also can display a restore button here
            self.message.getMessages({ (response, error) in
              //If there is a new message from agent, handle it by showing a counter on the restore button or a notification prompt etc
              //In case if agent closes the session , need to add the following code so that webview is notfied accordingly in case of hybrid engagement
              //also app can hide the restore button and display chat live button.
              if(response?.messageType == "chatLine") {
                    ChimeSound.sharedInstance.playSound()
                }
              else if(response?.messageType == "stateChange") {
                    let stateProp:String! = "state"
                    let stateText: String! = "display.text"
                    if(response?.getProperty(stateProp) == "closed") {
                        DispatchQueue.main.async {
                            self.webView.evaluateJavaScript("window.top.inqFrame.Inq.FlashPeer.closeChat()", completionHandler: nil)
                        }
                    }
                }
            })
        }

    }


 override func viewWillDisappear(_ animated: Bool) {
 //Very important to cancel the GetMessage pooling when viewController is about to disappear and moves to new viewController
        if(NuanMessaging.getInstance().getChatProgress()) {
            message.cancelGetMessages()
        }
    }

  

Plain Bubble View in Converstation Screen

Plain bubble Converstation View along with an optional Icon for agent is the default view displayed for Messaging UI.

Styling Send Button

Properties to customize send button is exposed from SendButtonProperties class. Application has to pass an instance of this class having modified properties into the framework.

Following properties in SendButtonProperties lets you change the look and feel of Send Button.

Styling Customer Text Input Field

Properties to customize Customer Input field is exposed from CustomerInputFieldProperties class. Application has to pass an instance of this class having modified properties into the framework.

Following properties in CustomerInputFieldProperties lets you change the look and feel of Input Field.

Name	type	default	description
hintText	String	Type your message here..	Lets you change the hint text displayed in the input field.
borderColor	UIColor	UIColor.white	Use this property to change the border color.
borderWidth	Int	0	Use this property to change the border width.
cornerRadius	Int	5	Use this property to change the corner Radius.
inputMessageBackgroundColor	UIColor	UIColor.white	Change background color of Input Field.
textColor	UIColor	UIColor.gray	Change text foreground color.
placeHolderColor	UIColor	UIColor.gray	Lets you change the hinttext foreground color.
containerBackgroundColor	UIColor	UIColor.gray	Lets you change the background color of the container where input text field and Send button is displayed.
dismissKeyBoardOnReturn	boolean	true	Lets you control the action that happens when user press return key.
sendMsgOnReturn	boolean	false	Lets application control if message need to send when pressing return key on keyboard.
inputFieldLeftMargin	int	3	Lets you set the input field left margin value.
inputFieldRightMargin	int	13	Lets you set the input field right margin.
inputFieldTopMargin	int	4	Lets you set the input field top margin.
inputFieldBottomMargin	int	3	Lets you set the input field bottom inputFieldTopMargin.
textFieldFont	UIFont	UIFont(name: kFontName, size: 14.0)	Lets you change the input field font size.
textFieldTopPadding	Int	0	Lets you change the input field top padding.
textFieldLeftPadding	Int	0	Lets you change the input field left padding.
textFieldBottomPadding	Int	0	Lets you change the input field bottom padding.
textFieldRightPadding	Int	0	Lets you change the input field right padding.
keyboardType	UIKeyboardType	UIKeyboardType.default	Lets you change the input keyboard type.
isCharacterLimitRequired	bool	false	lets you configure the display of character limit view when user engaged with VA.
limitDisplayThreshold	int	100	lets you configure the threshold at which character limit view displays.
characterLimitForVA	int	120	Maximum character that can be entered
characterLimitBottomPadding	int	5	Character limit view bottom padding
characterLimitRightPadding	int	5	Character limit view right padding
characterLimitTopPadding	int	5	Character limit view top padding
characterLimitViewWidth	int	28	Character limit view width
characterLimitTextColor	UIColor	gray	Character limit view text color
characterLimitTextFont	UIFont	UIFont(name: "Helvetica", size: 8)	Character limit view font style
inputTextAlignment	NSTextAlignment	NSTextAlignment.left	Allows application to set the input text alignment

Styling Footer Separation Bar

Properties to customize Footer Separation bar is exposed from FooterSeparationProperties class. Application has to pass an instance of this class having modified properties into the framework.

Following properties in FooterSeparationProperties lets you change the look and feel.

Styling Title Bar

Properties to customize Title is exposed from TitleBarProperties class. Application has to pass an instance of this class having modified properties into the framework.

Following properties in TitleBarProperties lets you customize the title bar.

SDK comes with two place holder title bar buttons. which application can use to add some action other than messaging actions

var p4 = TitleBarProperties()
  p4.leftTitleBarIcons = [TitleBarElement.minimize.rawValue, TitleBarElement.logoImage.rawValue]
  p4.rightTitleBarIcons = [TitleBarElement.close.rawValue, TitleBarElement.email.rawValue,TitleBarElement.chime.rawValue]
  vc.setTitleBarProperties(properties: p4)

Styling Transcript View

Properties to customize Transcript View is exposed from MessagingViewProperties class. Application has to pass an instance of this class having modified properties into the framework.

Following properties in MessagingViewProperties lets you customize the conversation bubbles and transcript container

Name	type	default	description
footerViewHeight	int	70	Lets you change the footer view height
bubbleAnimationStyle	UITableViewRowAnimation	UITableViewRowAnimation.fade	Lets you change animation style for transcript bubbles.
messagingTranscriptBackgorundColor	UIColor	UIColor.white	Lets you change transcript container background color
agentIconImageData	Data	Nuance Logo	Use this property to set the image that gets displayed along with agent message.
isAgentIconRequired	Bool	false	Set this property to hide the icon displayed along with agent message.
agentMessageBackgroundColor	UIColor	UIColor.white	Use this property to change agent conversation bubble background color.
agentMessageTextColor	UIColor	UIColor.black	Set the agent conversation bubble text foreground color.
agentMessageBorderColor	UIColor	UIColor.black	Lets you change the agent conversation bubble border color.
agentMessageCornerRadius	Int	5	Lets you change the agent conversation bubble corner radius.
agentMessageBorderWidth	Int	2	Lets you change the border width.
agentMessageFontStyle	UIFont	UIFont(name: "Helvetica", size: 17.0)!	Lets you change the agent conversation bubble font style.
agentTopPadding	Int	15	Lets you change the agent conversation bubble top padding.
agentBottomPadding	Int	15	Lets you change the agent conversation bubble bottom padding.
agentLeftPadding	Int	15	Lets you change the agent conversation bubble left padding.
agentRightPadding	Int	15	Lets you change the agent conversation bubble right padding.
agentMessageLeftMargin	Int	24	Lets you change the agent conversation bubble left margin.
agentMessageRightMargin	Int	50	Lets you change the agent conversation bubble right margin.
agentMessageTextAlignment	NSTextAlignment	NSTextAlignment.left	Lets you change the agent message text alignment.
customerMessageBackgroundColor	UIColor	UIColor(red: 50.0/255.0, green: 53.0/255.0, blue: 149.0/255.0, alpha: 1.0)	Use this property to change customer conversation bubble background color.
customerMessageTextColor	UIColor	UIColor.white	Set the customer conversation bubble text foreground color.
customerMessageBorderColor	UIColor	UIColor(red: 50.0/255.0, green: 53.0/255.0, blue: 149.0/255.0, alpha: 1.0)	Lets you change the customer conversation bubble border color.
customerMessageCornerRadius	Int	5	Lets you change the customer conversation bubble corner radius.
customerMessageBorderWidth	Int	2	Lets you change the border width.
customerMessageFontStyle	UIFont	UIFont(name: "Helvetica", size: 17.0)!	Lets you change the customer conversation bubble font style.
customerTopPadding	Int	15	Lets you change the conversation conversation bubble top padding.
customerBottomadding	Int	15	Lets you change the conversation conversation bubble bottom padding.
customerLeftPadding	Int	15	Lets you change the conversation conversation bubble left padding.
customerRightPadding	Int	15	Lets you change the conversation conversation bubble right padding.
customerMessageLeftMargin	Int	50	Lets you change the customer conversation bubble left margin.
customerMessageRightMargin	Int	24	Lets you change the customer conversation bubble right margin.
customerMessageTextAlignment	NSTextAlignment	NSTextAlignment.left	Lets you change the customer message text alignment.
systemMessageTextColor	UIColor	UIColor.black	Lets you change the system message text foreground color.
systemMessageBackgroundColor	UIColor	UIColor.white	Lets you change the system message background color.
systemMessageBorderColor	UIColor	UIColor.white	Lets you change the system message border color.
systemMessageCornerRadius	int	0	Lets you change the system message border radius.
systemMessageBorderWidth	int	0	Lets you change the system message border width.
systemMessageAllignment	NSTextAlignment	NSTextAlignment.left	Lets you change the system message text alignment.
systemMessageTopPadding	Int	0	Lets you change the system message top padding.
systemMessageBottomPadding	Int	0	Lets you change the system message bottom padding.
systemMessageLeftPadding	Int	0	Lets you change the system message left padding.
systemMessageRightPadding	Int	0	Lets you change the system message right padding.
systemMessageFontStyle	UIFont	UIFont(name: "Helvetica", size: 17.0)!	Lets you change the system text font style and size.
showCustomMessageImage	UIFont	UIFont(name: "Helvetica", size: 17.0)!	Flag to show the system message icon
centerAlignCustomMessageImage	UIFont	UIFont(name: "Helvetica", size: 17.0)!	Flag to center align system icon default is top
messageInfoImageWidth	UIFont	UIFont(name: "Helvetica", size: 17.0)!	set system icon width
messageInfoImageHeight	UIFont	UIFont(name: "Helvetica", size: 17.0)!	set system icon height
agentTypingTextColor	UIColor	UIColor.black	Lets you change the agent typing message text foreground color.
agentTypingFontStyle	UIFont	UIFont(name: "Helvetica", size: 17.0)!	Lets you change the agent typing text font style and size.
agentTypingMessageBackgroundColor	UIColor	UIColor.white	Lets you change the agent message background color.
agentTypingMessageBorderColor	UIColor	UIColor.white	Lets you change the agent message border color.
agentTypingMessageCornerRadius	int	0	Lets you change the agent message border radius.
agentTypingMessageBorderWidth	int	0	Lets you change the agent message border width.
agentTypingMessageAllignment	NSTextAlignment	NSTextAlignment.left	Lets you change the agent message text alignment.
agentTypingMessageTopPadding	Int	0	Lets you change the agent message top padding.
agentTypingMessageBottomPadding	Int	0	Lets you change the agent message bottom padding.
agentTypingMessageLeftPadding	Int	0	Lets you change the agent message left padding.
agentTypingMessageRightPadding	Int	0	Lets you change the agent message right padding.
agentTypingMessageRightPadding	Int	0	Lets you change the agent message right padding.
agentTypingMessageRightPadding	Int	0	Lets you change the agent message right padding.
agentTypingAccessibilityMessage	String		Lets you set the typing accessibility message.
infoMessageLeftMargin	Int	10	Typing/System message view left margin.
infoMessageTopMargin	Int	1	Typing/System message view top margin.
infoMessageRightMargin	Int	0	Typing/System message view right margin.
agentNameFontStyle	UIFont	UIFont(name: "Helvetica", size: 17.0)!	Lets you change the agent name text font style and size.
agentNameTextColor	UIColor	agentMessageTextColor	Lets you change the agent name text color.
htmlLinkColor	UIColor	UIColor.blue	Lets you change url link color.
htmlLinkGreyScaleModeColor	UIColor	UIColor.blue	Lets you url color when device is in grey scale mode.
setSpaceBetweenBubble	Int	0	Lets you change the space between bubbles.
isChatFromBottom	bool	false	Setting this to true render the message from bottom and pushes up as new messages arrives
groupMsgs	bool	false	Setting this to true group all customer and agent messages
spaceBetweenGroupingCells	Int	0	Set the space between the grouped cells
hugCustomerMessageContent	boolean	false	Enable content hugging for customer messages
hugAgentMessageContent	boolean	false	Enable content hugging for agent messages
delayRenderingVAResponse	Double	0.1	Allows you to delay the rendering of VA responses.

Styling Transcript bubbles using background Image

Properties to set background streachable image to Transcript bubbles is exposed from MessagingViewProperties class.

Following properties in MessagingViewProperties lets you customize the conversation bubbles using background image.

Styling Speech bubbles view

Properties to enable and style speech Transcript bubbles are exposed from MessagingViewProperties class.

Following properties in MessagingViewProperties lets you customize the conversation bubbles using speech view. Speech view will also turn on background image for transcript bubbles (refer the above section).

Styling Email dialog

Properties to customize Email dialog is exposed from EmailViewProperties class. Application has to pass an instance of this class having modified properties into the framework.

Following properties in EmailViewProperties lets you customize Email Dialog.

Loading Properties

SDK has properties exposed to display a loading while restoring the previous conversation. Application has to pass an instance of this class having modified properties into the framework.

Messaging App String Properties

Properties to change the various default strings is exposed from CustomerInformationMessages class. Application has to pass an instance of this class having modified properties into the framework.

Displaying Customer & Agent name in bubbles.

To display customer and agent name in the bubbles, please set showNameInBubbles boolean property of MessagingViewProperties class.

Displaying and styling timestamp.

Below properties lets you customize the look and feel of the time stamp displayed underneath the Message bubble.

Properties are found in MessagingViewProperties class

Styling FileUpload screen.

SDK exposes following properties to style File Upload screen

Styling Virtual Agent Response.

SDK lets you customize VA resposne in various ways.

Properties are found in MessagingViewProperties class

Name	type	default	example
displayNinaLinksAsButtons	bool	false	Setting this property to true will display a nina links as buttons.
htmlLinkButtonFont	UIFont	nil	Lets you set the link button font.
linkButtonBackgroundColor	UIColor	UIColor.clear	Lets you set button background color.
linkButtonTextColor	UIColor	UIColor.black	Lets you set link button text color.
linkButtonCornerRadius	Int	3	Lets you set button corner radius.
linkButtonBorderColor	UIColor	UIColor.gray	Lets you set link button border color.
linkButtonBorderWidth	Int	2	Lets you set link button border width.
linkButtonBackgroundImage	Data	nil	Lets you set link button background image.
linkButtonTextAllignment	UIControl.ContentHorizontalAlignment	.center	This property lets you set the text button text alignment.
linkButtonLeftPadding	CGFloat	5	This property lets you set left padding of button text.
showFirstImageOut	Bool	false	Lets you display the first image from VA response out side above bubble.
vaImageBorderWidth	Int	0	Lets you style the border of the image which is displayed outside the bubble.
vaImageCornerRadius	Int	0	Lets you style the corner radius of the image which is displayed outside the bubble.
vaImageLeftMargin	Int	16	Lets you set the left margin of the image which is displayed outside the bubble.
vaImageRigthMargin	Int	16	Lets you set the right margin of the image which is displayed outside the bubble.
vaImageBorderColor	UIColor	UIColor.white	Lets you set border color of the image which is displayed outside the bubble.
vaImageBackgroundColor	UIColor	UIColor.white	Lets you set background color of the image which is displayed outside the bubble.
vaImageheight	Int	100	Lets you set the height of the image which is displayed outside the bubble.
vaImageMode	UIView.ContentMode	.center	Lets you set the content mode of the image which is displayed outside the bubble.
inlineBackgroundColor	UIColor	UIColor.clear	Lets you change the background color of the image displayed inline.
inlineImageheight	Int	120	Lets you change the height of inline image.
inlineImagewidth	Int	160	Lets you change the width of inline image.
inlineImageMode	UIView.ContentMode	.center	Lets you content mode of inline image.

Displaying Disclaimer Header

Disclaimer text appears at the top of the chat window immediately after messaging window is displayed.

Properties:
    showDisclaimerHeader: Bool = false
    autoHideDisclaimerHeader : Bool = true
    autoHideHeaderTime : Int = 3
    disclaimerText: String = ""
    disclaimerTextColor : UIColor = UIColor.black
    disclaimerTextFontStyle : UIFont = UIFont(name: "Helvetica", size: 14.0)!
    disclaimerTextAlignment:NSTextAlignment = NSTextAlignment.center
    

Displaying Survey Confirmation Dialog.

Use the below properties to show and display a confirmation dialog.

NuanMessaging.getInstance().getAgentHiddenMessageHandler().addHiddenMessage("HIDDEN_MESSAGE_1")

var messages: Set = [ "Test_Message1", "Test_Message2", "Test_Message3", "Test_Message4"]
NuanMessaging.getInstance().getAgentHiddenMessageHandler().setHiddenMessages(messages)

NuanMessaging.getInstance().getCustomerHiddenMessageHandler().addHiddenMessage("HIDDEN_MESSAGE_1")

var messages: Set = [ "Test_Message1", "Test_Message2", "Test_Message3", "Test_Message4"]
NuanMessaging.getInstance().getCustomerHiddenMessageHandler().setHiddenMessages(messages)

var vc:NuanceMessagingViewController;

        if(NuanMessaging.getInstance().getChatProgress()) {
            vc = restoreMessagingViewController(webview:nil);
        } else {
            vc = launchMessagingViewController(params: getEngageParameters())
        }
        setupMessagingUIProps(vc:vc)
        self.present(vc, animated: false, completion: nil)




        func setupMessagingUIProps(vc:NuanceMessagingViewController){

          var p4 = TitleBarProperties()
          let myImage1 = UIImage(named:"ic_action_close.png")
          let imageData1: Data = UIImagePNGRepresentation(myImage1!)!
          p4.closeImageData = imageData1 as Data
          let myImage2 = UIImage(named:"ic_action_mail.png")
          let imageData2: Data = UIImagePNGRepresentation(myImage2!)!


          p4.emailImageData = imageData2 as Data
          let myImage3 = UIImage(named:"ic_action_share.png")
          let imageData3: Data = UIImagePNGRepresentation(myImage3!)!
          p4.shareImageData = imageData3 as Data

          let myImage4 = UIImage(named:"minimize.png")
          let imageData4: Data = UIImagePNGRepresentation(myImage4!)!
          p4.minimizeImageData = imageData4 as Data

          p4.minimumSpaceBetweenTitleButton = 2;

          vc.setTitleBarProperties(properties: p4)


          var p1 = MessagingViewProperties();
          p1.isAgentIconRequired = false

          vc.setTranscriptViewPropeties(properties: p1);

          var p2 = EmailViewProperties()

          vc.setEmailViewProperties(properties: p2)

          var p3 = CustomerInputFieldProperties();
          p3.containerBackgroundColor = UIColor.black
          p3.borderColor = UIColor.lightGray
          p3.borderWidth = 2
          vc.setCustomerInputProperties(properties: p3)

          var p5 = SendButtonProperties()

          vc.setSendButtonProperties(properties: p5)


    }