{"id":13631933,"url":"https://github.com/5punk/react-slack-chat","last_synced_at":"2025-04-06T17:12:14.166Z","repository":{"id":12096979,"uuid":"70028928","full_name":"5punk/react-slack-chat","owner":"5punk","description":"[UPDATED] A Server-less Beautiful Gooey / Material Design Slack Chat Web Integrating Widget.","archived":false,"fork":false,"pushed_at":"2023-01-03T18:23:28.000Z","size":10584,"stargazers_count":153,"open_issues_count":26,"forks_count":51,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-30T14:11:15.090Z","etag":null,"topics":["bot","chat-widget","custom-hook","material","react-chat","react-slack-chat","slack"],"latest_commit_sha":null,"homepage":"https://5punk.github.io/react-slack-chat/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/5punk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-05T04:05:53.000Z","updated_at":"2025-01-16T22:51:24.000Z","dependencies_parsed_at":"2023-01-13T16:47:06.484Z","dependency_job_id":null,"html_url":"https://github.com/5punk/react-slack-chat","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5punk%2Freact-slack-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5punk%2Freact-slack-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5punk%2Freact-slack-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5punk%2Freact-slack-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/5punk","download_url":"https://codeload.github.com/5punk/react-slack-chat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247517915,"owners_count":20951719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bot","chat-widget","custom-hook","material","react-chat","react-slack-chat","slack"],"created_at":"2024-08-01T22:02:45.154Z","updated_at":"2025-04-06T17:12:14.143Z","avatar_url":"https://github.com/5punk.png","language":"SCSS","funding_links":[],"categories":["SCSS"],"sub_categories":[],"readme":"# React Slack Chat\n\n![Build Status](https://travis-ci.org/5punk/react-slack-chat.svg?branch=master)\n![Node Version](https://img.shields.io/badge/node-v9-blue.svg)\n![React](https://img.shields.io/badge/React-v16.8-lightblue.svg)\n![Babel](https://img.shields.io/badge/Babel-v7-yellow.svg)\n[![Known Vulnerabilities](https://snyk.io/test/github/5punk/react-slack-chat/badge.svg)](https://snyk.io/test/github/5punk/react-slack-chat)\n\n[-\u003e DEMO](https://5punk.github.io/react-slack-chat/)\n\nA Server-less Beautiful Gooey / Material Design Slack Chat Web Integrating Widget. This widget can be integrated as a Live Chat / Help Desk / Discussions for Special Interest Sites in **Solo Single Customer Mode (1:1)** or **Community Chat (Shoutbox) Mode**.\n\nGive your users the Perfect Support / Engagement experience, with the comfort of Slack.\n\nThrow your website visitors into a Slack Channel Community, where they can search for answers or get replies from online Slack Users.\n\n![Image of React Component In Action](https://github.com/5punk/react-slack-chat/blob/master/docs/ReactSlackChat.gif?raw=true)\n\n## Pre Requisites\n\n1. Setup a [Slack Bot](https://my.slack.com/services/new/bot) for your team. Note your API token.\n2. [Base64 encode](https://www.base64encode.org/) your newly created API token and fasten your seat-belts.\n\n## Installation\n\nInstall React Slack Chat by\n\n`npm install --save react-slack-chat`\n\n## Example Usage:\n\nDue to the heavy nature of the `getScreenshot` default system hook (Read about hooks below).\nI've split the library into 2 consumables.\n\n- `react-slack-chat`: The default import from consuming this library. There are no default system hooks, you are free to supply your own custom hooks (Documented below).\n\n- `react-slack-chat-with-default-hooks.js`: Has all the default sytem hooks [documented below](https://github.com/5punk/react-slack-chat/blob/master/README.md#default-system-hooks), you can still add and pass custom keyword based action hooks.\n\nConsuming the default import / lite version:\n\n`import { ReactSlackChat } from 'react-slack-chat';`\n\nConsuming the library with [default system hooks](https://github.com/5punk/react-slack-chat/blob/master/README.md#default-system-hooks):\n\n`import { ReactSlackChat } from 'react-slack-chat/dist/react-slack-chat-with-default-hooks';`\n\n\n### [Code snippet](https://github.com/5punk/react-slack-chat/blob/master/src/components/App/App.js) from [Demo App](https://5punk.github.io/react-slack-chat/):\n\n```\n\n\nimport { ReactSlackChat } from 'react-slack-chat';\n\nclass App extends Component {\n  render() {\n    return (\n        \u003cReactSlackChat\n          botName='5punk-unique-id' // VisitorID, CorpID, Email, IP address etc.\n          apiToken='base64-encoded-api-token-119aab37r32r32r316e0296c3da'\n          channels={[\n          {\n            name: 'random'\n          },\n          {\n            name: 'test',\n            id: 'C48SAX4',\n            icon: ''\n          },\n          {\n            name: 'test22',\n            id: '',\n            icon: './logo.svg'\n          }]}\n          helpText='Optional Help Text'\n          themeColor='#856090'\n          userImage='http://www.iconshock.com/img_vista/FLAT/mail/jpg/robot_icon.jpg'\n          debugMode={true}\n          hooks={[\n            {\n              /* My Custom Hook */\n              id: 'getSystemInfo',\n              action: () =\u003e Promise.resolve('MY SYSTEM INFO!')\n            }\n          ]}\n        /\u003e\n      )\n  }\n}\n```\n\n## Options\n\nBelow are a list of props the `\u003cReactSlackChat /\u003e` component accepts\n\n- `botname`: [UNIQUE][required] The name of the user / bot. Can be Visitor ID / Email ID / CorpID / IP address etc.\n- `apiToken`: [REQUIRED][String] The [BASE64 ENCODED](https://www.base64encode.org/) API Token for the bot you created for your team. You can create one [here](https://my.slack.com/services/new/bot).\n- `channels`: [REQUIRED][Array] At least one slack channel object needs to be passed for the first channel view. Refer example above.\n- `userImage`: [REQUIRED][String] An image URL for the user / bot (Does not need to be unique).\n- `helpText`: [OPTIONAL][String] The Help Text visible on the minimized view of the chat Widget.\n- `themeColor`: [OPTIONAL][String] A Hex Color value accent you want the widget to be themed with, stylish stuff.\n- `hooks`: [OPTIONAL][Array] Custom Action Hooks, let's administrators execute commands. Executed in Slack with the format `$=\u003e@botName:HOOK_ID`. Example: `$=\u003e@5punk:getCurrentPath`\n- `debugMode`: [OPTIONAL] Pass a boolean (`true`/`false`) flag to start debug logs.\n- `defaultChannel`: [OPTIONAL][String] Channel name to bypass the channel list and go directly to a specific channel.\n- `defaultMessage`: [OPTIONAL][String] Prepend a default message to the beginning of the message list, such as an automatic greeting when a user first joins the channel.\n- `singleUserMode`: [OPTIONAL][Boolean] Pass a boolean to filter messages so the user only sees his/her messages and replies directed at the user in threads on the Slack side.\n- `closeChatButton`: [OPTIONAL][Boolean] Pass a boolean to add an \"x\" close button in the corner of the chat window instead of going back to channel list and minimizing.\n\n## Default System Hooks\n\n\u003e All hooks can **ONLY be executed by Administrators** only if the site customer / visitor has the chat window open. Admins are usually the **team members** that belong to the Slack Team (Backend).\n\n\u003e All responses of hooks, are **only visible** to the backend Administrators (Visible to the members in the Slack App).\n\nReactSlackChat ships in two flavors. The lite version (default import) ships with **NO** default system hooks.\n\nThe package imported from the path `react-slack-chat/dist/react-slack-chat-with-default-hooks` gives you a few hooks ready to use out of the box.\n\nAn Admin can call any hook with the following command via the Slack App Backend\n\n`$=\u003e@botName:HOOK_ID`\n\nThey're documented below:\n\n- `getCurrentPath`: Returns location of the window of the Client.\n- `getPlatform`: Returns the OS of the Client.\n- `getScreenshot`: Returns the current screenshot of the Client's window / app view.\n\nFeel free to add your own custom hooks. It'll allow you to get any information from the Client or perform any action / function on the Client App.\n\nSubmit your ideas for innovative hooks or feature requests.\n\n## Custom Hooks\n\n\u003e All hooks can **ONLY be executed by Administrators** only if the site customer / visitor has the chat window open. Admins are usually the **team members** that belong to the Slack Team (Backend).\n\n\u003e All responses of hooks, are **only visible** to the backend Administrators (Visible to the members in the Slack App).\n\nAdding custom hooks is easy. Just pass an array of actionable custom hooks as a prop to the library. The default lite version and _heavier_ library that ships with some basic default system hooks, both support custom hooks.\n\nYou're expected to follow the format: \n```\n{\n  id: [STRING],\n  action: [PROMISE] // Any action that you want each customer / visitor on your widget / app to execute\n}\n```\n\nThe promise has to be resolved to allow you to create async functions and actions on different Action IDs the Slack Admins try to execute.\n\nAn example of hooks passed as a prop can be:\n\n```\nhooks={[\n  {\n    /* My Custom Hook */\n    id: 'getIPAddress',\n    action: () =\u003e IPAddress.get() // returns a promise\n  },\n  {\n    id: 'showHelpWizard',\n    action: () =\u003e {\n       return dispatch(showHelpWizard(true))\n        .then(data =\u003e //success)\n        .fail(uILogger.error('FAILED'))\n    } \n  },\n  .\n  .\n  .\n]}\n```\n\n\n## Screenshots\n\n### Screenshot Hook (System Default)\n\n![Image of Custom Hooks](https://github.com/5punk/react-slack-chat/blob/master/docs/screenshotHook.png?raw=true)\n\n### Custom Hooks\n\nRun the same hook against multiple botUsers (Clients). Hook responses are not visible to non admins / Clients.\n\n![Image of Custom Hooks](https://github.com/5punk/react-slack-chat/blob/master/docs/customHooks.png?raw=true)\n\n### Mobile View\n\n![Image of Mobile View](https://github.com/5punk/react-slack-chat/blob/master/docs/mobileView.png?raw=true)\n\n### Tag a Customer\n\n![Image of Special Mentions](https://github.com/5punk/react-slack-chat/blob/master/docs/specialMentions.png?raw=true)\n\n#### Features\n\n- Multiple channel support\n- Attachments\n- No Server needed!\n- Custom Hooks\n- Responsive Mobile support\n- Special message UI if user is mentioned\n- Auto generated user icons if `userImage` is not supplied\n- Material UI with Animations\n- Remembers selected channel\n- Emoji support\n- Auto scroll on new messages\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5punk%2Freact-slack-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F5punk%2Freact-slack-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5punk%2Freact-slack-chat/lists"}