├── .babelrc ├── .eslintrc ├── .gitignore ├── .npmignore ├── IntercomWebView.html ├── IntercomWebView.js ├── LICENSE ├── README.md └── package.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | 4 | "ecmaFeatures": { 5 | "jsx": true 6 | }, 7 | 8 | "env": { 9 | "es6": true, 10 | "jasmine": true, 11 | "node": 1, 12 | }, 13 | 14 | "plugins": [ 15 | "react", 16 | "react-native" 17 | ], 18 | 19 | "globals": { 20 | "__DEV__": true, 21 | "__dirname": false, 22 | "__fbBatchedBridgeConfig": false, 23 | "cancelAnimationFrame": false, 24 | "clearImmediate": true, 25 | "clearInterval": false, 26 | "clearTimeout": false, 27 | "console": false, 28 | "document": false, 29 | "escape": false, 30 | "exports": false, 31 | "fetch": false, 32 | "global": false, 33 | "jest": false, 34 | "Map": true, 35 | "module": false, 36 | "navigator": false, 37 | "process": false, 38 | "Promise": true, 39 | "requestAnimationFrame": true, 40 | "require": false, 41 | "Set": true, 42 | "setImmediate": true, 43 | "setInterval": false, 44 | "setTimeout": false, 45 | "window": false, 46 | "XMLHttpRequest": false, 47 | "pit": false, 48 | "FormData": true, 49 | }, 50 | 51 | "rules": { 52 | "comma-dangle": 0, 53 | "no-cond-assign": 1, 54 | "no-console": 0, 55 | "no-constant-condition": 0, 56 | "no-control-regex": 1, 57 | "no-debugger": 1, 58 | "no-dupe-keys": 1, 59 | "no-empty": 0, 60 | "no-empty-character-class": 1, 61 | "no-ex-assign": 1, 62 | "no-extra-boolean-cast": 1, 63 | "no-extra-parens": 0, 64 | "no-extra-semi": 1, 65 | "no-func-assign": 1, 66 | "no-inner-declarations": 0, 67 | "no-invalid-regexp": 1, 68 | "no-negated-in-lhs": 1, 69 | "no-obj-calls": 1, 70 | "no-regex-spaces": 1, 71 | "no-reserved-keys": 0, 72 | "no-sparse-arrays": 1, 73 | "no-unreachable": 1, 74 | "use-isnan": 1, 75 | "valid-jsdoc": 0, 76 | "valid-typeof": 1, 77 | 78 | "block-scoped-var": 0, 79 | "complexity": 0, 80 | "consistent-return": 0, 81 | "curly": 1, 82 | "default-case": 0, 83 | "dot-notation": 1, 84 | "eqeqeq": 1, 85 | "guard-for-in": 0, 86 | "no-alert": 1, 87 | "no-caller": 1, 88 | "no-div-regex": 1, 89 | "no-else-return": 0, 90 | "no-labels": 1, 91 | "no-eq-null": 0, 92 | "no-eval": 1, 93 | "no-extend-native": 1, 94 | "no-extra-bind": 1, 95 | "no-fallthrough": 1, 96 | "no-floating-decimal": 1, 97 | "no-implied-eval": 1, 98 | "no-iterator": 1, 99 | "no-lone-blocks": 1, 100 | "no-loop-func": 0, 101 | "no-multi-str": 0, 102 | "no-native-reassign": 0, 103 | "no-new": 1, 104 | "no-new-func": 1, 105 | "no-new-wrappers": 1, 106 | "no-octal": 1, 107 | "no-octal-escape": 1, 108 | "no-proto": 1, 109 | "no-redeclare": 0, 110 | "no-return-assign": 1, 111 | "no-script-url": 1, 112 | "no-self-compare": 1, 113 | "no-sequences": 1, 114 | "no-unused-expressions": 0, 115 | "no-void": 1, 116 | "no-warning-comments": 0, 117 | "no-with": 1, 118 | "radix": 1, 119 | "vars-on-top": 0, 120 | "wrap-iife": 0, 121 | "yoda": 1, 122 | 123 | "strict": 0, 124 | 125 | "no-catch-shadow": 1, 126 | "no-delete-var": 1, 127 | "no-label-var": 1, 128 | "no-shadow": 1, 129 | "no-shadow-restricted-names": 1, 130 | "no-undef": 2, 131 | "no-undefined": 0, 132 | "no-undef-init": 1, 133 | "no-unused-vars": [1, {"vars": "all", "args": "none"}], 134 | "no-use-before-define": 0, 135 | "handle-callback-err": 1, 136 | "no-mixed-requires": 1, 137 | "no-new-require": 1, 138 | "no-path-concat": 1, 139 | "no-process-exit": 0, 140 | "no-restricted-modules": 1, 141 | "no-sync": 0, 142 | 143 | "key-spacing": 0, 144 | "comma-spacing": 0, 145 | "no-multi-spaces": 0, 146 | "brace-style": 0, 147 | "camelcase": 0, 148 | "consistent-this": [1, "self"], 149 | "eol-last": 1, 150 | "func-names": 0, 151 | "func-style": 0, 152 | "new-cap": 0, 153 | "new-parens": 1, 154 | "no-nested-ternary": 0, 155 | "no-array-constructor": 1, 156 | "no-lonely-if": 0, 157 | "no-new-object": 1, 158 | "no-spaced-func": 1, 159 | "semi-spacing": 1, 160 | "no-ternary": 0, 161 | "no-trailing-spaces": 1, 162 | "no-underscore-dangle": 0, 163 | "no-mixed-spaces-and-tabs": 1, 164 | "quotes": [1, "single", "avoid-escape"], 165 | "quote-props": 0, 166 | "semi": 0, 167 | "sort-vars": 0, 168 | "keyword-spacing": 1, 169 | "space-in-brackets": 0, 170 | "space-in-parens": 0, 171 | "space-infix-ops": 1, 172 | "space-unary-ops": [1, { "words": true, "nonwords": false }], 173 | "max-nested-callbacks": 0, 174 | "one-var": 0, 175 | "wrap-regex": 0, 176 | 177 | "max-depth": 0, 178 | "max-len": 0, 179 | "max-params": 0, 180 | "max-statements": 0, 181 | "no-bitwise": 1, 182 | "no-plusplus": 0, 183 | 184 | "react/display-name": 0, 185 | "react/jsx-boolean-value": 0, 186 | "react/jsx-no-undef": 1, 187 | "react/jsx-sort-props": 0, 188 | "react/jsx-uses-react": 0, 189 | "react/jsx-uses-vars": 1, 190 | "react/no-did-mount-set-state": [1, "allow-in-func"], 191 | "react/no-did-update-set-state": [1, "allow-in-func"], 192 | "react/no-multi-comp": 0, 193 | "react/no-unknown-property": 0, 194 | "react/prop-types": 0, 195 | "react/react-in-jsx-scope": 0, 196 | "react/self-closing-comp": 1, 197 | "react/wrap-multilines": 0 198 | } 199 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # React Native 2 | .idea 3 | .DS_Store 4 | node_modules/* 5 | .log -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | .log -------------------------------------------------------------------------------- /IntercomWebView.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /IntercomWebView.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { View, WebView, Dimensions } from 'react-native'; 4 | import Spinner from 'react-native-loading-spinner-overlay'; 5 | 6 | class IntercomWebView extends Component{ 7 | constructor(props){ 8 | super(props); 9 | this.state = { 10 | isLoading: true 11 | }; 12 | this.onLoadEnd = this.onLoadEnd.bind(this); 13 | } 14 | 15 | componentDidMount = () => { 16 | this.setState({ 17 | windowHeight: Dimensions.get('window').height 18 | }); 19 | } 20 | 21 | injectedJS = (appId, name, email, id = '', hideLauncher, userHash = '') => { 22 | const config = { 23 | user_id: id, 24 | user_hash: userHash, 25 | app_id: appId, 26 | name: name, 27 | email: email, 28 | hide_default_launcher: hideLauncher 29 | } 30 | 31 | let strConfig = '' 32 | try { 33 | strConfig = JSON.stringify(config) 34 | } catch(e){ 35 | console.log('Unable to stringify config', e) 36 | } 37 | 38 | return ` 39 | window.Intercom('boot', ${strConfig}); 40 | 41 | if (${hideLauncher}) 42 | window.Intercom('showMessages'); 43 | `; 44 | } 45 | 46 | onLoadEnd = () => { 47 | this.setState({isLoading: false}); 48 | 49 | if (this.props.onLoadEnd) 50 | this.props.onLoadEnd(); 51 | } 52 | 53 | render(){ 54 | const { appId, name, email, id, hideLauncher, defaultHeight, showLoadingOverlay, userHash, onHide, ...remainingProps } = this.props; 55 | const { isLoading, windowHeight } = this.state; 56 | 57 | let height = defaultHeight || windowHeight; 58 | 59 | return( 60 | 61 | 62 | 63 | 70 | 71 | ) 72 | } 73 | } 74 | 75 | IntercomWebView.propTypes = { 76 | appId: PropTypes.string, 77 | name: PropTypes.string, 78 | email: PropTypes.string, 79 | id: PropTypes.string || null, 80 | hideLauncher: PropTypes.bool, 81 | showLoadingOverlay: PropTypes.bool, 82 | defaultHeight: PropTypes.number, 83 | userHash: PropTypes.string || null 84 | }; 85 | 86 | IntercomWebView.defaultProps = { 87 | hideLauncher: false, 88 | showLoadingOverlay: true, 89 | id: null, 90 | userHash: null 91 | }; 92 | 93 | export default IntercomWebView; 94 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Donovan 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-intercom-webview 2 | 3 | A React Native Component that renders [Intercom](https://www.intercom.com) in a React Native WebView. 4 | This plugin supports React Native version 0.40. 5 | 6 | # Usage 7 | 8 | Inside your project directory, install the package: 9 | 10 | `npm i react-native-intercom-webview` 11 | 12 | You can use the component in your React Native component as follows: 13 | 14 | 1. Import the IntercomWebView component: 15 | 16 | ```javascript 17 | import IntercomWebView from 'react-native-intercom-webview'; 18 | ``` 19 | 20 | 2. Render the IntercomWebView component: 21 | 22 | ```javascript 23 | 30 | ``` 31 | 32 | Change the intercom details (appId, name, email) to your own. 33 | 34 | The _hideLauncher_ prop hides the Intercom launcher icon and automatically shows the Intercom messages. This is useful for rendering the Intercom messages when a user clicks on your own custom launcher (e.g. a button). 35 | 36 | If _defaultHeight_ is not provided, the IntercomWebView will attempt to fill the height of the window using the [Dimension](https://facebook.github.io/react-native/docs/dimensions.html#get) module. 37 | 38 | Any other WebView props (exluding: _source, injectedJavaScript, javaScriptEnabled_) can be passed to the IntercomWebView component as props and they will be passed onto the underlying WebView component. 39 | 40 | 41 | # Contribute 42 | To contribute, create a Pull Request: 43 | 44 | https://github.com/donovantc/react-native-intercom-webview 45 | 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-intercom-webview", 3 | "version": "1.2.5", 4 | "description": "React Native WebView containing Intercom", 5 | "main": "IntercomWebView.js", 6 | "scripts": { 7 | "lint": "eslint IntercomWeb.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/donovantc/react-native-intercom-webview.git" 12 | }, 13 | "keywords": [ 14 | "react-native", 15 | "Intercom", 16 | "ios", 17 | "android", 18 | "react-component" 19 | ], 20 | "author": "Donovan Isherwood ", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/APSL/react-native-intercom-webview/issues" 24 | }, 25 | "homepage": "https://github.com/APSL/react-native-intercom-webview#readme", 26 | "dependencies": { 27 | "react-native-loading-spinner-overlay": "^0.5.2" 28 | }, 29 | "devDependencies": { 30 | "babel-eslint": "^6.0.5", 31 | "babel-preset-react-native": "^1.9.0", 32 | "eslint": "^2.13.1", 33 | "eslint-plugin-react": "^5.2.2", 34 | "eslint-plugin-react-native": "^1.1.0-beta", 35 | "react": "^15.3.2", 36 | "react-native": "^0.40.0" 37 | } 38 | } 39 | --------------------------------------------------------------------------------