Chat UI V3

This feature is the next level for customizing the Chat Window UI. Here in Chat UI V3, users can prepare their own UI for the Chat window by customizing it. The user will be presented with a set of configurable items, such as some features that can be enabled or disabled; libraries that can be enabled or disabled; and the color of chat window items so that the chat window UI appears accordingly.

Chat UI V3 can be divided into two sections:

  • Preview Section
  • Edit Section

Preview Section

The Preview Section contains a dummy chat window that looks similar to the main chat window. When the user edits something in the edit section, the changes are reflected simultaneously in the Preview Section. That way, the user can easily identify the best combination and ]make their chat window UI more attractive. It gives a real-time experience of how the chat window looks, and accordingly, the user can

customize the UI based on their ideas.

Figure 1. Figure 101 - Chat UI V3 Preview Section

Edit Section

The Edit Section contains all the items that are present in the chat window and are listed as configurable. Take, for example, the Image Upload button; there is a yes or no under Image Upload; if you select yes, it will appear in the chat window; if you select no, it will not. The user can also change the colors of the sections in the chat window.

There are two tabs in the Edit Section: Light and Dark.

The users can color code items in the chat window based on the theme. List of configuration options available to the users are:

  • BigFix AEX Profile
  • User Profile
  • UI Libraries (Enable/Disable)
  • Enable or Disable Notification, Send Image, Chat History, Switching to another Theme, Mic.
  • Select Colors for Header, Message Bubble, Buttons(Options), Chat window Background, Icons, Textbox etc.,

Once the configuration is complete, click on the Save button, and all the changes will be saved into the database.

The file created is an index.html file and based on the configuration it will be uploaded into IBM COS. When user enables Chat UI V3, the chat window loads by downloading the index.html file from IBM COS.

Figure 2. Figure 102 - Chat UI V3 Edit Section