Authors: Konrad Kruk Last update on June 12, 2017 by Ewa Hendrychowska

About the project

LiveChat Dashboard is your go-to solution for visualization of the chat data. Since we know how important it is to monitor the quality of your customer service, we’ve gathered some feedback on the dashboard and updated the project.

The LiveChat Dashboard is implemented as a progressive web app, which means that it’s:

  • fast,
  • secure,
  • available on mobile,
  • reliable (works offline by keeping the last seen data).

Screenshots

The home screen of LiveChat Dashboard

The home screen of LiveChat Dashboard
LiveChat Dashboard for mobile devices

LiveChat Dashboard is now available for mobile devices

Technology stack

The LiveChat Dashboard interface has been built using React.

State management is uses Redux and all asynchronous components are neatly served by redux-saga.

Our stylesheet is encapsulated by React CSS Modules and all source code is bundled with Webpack.

We communicate with back-end services using Socket.io.

Changelog

  • January 31, 2017 Deployed fix for Tizen Web Browser (Samsung TV).
  • January 18, 2017 Working on issues with Tizen Web Browser (Samsung TV).
  • January 10, 2017 Deployed new application and architecture.
  • December 23, 2016 Working on responsive layout.

Future plans

  • Customization Making the dashboard customizable in terms of its contents and layout.
  • Realtime metrics API Releasing the Realtime metrics API.
  • Dashboard UI kit Publishing the dashboard UI React Components.

Resources

Let's talk

  • Konrad Kruk

    Hello there!
    I’m responsible for this project. If you have any questions, needs or comments, please let me know!

    • Doug

      One suggestion that I really wish for is when someone leaves a message (when no agents are online), that the message get forwarded to us via email. We already have a helpdesk, so right now we always manually copy-paste the ticket from LiveChat into our own system before replying. It would be awesome if it forwarded to our system with a Reply-To of the customer’s email address.

    • thanks guys!

    • The LiveChat Dashboard is implemented as a progressive web app, which means it’s:

    • The LiveChat Dashboard is implemented as a progressive web app, which means it’s:

  • Pawel Antkowiak

    Realtime metrics API – sounds very interesting and useful for me :-)

  • Karina

    I have one suggestion. It would be helpful for the desktop version of livechat to pop up as a notification on the corner of the screen when a new chat arrives. Similar to the way facebook messages pop up on your desktop when you are not looking at the facebook screen.

  • Gary Woodhouse

    This is very cool! Looking forward to the enhanced customization and Dashboard API. Currently we use a custom dashboard which I created using the regular API for our internal use. I’ve included an image of what this looks like. If we could build something like this using the dashboard customisation tool, that would be fantastic!

    https://uploads.disquscdn.com/images/03683681034b6ba2e24a485cefca6f6ccd8e8af96b82d506ee604dc1ac11fee9.png

    • Konrad Kruk

      Thank you, Gary, for this visualization! I suppose you need a possibility to display an amount of chats and availability status separately by chosen groups? This is one of our priorities for customization feature.

      • Gary Woodhouse

        Yes that’s exactly right. We separate departments and offices in different countries with groups, so seeing these separately is essential for us. I’d love to see some richer statistics and historical graphing for these customizable stats in the future :)

  • Qish Majid –

    It would be great if we can see which officers are online too
    :)

    • Konrad Kruk

      Thank you for that suggestion! On average, how many of your agents are available online? How would you use this information?

  • Mattias Wester

    This initiative sounds great! Can I read somewhere what is in scope for this? Something we would like to see is number of total chats (already available today) vs capacity. Capacity is the sum of all available agents chats limit.

    • Konrad Kruk

      Excellent idea! Supply – demand metric seems to be useful. We will keep that in mind.

  • Gjermund Svartvatn

    What I miss is better options for reports. We use tags on all inquiries and a typically case gets more than one tag with the result that the reports that we take out is deficient.

  • Christelle Magnaye-Taillens

    Is there anyway we can filter the to “the last 30 days” or more? That would be a good feature, too.

Curious what's
LiveChat all about?

LiveChat delivers an online customer service solution with live support, help desk software and web analytics. Discover why and how 17,000+ companies are using our product.

Meet our customers Chat with us

Thoughts, solutions
and tips from LiveChat Team

We are true believers in teamwork. See what we learned building the same product for over a decade. Join the discussion and share your feedback. We are eager to hear from you!

See our blog