Communication Chat

Overview

The customer requires to build in Appian an integration with WhatsApp Business to receive and send messages between bank clients and the bank executive to solve questions about products, mortgages, doubts, claims, etc. The messages of the conversation would be displayed in an interactive chat implemented in Appian.

The Appian solution is based in three modules:

1. List of conversations (left side) - Appian
2. Interactive chat where the messages are displayed (right side) - Plugin Component
3. Input field to write the response message (bottom) – Appian

The plugin component is allowing some basic behavior which are expected in a chat as: set the scroll on a specific position: for example, on the bottom when you click a conversation or when you write a new message, or on a specific and dynamic position when you have pending messages to read.
See the readme document to learn how to use it.

Key Features & Functionality

The plugin is intended to provide an interactive chat where the messages received are displayed following the “standard” behaviors that we know in the main modern tools.

The plugin would have the following parameters:

• selectedChat: Chat/conversation selected by the user.
• messagesData: List of messages (paged) that it will be displayed.
• batchSize: Current batch size value.
• batchSizebyDefault: Batch size by default.
• totalCount: Total Count of messages (not only the messages of the batch retrieved).
• ownPhoneNumber: The phone number related to the Whatsapp Business Account or other.
• appianEventType: The event type saved in Appian interface. The plugin component will change the behavior based on it. Options: "event_newMessage", "event_selectedChat" o "event_selectedChatWithMessagesNotRead".
• pluginEventType: The event type saved in the plugin interface. The Appian interface will change the behavior based on it. Option: “event_loadingPreviuosMessages” and "event_selectedMessage".
• controlValue: Text to identify if the control is managed by the plugin or Appian.
• messageByDefaultForPendingMessages: Text to display when there are messages pending to read.
• Language: Used to format the dates displayed in the messages. Options: “es_ES” or “en_US”.
• containerBackgroundColor: Background color for the main container. Default: #FFFFFF
• colorOwnMessages: Background color for own messages. Default: #DCF8C6
• colorOwnSelectedMessages: Background color for the border in the own selected messages.
• colorExtMessages: Background color for external messages. Default: #FFFFC4
• colorExtSelectedMessages: Background color for the border in the external selected messages.
• colorHorizontalBar: Background color for the horizontal bar displayed when there are pending messages to read.
• selectableMessages: Flag (true/false) to enable/disable the messages selection functionality.
• selectedMessage: Message Id saved when a message is selected.