test-react-chat-widget

This project is a React component to allow chat between a customer an an agent in the contact centre.

The contact centre uses EdgeTier chat which we interface with using a separate module containing a react hook. More information on how this works can be found on the edgetier-chat-hook.

The aim of this is to simplify how we add chat on to our pages, providing a consistent experience across UIs.

We also aim to automate as much as possible before sending a customer to a real contact centre agent, deflecting customers where appropriate to self serve pages to complete as many tasks as possible without intervention from our side.

The widget will also allow a customer to log in, display their bookings and contain quick links to manage my booking for those.

Widget Flow

The widget will show different "pages" based on the properties of the customer passed in.

If the customer is not logged in, it will prompt them to log in. There are two methods of logging in, email address and password, and magic login link.

If the customer is logged in and has no bookings, we will show links to the landing page or their account page.

If the customer is logged in and has bookings, we will display their bookings with links to amend them.

If the customer starts a chat, we will hide the bookings to allow the cc agent to take over.

Development

This project uses a demo page which can be used to test out changes which can be started with:

npm start

This will fire up a demo page at http://localhost:3000 which will live reload when changes are made.

The demo page provides mock functions which provide functionality which would usually be found in the application using the chat widget.

By default the demo page will not automatically communicate with EdgeTier. Instead a mock hook has been implemented which will reply to all messages after a short time delay. This prevents engineers from having to log in to chat interfaces just to develop the widget.

The widget can be tested against EdgeTier's pre-prod environment. This is useful when testing features which do not exist in our mock environment. To do this, start the demo page with

npm run start:preprod

Further documentation

Further documentation can be found in the /docs folder. Some of the more important documents are:

• Releasing

Project Layout

• /public/ - This is purely to allow a demo application to be run for local development.
• /src/ - This houses all of the code for the component.
• /src/devTools - This folder is for any functionality which is not part of the core component, but will enhance the development experience.
• /src/Widget.js - This is the entry point for the widget. This is what is built and exported.
• /src/App.js - This is the entry point for the dev server. This is not part of the built bundle and is only for development purposes.