React Help Desk 2024

An updated version of react-help-desk using React, TailwindCSS, TypeScript and Vite. Credit to the former Front-End team at Onlicar.

Usage

yarn add react-help-desk-tailwindcss-ts # or npm install react-help-desk-tailwindcss-ts

_{To see how it actually works}

import React from 'react'
import HelpDesk from 'react-help-desk-tailwindcss-ts'

// Render HelpDesk (also available in Storybook)
// Make sure your data-name corresponds to the title of the tab

    <HelpDesk defaultTab="home">
                <HelpDesk.Menu>
                    <HelpCircle width="18" height="18" />
                </HelpDesk.Menu>
                <HelpDesk.Content>
                    <div data-name="home">
                        <HelpDesk.Header title="Help Center" />
                        <HelpDesk.Widgets>
                            <HelpDesk.Widget label="FAQ" tab="home">
                                <Book width="20" height="20" />
                            </HelpDesk.Widget>
                            <HelpDesk.Widget label="Tutorials" tab="tutorials">
                                <Youtube width="20" height="20" />
                            </HelpDesk.Widget>
                            <HelpDesk.Widget
                                label="Live Chat Support"
                                onClick={() => action("Live chat initializer if wanted")()}
                                externalAction
                            >
                                <MessageSquare width="20" height="20" />
                            </HelpDesk.Widget>
                        </HelpDesk.Widgets>
                        <FAQ json={faqData} />
                    </div>
                    <div data-name="tutorials">
                        <HelpDesk.Header title="Tutorials" />
                        <Tutorials walkthroughs={tutorials} />
                    </div>
                </HelpDesk.Content>
            </HelpDesk>

In the example used in Storybook, the categories and articles comes from a JSON file.

{
    "categories": [
        {
            "title": "General",
            "articles": [
                {
                    "title": "What is React Help Desk?",
                    "body": "React Help Desk is a set of React components using TailwindCSS and TypeScript designed to be the building blocks of a help desk and self-support system for web apps."
                },
                {
                    "title": "What do I do if I don't know what to do?",
                    "body": "Just do it!"
                }
            ]
        },
        {
            "title": "Tray",
            "articles": [
                {
                    "title": "What widgets are available?",
                    "body": "Right now, there is an FAQ tab and a Tutorials tab.<br /><br />The FAQ tab accepts an object of categories and/or articles that are shown in a collapsible, searchable view.<br /><br />The Tutorials tab has of now been made so that it supports video tutorials or whatever you might feel like to replace it with."
                }
            ]
        },
        {
            "title": "Live chat",
            "articles": [
                {
                    "title": "What is live chat?",
                    "body": "Live chat is a feature that allows you to chat with a support agent in real-time. There a many ways to implement this. <strong><a href='https://www.google.com/search?q=live+chat' target='_blank'>Google live chat</a></strong> and se apps from Zendesk, LiveChat, LiveAgent and many more."
                }
            ]
        }
    ]
}

Features

Help Center tray
Searchable FAQ Articles
Scalable widgets and content