The following diagram is a wireframe design depicting the top bar of IGWEB. The icon at the far right, will active the live chat feature when it is clicked on:
Figure 8.1: Wireframe design depicting IGWEB's top bar
The following diagram is a wireframe design depicting the live chat box. The chat box consists of an avatar image of the agent named "Case" along with its name and title. A close button is included in the top-right corner of the chat box. Users may enter their message to the agent in the bottom text area that has the placeholder text Type your message here. The conversation with the human and the bot will be presented in the middle area of the chat box:
Figure 8.2: Wireframe design of the live chat box