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

Give your users the Perfect Support / Engagement experience, with the comfort of Slack.

Throw your website visitors into a Slack Channel Community, where they can search for answers or get replies from online Slack Users.

1. Setup a Slack Bot for your team.
2. Encode / Obfuscate the apiToken if you need to publish it to a public Github Repository.

Note: Do not post / publish your Secret API Token as Plain Text to a public Github Repository.

Install React Slack Chat by

npm install --save react-slack-chat

import { ReactSlackChat } from 'react-slack-chat';

class App extends Component {
  render() {
    return (
        <ReactSlackChat
          botName='5punk-bot'
          apiToken='xoxp-63486550359-63sfes26502-88fewfw67777-119aab37r32r32r316e0296c3da'
          channels={[
          {
            name: 'random'
          },
          {
            name: 'test',
            id: 'C48SAX4',
            icon: ''
          },
          {
            name: 'test22',
            id: '',
            icon: './logo.svg'
          }]}
          helpText='Optional Help Text'
          themeColor='#856090'
          userImage='http://www.iconshock.com/img_vista/FLAT/mail/jpg/robot_icon.jpg'
          debugMode={true}
          hooks={[
            {
              /* My Custom Hook */
              id: 'getSystemInfo',
              action: () => 'MY SYSTEM INFO!'
            }
          ]}
        />
      )
  }
}

Below are a list of props the <ReactSlackChat /> component accepts

• botname: [UNIQUE] [REQUIRED] The name of the user / bot. Can be Visitor ID / IP address etc.
• apiToken: [REQUIRED] The API Token for the bot you created for your team. You can create one here.
• channels: [REQUIRED] At least one slack channel object needs to be passed for the first channel view. Refer example above.
• userImage: [REQUIRED] An image URL for the user / bot (Does not need to be unique).
• helpText: [OPTIONAL] The Help Text visible on the minimized view of the chat Widget.
• themeColor: [OPTIONAL] A Hex Color value accent you want the widget to be themed with, stylish stuff.
• hooks: [OPTIONAL] Custom Action Hooks, let's administrators execute commands. In the format $=>@botName:HOOK_ID. Example: $=>@5punk:getCurrentPath
• debugMode: [OPTIONAL] Pass a boolean (true/false) flag to start debug logs.

All hooks can ONLY be executed by Administrators. Admins are usually the team members that belong to the Slack Team (Backend).

All responses of hooks, are only visible to the backend Administrators (Visible to the members in the Slack App).

ReactSlackChat gives you a few hooks ready to use out of the box. An Admin can call any hook with the following command via the Slack App Backend

$=>@botName:HOOK_ID

They're documented below:

• getCurrentPath: Returns location of the window of the Client.
• getPlatform: Returns the OS of the Client.
• getScreenshot: Returns the current screenshot of the Client's window / app view.

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

Submit your ideas for innovative hooks or feature requests.

Run the same hook against multiple botUsers (Clients). Hook responses are not visible to non admins / Clients.

• Multiple channel support
• Attachments
• No Server needed!
• Custom Hooks
• Responsive Mobile support
• Special message UI if user is mentioned
• Auto generated user icons if userImage is not supplied
• Material UI with Animations
• Remembers selected channel
• Emoji support
• Auto scroll on new messages