Functional scope - the iAdvize Messenger

iAdvize now offers you the opportunity to improve your visitors' conversational experience with a new 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 this first version 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

5. 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

6. 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

7. Removal of the closing cross icon

  • Visitors can no longer close a conversation. Now, they can only minimise the chat box. The chat box will now disappear if agents close a conversation after visitors complete the satisfaction survey or start browsing a new web page.

 

8. 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 Messenger 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, ...)
  • The following conditions must be met prior to the new chatbox activation:
    • New notifications will have to created
    • The new satisfaction survey must be 100% implemented (or none at all)