UI customization

You can localize and customize strings that the Mobile Messaging SDK uses in the UI of your iOS app. The base localization of Pega Mobile Messaging SDK is English. You can modify or override the strings as described below:

If the integrating iOS app project does not yet have a Localizable.strings file in the localization language of choice, perform the following steps:

1. In Xcode, in your iOS app project, click FileNewFile, and then select Resource in the iOS category in the sidebar.
2. Select Strings File from the files, and then click Next.
3. Name the file Localizable, and then click Create.

   After the system creates the file, examine the string definitions as shown in the following table, and then customize the definitions that you want in the Localizable.strings file.

List of localized strings

Customizing Chat appearance

You can also customize the appearance of the messaging screen in your iOS app.

The interface of the PDMTheme class contains the available customizations. You can combine the properties into major groups that group style elements of similar semantics.

 /// The main chat view styles configuration. 
    public let chatView: DigitalMessagingChatSDK.PDMTheme.ChatView 
 /// The message view styles configuration. 
    public let message: DigitalMessagingChatSDK.PDMTheme.Message 
 /// The chat input bar view styles configuration. 
    public let inputBar: DigitalMessagingChatSDK.PDMTheme.InputBar 

You can examine the PDMTheme interface to learn which customizations you can use.

        let configuration = ... 
        let theme = PDMTheme() 
        theme.message.outgoing.background = UIColor.systemGreen 
        theme.message.outgoing.foreground = UIColor.white 
        theme.inputBar.buttons.attachButtonImage = UIImage(systemName: "rectangle.and.paperclip") 
        let chatController = PDMChatViewController(configuration: configuration, theme: theme)

After you pass the PDMTheme instance to the PDMChatViewController instance constructor, the system applies the messaging screen changes. The system does not refelct further changes.

Attributes

The following figure illustrates the common attributes for messages, such as text size, margins, message background, font family, and other attributes mentioned in the table.

The following figure illustrates the common attributes for all messages, such as text size, message background, font family, and other attributes explained in the table:

The following figure illustrates the attributes of document attachments, such as attachment name font, attachment icon, download button icon, and other attributes explained in the table:

The following figure illustrates the attributes of a menu, such as font family, text size, and text color that the following table explains:

The following figure illustrates the attributes of a link button, such as font, background color and other attributes explained in the following table:

The following figure illustrates the attributes of the input text area where the CSR types the message and sends it to the user. The attributes in the following table are of the input text area:

The following figure illustrates the attributes of selected attachments, such as border color, background color, foreground color and other attributes displayed in the following table:

The following figure illustrates the attributes of selected attachments, such as border color, background color, foreground color and other attributes displayed in the following table:

The following figure illustrates the attributes of selected attachments, such as border color, background color, foreground color and other attributes displayed in the following table:

The following figure illustrates the attributes of the Action Menu, such as font family, text size, text color of the button, and other attributes:

The following figure illustrates the attributes of the Chat Dialog, such as font family, text size, text color of the button, and other attributes:

Handling new messages when chat is inactive

You can handle new messages when the chat is inactive. When the system calls thelaunchChat() method, it starts a chat session and sends a new message to the server, and then the system closes the screen launched in the launchChat() method.

When you set backgroundDelegate:

1. The system retains the chat session as long as MainViewController exists.
2. To handle new message, the system makes available as an implementation measure a callback method from the PDMChatBackgroundDelegate extension.

The following SWIFT code is a of handling new messages when the chat is inactive:

import DigitalMessagingChatSDK 
class MainViewController: UIViewController { 
    func launchChat() { 
       let configuration = ... 
       let theme = ... 
       let chatController = PDMChatViewController(configuration: configuration, theme: theme) 
       chatController.backgroundDelegate = self 
       navigationController?.pushViewController(chatController, animated: true) 
    } 
} 
extension MainViewController: PDMChatBackgroundDelegate { 
    func chat(didReceive message: Message) { 
        print("Message received: \(message)") 
    } 
} 

Methods and callbacks

Pega Mobile Messaging SDK provides you with the following methods and callbacks for your Android app in the 8.7.2 version.

iOS Implementation

The implementation of the PDMMenuHandler class. Use this class to toggle menu, request transcript and End session functionality

 public class PDMMenuHandler { 

public init(_ viewController: PDMChatViewController?) {} 
  		 

/// Use this method to end the current session 

public func endSession() {} 
/// Use this method to download the chat transcript 

public func requestTranscript() {}  

/// Use this method to show the actions menu. 

/// If this method is called when the menu is present on the UI, menu will be 	 

/// removed 

public func showActionsMenu() {} 

} 
endSession() function is available in PDMMenuHandler 

Use this method to end the current session 
private var menuHandler: PDMMenuHandler? 

... 

let chatController = PDMChatViewController(configuration: configuration) 
menuHandler = PDMMenuHandler(chatController) 

... 
menuHandler.endSession() // this will request the transcript 

iOS Implementation

public class PDMMenuHandler { 
public init(_ viewController: PDMChatViewController?) {} 	 

/// Use this method to end the current session 
public func endSession() {} 

/// Use this method to download the chat transcript 

public func requestTranscript() {} 

/// Use this method to show the actions menu. 
/// If this method is called when the menu is present on the UI, menu will be 	 

/// removed 
public func showActionsMenu() {} 
} 
requestTranscript () function is available in PDMMenuHandler 
Use this method to request transcript from the server 
private var menuHandler: PDMMenuHandler? 
... 
let chatController = PDMChatViewController(configuration: configuration) 
menuHandler = PDMMenuHandler(chatController) 
... 
menuHandler.requestTranscript() // this will request the transcript 

iOS Implementation

public class PDMMenuHandler { 
public init(_ viewController: PDMChatViewController?) {} 
/// Use this method to end the current session 
public func endSession() {} 
/// Use this method to download the chat transcript 
public func requestTranscript() {}     

/// Use this method to show the actions menu. 
/// If this method is called when the menu is present on the UI, menu will be 	 
/// removed 

public func showActionsMenu() {} 
} 
showActionsMenu () function is available in PDMMenuHandler 
Use this method to show the actions menu 
private var menuHandler: PDMMenuHandler? 
... 
let chatController = PDMChatViewController(configuration: configuration) 
menuHandler = PDMMenuHandler(chatController) 
... 
menuHandler.showActionsMenu() // this will toggle the menu 

iOS Implementation

Chat configuration expects the following parameters:

public init(apiURL: URL, apiID: String, customerToken: String, authProvider: AuthTokenProviderInterface) { 
 open class AuthTokenProviderInterface: AuthTokenProvider { 
 public init(apiId: String, endpoint: String) {} 
 open func getAuthToken(completionHandler: @escaping (String?, Error?) -> Void) {} 
}  

1. Create a class that inherits from AuthTokenProviderInterface.
2. Initialize the class with appId and the URL endpoint.
3. Implement the getAuthToken function to make the request.

   Call completionHandler in a main thread once the request resolves.

Session ID Callback This callback is used to provide a signed JWT authentication Token to the SDK for validating the Customer ID and setting up a chat session.

iOS Implementation

// Implement the showActionsMenu() function in PDMPrivateDataDelegate protocol. 
let chatController = PDMChatViewController(configuration: configuration) 
chatController.privateDataDelegate = self 
extension DemoViewController: PDMPrivateDataDelegate { 
func sessionInitialized(sessionID id: String) { 
        print("Received sessionId: \(id)") 
    } 
}