Skip to content

vit-jjiron/reactjs-freshchat

 
 

Repository files navigation

ReactJS Freshchat

GitHub Workflow Status GitHub Workflow Status NPM npm

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


Download & Installation

$ yarn add fh-storybook-dev-components

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

simple chat

  • Labeled icon chat

labeled chat

Code Demo

  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'
        }}
      />

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

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

About

💬Npm package to wrap Freshchat into a React component

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 66.1%
  • HTML 16.8%
  • CSS 15.0%
  • JavaScript 2.1%