A handy ReactJS component to be used for loading ZenDesk Chat into your website or web app.
To use this module, just import the library like this:
import ReactZenDeskChat from '@inlightmedia/react-zendesk-chat';
then you can use the module in your app like so:
<ReactZenDeskChat appID="MY_ZEN_DESK_APP_ID" />
Be sure to use your app id.
To get it, go to your ZenDesk Chat dashboard after creating your account. Then, go to Settings > Widget > GettingStarted > 1. Embed the Zendesk Chat Widget
You should see something that looks like this:
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?<MY_ZEN_DESK_APP_ID>";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->
Your appID will be located after the '?' where it reads: <MY_ZEN_DESK_APP_ID>
All the best and happy Zendesking!
PS - This is not an official library and is not affiliated with Zendesk. I just made it and thought I'd open source it as I couldn't find another library to meet my needs.
NB: Feel free to contribute if you feel there could be some improvements but I don't accept any liability for use or misuse of this component in your projects.
- Bundled with Webpack
- Develop with Hot Module Replacement (HMR)
- Includes linting with ESLint
- Testing with Jest.
-
Install -
yarn
-
Start example and start coding -
yarn start
-
Run tests -
yarn test
-
Bundle with -
yarn build
-
To test if it works correctly in another project you can use npm
npm install -S ../react-npm-component-boilerplate
Note the relative path
yarn | npm |
---|---|
yarn |
npm install |
yarn test |
npm run test |
yarn build |
npm run build |
MIT © Josh Dyck
Special thanks to Dinesh Pandiyan whose npm boilerplate I used to generate the package.