Functional scope of the iAdvize chat box

iAdvize offers you the opportunity to improve your visitors' conversational experience with a chat box that meets the current design codes of the messaging apps you and your customers use.
 
This article aims at providing you with a clear overview of the functional scope.

 

1. Chat box format

  • 400x650px is the format of the new chat box. This format aims at providing visitors with an enhanced conversational experience.
  • This new chat box is responsive, optimising it for any display resolutions, on any devices, especially smartphones where the chat box is in full screen.

Devices.png

 

2. Chat button

  • We have created a new chat button in bubble format when the chatbox is minimised.
  • We display the number of new agent messages using a dot.

chatbox-notification.gif

3. New conversation thread

  • The following elements have been redesigned:
    • The chat bubbles for both agents and visitors
    • The display of emojis for more visibility 
    • The animation displayed when a respondent writes a message
    • The display of the conversation's start date
    • The display of rich contents (images, attached files, links, ...)

chatbox-conversation.gif

4. Persistence

  • We display the history of past conversations and of the conversation in progress.
  • Messages informing you of the beginning and end of the conversation disappear.

chatbox-history.gif

  • Once the conversation has started, if the visitors minimize the chat window, upon reopening, they will have access to an Unread Messages section, and the focus will be on the first unread messages:

Chatbox.png

5. Continuity

The visitors can be logged-in when they arrive at the website or their mobile app, but they can also choose to log-in during the conversation. For instance, to enable their respondent to access specific information from their profile.

They keep a conversation continuity in both cases, which also works for cross-device
(desktop <> mobile <> tablet).


vktnf0d8.png

LdsuBy6K.png


The visitors can make sure they are logged in by checking their settings panel in the chatbox.

OzgkbdMf.png


6. A new text input field

  • The text input field is now automatically extended as you write your message.
  • When sending messages, you have access to an emoji panel.

chatbox-compozbox__1_.gif

To ensure a smooth and understandable exchange, a visitor will not just be able to send a “space” (or blank character) into the input field to start a conversation or when a conversation is ongoing.


7. Access panel settings

  • The settings panel is available from the area at the top of the chat box.
  • You have fields to fill in visitors' e-mail addresses and allow them:
    • to receive the conversation history via email
    • to be notified by e-mail when agents wrote a new message whilst visitors were offline (asynchronous chat)
  • You have access to GDPR information.
  • You can hide the history of active and past conversations.

chatbox-settings.gif

8. Closing the chatbox

  • Only agents can decide to close conversations first. Visitors can only reduce the chatbox during the conversation.
    However, when an agent closes the conversation on his side, the satisfaction survey appears for the visitor.
    Once the satisfaction survey is completed, the visitor can decide to reduce the chatbox and then close it.

chatbox-reduite-EN01.png

chatbox-reduite-FR02.png




9. WCAG AA compliance (accessibility)

  • The new chat box is accessible to all users, including disabled persons, regardless of the device used (mobile phones, tablets, etc.) or conditions of use (noise level, lighting, etc.).
  • Requirements met by the chat box to be compliant with AA level of WCAG 2.1 Standard:
    • Comply with minimum contrast ratio (builders allow to choose the color, the Brand is responsible to choose colors with a minimum contrast ratio)
    • Anything that appears, disappears, or changes in the notification button & chatbox, has to be announced by the screen reader
    • Any error, alert or information message that appears as a result of a user action should be announced by the screenreader
    • Users should be able to navigate the entire chatbox using the keyboard
    • Users should be able to reduce the chatbox with escape key
    • No duplicated IDs
    • HTML should be structured properly and follow a logical order (based on the entire website)

 

⚠️ Important
  • The following elements can be customised:
    • The main colour (visitors' messages background, header, minimised version of the button) and the secondary colour (sending icon, quick reply)
    • Automatic messages contents (opening messages, error messages, ...)