reactjs-freshchat/README.md

A Reactjs component wrapper for Freshchat web-sdk api.

<div align="center">

# ReactJS Freshchat

</div>

<div align="center">

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/viniciustei/reactjs-freshchat/Publish%20to%20npm)
![GitHub Workflow Status](https://img.shields.io/github/workflow/status/viniciustei/reactjs-freshchat/Run%20tests?label=tests)
[![NPM](https://img.shields.io/npm/v/reactjs-freshchat.svg)](https://www.npmjs.com/package/reactjs-freshchat) 

</div>

React component wrapper for Freshchat. The oficial documentation can be found here <https://developers.freshchat.com/web-sdk/>.

* * *


### List of features

*   Create a chat with anonymous user
*   Create a chat with Logged in user
*   Custom labeled chat
    * Add a label to your chat icon. 
    * The ic_styles property can only be set with this option.

### Live examples

* Simple icon chat <br>
<img src="./.github/images/simple-chat.png" alt="simple chat"/>

* Labeled icon chat <br>
<img src="./.github/images/label-chat.png" alt="labeled chat"/>

### Code Demo

```tsx
  import { Freshchat } from 'reactjs-freshchat';
  import 'reactjs-freshchat/dist/index.css'

 //1. Anonymous User
    <Freshchat token={'YOUR-TOKEN-HERE'} />

 //2. Logged in User
    <Freshchat 
      token={'YOUR-TOKEN-HERE'}
      externalId={"john.doe1987"} 
      firstName={"John"}
      lastName={"Doe"}
    />
 //3. Labeled chat and styled colors
      <Freshchat 
        token={'YOUR-TOKEN-HERE'} 
        label="Label"
        ic_styles={{
          backgroundColor: '#002d85', 
          color: '#fff'
        }}
      />
```

### Download & Installation

```shell 
$ npm i reactjs-freshchat
```

### Contributing

Keep it simple. Keep it minimal. Don't put every single feature just because you can. Have fun 🚀!

Download the source code. Then, you need to install the dependencies using 

```shell
yarn 
or 
npm install
```

Then run the following command to run the component ```yarn start``` or  ```npm start ```.

Then navigate to the example folder and run the start script to run the example project and see your changes.

### Authors or Acknowledgments

*   Vinicius Teixeira

### License

MIT © [ViniciusTei](https://github.com/ViniciusTei)