├── LICENSE ├── LiveChat └── LiveChat.js ├── README.md ├── license.png └── package.json /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 LiveChat 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /LiveChat/LiveChat.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | export default class LiveChat extends React.Component { 5 | componentWillMount() { 6 | this.loadLiveChatApi.bind(this)(); 7 | } 8 | 9 | chatLoaded() { 10 | if (window.LC_API) { 11 | this.setCallbacks.bind(this)(); 12 | if (typeof this.props.onChatLoaded === 'function') { 13 | this.props.onChatLoaded(window.LC_API); 14 | } 15 | } 16 | } 17 | 18 | chatNotLoaded() { 19 | if (typeof this.props.onErrorLoading === 'function') { 20 | this.props.onErrorLoading(); 21 | } 22 | } 23 | 24 | loadLiveChatApi() { 25 | if (!window.LC_API) { 26 | window.__lc = window.__lc || {}; 27 | window.__lc.license = this.props.license; 28 | window.__lc.group = this.props.group; 29 | window.__lc.chat_between_groups = this.props.chatBetweenGroups; 30 | window.__lc.params = this.props.params; 31 | window.__lc.visitor = this.props.visitor; 32 | const lc = document.createElement('script'); 33 | lc.type = 'text/javascript'; 34 | lc.async = true; 35 | lc.src = ('https:' === document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js'; 36 | const s = document.getElementsByTagName('script')[0]; 37 | s.parentNode.insertBefore(lc, s); 38 | lc.addEventListener('load', this.chatLoaded.bind(this)); 39 | lc.addEventListener('error', this.chatNotLoaded.bind(this)); 40 | } 41 | } 42 | 43 | render() { 44 | return null; 45 | } 46 | 47 | setCallbacks() { 48 | if (typeof this.props.onBeforeLoad === 'function') 49 | window.LC_API.on_before_load = this.props.onBeforeLoad.bind(this); 50 | 51 | if (typeof this.props.onAfterLoad === 'function') 52 | window.LC_API.on_after_load = this.props.onAfterLoad.bind(this); 53 | 54 | if (typeof this.props.onChatWindowOpened === 'function') 55 | window.LC_API.on_chat_window_opened = this.props.onChatWindowOpened.bind(this); 56 | 57 | if (typeof this.props.onChatWindowMinimized === 'function') 58 | window.LC_API.on_chat_window_minimized = this.props.onChatWindowMinimized.bind(this); 59 | 60 | if (typeof this.props.onChatWindowHidden === 'function') 61 | window.LC_API.on_chat_window_hidden = this.props.onChatWindowHidden.bind(this); 62 | 63 | if (typeof this.props.onChatStateChanged === 'function') 64 | window.LC_API.on_chat_state_changed = this.props.onChatStateChanged.bind(this); 65 | 66 | if (typeof this.props.onChatStarted === 'function') 67 | window.LC_API.on_chat_started = this.props.onChatStarted.bind(this); 68 | 69 | if (typeof this.props.onChatEnded === 'function') 70 | window.LC_API.on_chat_ended = this.props.onChatEnded.bind(this); 71 | 72 | if (typeof this.props.onMessage === 'function') 73 | window.LC_API.on_message = this.props.onMessage.bind(this); 74 | 75 | if (typeof this.props.onTicketCreated === 'function') 76 | window.LC_API.on_ticket_created = this.props.onTicketCreated.bind(this); 77 | 78 | if (typeof this.props.onPrechatSurveySubmitted === 'function') 79 | window.LC_API.on_prechat_survey_submitted = this.props.onPrechatSurveySubmitted.bind(this); 80 | 81 | if (typeof this.props.onRatingSubmitted === 'function') 82 | window.LC_API.on_rating_submitted = this.props.onRatingSubmitted.bind(this); 83 | 84 | if (typeof this.props.onRatingCommentSubmitted === 'function') 85 | window.LC_API.on_rating_comment_submitted = this.props.onRatingCommentSubmitted.bind(this); 86 | } 87 | } 88 | 89 | LiveChat.propTypes = { 90 | // important 91 | license: PropTypes.number.isRequired, 92 | group: PropTypes.number, 93 | onChatLoaded: PropTypes.func, 94 | // less important 95 | params: PropTypes.arrayOf(PropTypes.shape({ 96 | name: PropTypes.string.isRequired, 97 | value: PropTypes.any.isRequired 98 | })), 99 | visitor: PropTypes.shape({ 100 | name: PropTypes.string, 101 | email: PropTypes.string 102 | }), 103 | chatBetweenGroups: PropTypes.bool, 104 | onBeforeLoad: PropTypes.func, 105 | onAfterLoad: PropTypes.func, 106 | onChatWindowOpened: PropTypes.func, 107 | onChatWindowMinimized: PropTypes.func, 108 | onChatWindowHidden: PropTypes.func, 109 | onChatStateChanged: PropTypes.func, 110 | onChatStarted: PropTypes.func, 111 | onChatEnded: PropTypes.func, 112 | onMessage: PropTypes.func, 113 | onTicketCreated: PropTypes.func, 114 | onPrechatSurveySubmitted: PropTypes.func, 115 | onPostchatSurveySubmitted: PropTypes.func, 116 | onRatingSubmitted: PropTypes.func, 117 | onRatingCommentSubmitted: PropTypes.func, 118 | }; 119 | 120 | LiveChat.defaultProps = { 121 | group: 0, 122 | }; 123 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### ⚠️ DEPRECATED ⚠️ 2 | 3 | We have created a new project called [Chat Widget Adapters](https://github.com/livechat/chat-widget-adapters). It contains a set of packages which support more frontend frameworks integration with LiveChat Chat Widget in a modern way aligned with each framework specificity in mind. 4 | 5 | From now on it will be the official, actively maintained repository for each framework-specific package that allows easy integration of LiveChat Chat Widget. The React package [@livechat/widget-react](http://npm.im/@livechat/widget-react) is one of available optoions. You can read more about it [here](https://github.com/livechat/chat-widget-adapters/blob/master/packages/widget-react/README.md). 6 | 7 | # LiveChat for React 8 | 9 | This is a React component to easily add [LiveChat widget](https://www.livechatinc.com/) to your application. 10 | 11 | ## Getting Started 12 | 13 | ### Prerequisites 14 | 15 | To use LiveChat in your React application, you will need LiveChat license ID. 16 | 17 | If you already have a LiveChat account, get your **license_id** [here](https://my.livechatinc.com/settings/code). 18 | 19 | ![LiveChat license ID](https://github.com/livechat/react-livechat/blob/master/license.png) 20 | 21 | If you don't have an account, you can create one [here](https://www.livechatinc.com/). 22 | 23 | ### Installation 24 | 25 | To import LiveChat for React, run the following command: 26 | 27 | ```javascript 28 | npm install react-livechat --save 29 | ``` 30 | 31 | ## User Guide 32 | 33 | ### Start 34 | 35 | Having imported LiveChat for React, put it in your render method: 36 | 37 | ```javascript 38 | import LiveChat from 'react-livechat' 39 | 40 | ... 41 | 42 | 43 | ``` 44 | 45 | ### Group 46 | 47 | You can set up group directly in `LiveChat` component prop. Thanks to this, all chats will be routed to the specified group: 48 | 49 | ```javascript 50 | 51 | ``` 52 | 53 | Here you can learn more about groups: [Dividing live chat by group](https://www.livechatinc.com/kb/dividing-live-chat-by-group/). 54 | 55 | #### Separated chat sessions 56 | 57 | You can separate chat sessions between groups by using `chatBetweenGroups` prop: 58 | 59 | ```javascript 60 | 61 | ``` 62 | 63 | [Here](https://www.livechatinc.com/kb/dividing-live-chat-by-group/#separate-chat-sessions) is an article about it. 64 | 65 | ### Visitor's details 66 | 67 | If you already know who your visitor is, you can set up his/her name and/or email: 68 | 69 | ```javascript 70 | 71 | ``` 72 | 73 | ### Custom variables 74 | 75 | Custom variables are additional details that you can pass to LiveChat from the code (i.e., login or profile link). Here is how to make it: 76 | 77 | ```javascript 78 | const params = [ 79 | { name: 'Login', value: 'joe_public' }, 80 | { name: 'Account ID', value: 'ABCD1234' }, 81 | { name: 'Total order value', value: '$123' } 82 | ]; 83 | 84 | 85 | ``` 86 | 87 | ### Customization 88 | 89 | You can change the look and feel of your chat widget in [Settings > Chat window](https://my.livechatinc.com/settings/theme) section. 90 | 91 | ### Methods 92 | 93 | This module uses [LiveChat JS API](https://docs.livechatinc.com/js-api/). 94 | 95 | Get your chat reference using `onChatLoaded` callback: 96 | 97 | ```javascript 98 | this.livechat = ref } 100 | license={your_license_id} 101 | /> 102 | ``` 103 | 104 | You have access to all methods and variables of [LiveChat JS API](https://docs.livechatinc.com/js-api/) with your `livechat` reference or 105 | `window.LC_API`. 106 | 107 | Example: 108 | ```javascript 109 | this.livechat.hide_chat_window(); 110 | // is the same as: 111 | window.LC_API.hide_chat_window(); 112 | ``` 113 | 114 | ### LC_Invite exception 115 | 116 | Sometimes it can happen that `LC_Invite` is is still being loaded when `onChatLoaded` is called. 117 | To ensure that `LC_Invite` is loaded you can give additional check to `onChatLoaded` function: 118 | ```js 119 | onChatLoaded = (ref) => { 120 | ref.on_after_load = function () { 121 | //here you can use any method you want! 122 | } 123 | } 124 | ``` 125 | 126 | #### Available methods 127 | 128 | |Name|Note| 129 | |---|---| 130 | | close_chat | Closes the ongoing chat. | 131 | | disable_sounds | Mutes all sounds in the chat window on visitor's side (not supported with the pop-up chat window). | 132 | | open_chat_window | Maximizes the chat window (when using the embedded chat window) or opens the chat window (when using the pop-up window).| 133 | | minimize_chat_window | Minimizes the chat window (not supported with the pop-up chat window). | 134 | | hide_chat_window | Hides the chat window (not supported with the pop-up chat window). | 135 | | agents_are_available | Returns true if your agents are available to chat, otherwise it returns false.| 136 | | chat_window_maximized | Returns true if the chat window is maximized, returns false otherwise.| 137 | |chat_window_minimized | Returns true if the chat window is minimized, returns false otherwise. | 138 | | chat_window_hidden | Returns true if the chat window is hidden, returns false otherwise. | 139 | | visitor_queued | Returns true if the visitor is currently waiting in the queue, returns false otherwise. | 140 | |chat_running | Returns true if the visitor is currently chatting with an agent, returns false otherwise. | 141 | | visitor_engaged | Returns true if the visitor is currently chatting, waiting in the queue or the greeting is displayed to them. Returns false otherwise.| 142 | |get_window_type | Returns embedded if the chat window is embedded on the website or popup if the chat window opens in a new window.| 143 | | set_custom_variables | You can set [custom variables](https://docs.livechatinc.com/js-api/#set-custom-variables) that the LiveChat agents will see in their apps. [Custom variables](https://docs.livechatinc.com/js-api/#set-custom-variables) will be saved in the chat transcript, so you will see them in the Archives even after the chat has been finished. | 144 | 145 | ### Callbacks 146 | 147 | LiveChat React component gives you the option to control chat callbacks. 148 | 149 | Let's say that you want display a received or sent message somewhere else. You can get new messages using the code below: 150 | 151 | ```javascript 152 | console.log(data) } 155 | /> 156 | ``` 157 | 158 | #### Available callbacks 159 | 160 | |Name|Note| 161 | |---|---| 162 | | onChatLoaded | Executed when LC_API object is loaded and ready to use. **Returns reference to your LC_API object.** | 163 | | onBeforeLoad | Executed before the chat window has been rendered (not supported with the pop-up chat window). | 164 | | onAfterLoad | Executed right after the chat window has been rendered (not supported with the pop-up chat window).| 165 | | onChatWindowOpened | Executed when the chat window is opened. | 166 | | onChatWindowMinimized | Executed when the chat window is minimized (not supported with the pop-up chat window). | 167 | | onChatWindowHidden | Executed when the chat window is hidden (not supported with the pop-up chat window). | 168 | | onChatStateChanged | Executed when the chat state is changed. You can find more information [here](https://docs.livechatinc.com/js-api/#on-chat-state-changed).| 169 | | onChatStarted | Executed when the chat is started. | 170 | | onChatEnded | Executed when the chat is ended. | 171 | | onMessage | Executed when the message has been sent or received. You can find more information [here](https://docs.livechatinc.com/js-api/#on-message).| 172 | | onTicketCreated | Executed when the ticket form has been filled in by the visitor. You can find more information [here](https://docs.livechatinc.com/js-api/#on-ticket-created).| 173 | | onPrechatSurveySubmitted | Executed when the pre-chat survey has been submitted by visitor. | 174 | | onPostchatSurveySubmitted | Executed when the post-chat survey has been submitted by visitor. | 175 | | onRatingSubmitted | Executed when the chat rating is submitted. The only argument, data, can have three values: *good, bad or none.*| 176 | | onRatingCommentSubmitted | Executed when a chat rating comment is submitted. The only argument, data, contains the *message* entered by the visitor. | 177 | 178 | 179 | ## Support 180 | 181 | If you need any help, you can chat with us [via email](mailto:developers@livechatinc.com) or [on chat](https://developers.livechatinc.com/). 182 | 183 | I hope you will find this module useful. Happy coding! 184 | -------------------------------------------------------------------------------- /license.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/livechat/react-livechat/c2f18f2ae63f06790e9b6cae28e3e10c603b29d8/license.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-livechat", 3 | "version": "1.0.27", 4 | "description": "React component to integrate LiveChat with your single-page app", 5 | "main": "LiveChat.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build:umd:min": "cross-env BABEL_ENV=es NODE_ENV=production rollup -c -i LiveChat/LiveChat.js -o dist/LiveChat.min.js", 9 | "build:umd": "cross-env BABEL_ENV=es NODE_ENV=development rollup -c -i LiveChat/LiveChat.js -o dist/LiveChat.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/livechat/react-livechat.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "livechat", 18 | "chat" 19 | ], 20 | "author": "Tomasz Przybył", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/livechat/react-livechat/issues" 24 | }, 25 | "peerDependencies": { 26 | "react": "*" 27 | }, 28 | "homepage": "https://github.com/livechat/react-livechat#readme", 29 | "devDependencies": { 30 | "babel-cli": "^6.26.0", 31 | "babel-preset-es2015": "^6.24.1", 32 | "babel-preset-stage-0": "^6.24.1", 33 | "cross-env": "^5.1.3", 34 | "rollup": "^0.55.0", 35 | "rollup-plugin-babel": "^3.0.3", 36 | "rollup-plugin-commonjs": "^8.2.6", 37 | "rollup-plugin-uglify": "^3.0.0" 38 | }, 39 | "dependencies": { 40 | "prop-types": "^15.6.1" 41 | } 42 | } 43 | --------------------------------------------------------------------------------