├── .babelrc
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── demo
    ├── .babelrc
    ├── dist
    │   ├── index.html
    │   └── main.js
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── index.html
    │   └── index.js
    └── webpack.config.js
├── package-lock.json
├── package.json
├── screenshot.png
├── src
    ├── Drift.d.ts
    └── Drift.jsx
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "react",
4 |     "env",
5 |     "stage-0"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Component lib directory
 2 | lib
 3 | 
 4 | # Logs
 5 | logs
 6 | *.log
 7 | npm-debug.log*
 8 | 
 9 | # Runtime data
10 | pids
11 | *.pid
12 | *.seed
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # node-waf configuration
27 | .lock-wscript
28 | 
29 | # Compiled binary addons (http://nodejs.org/api/addons.html)
30 | build/Release
31 | 
32 | # Dependency directories
33 | node_modules
34 | jspm_packages
35 | typings
36 | 
37 | # Optional npm cache directory
38 | .npm
39 | 
40 | # Optional REPL history
41 | .node_repl_history


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | demo
3 | .babelrc
4 | webpack.config.js


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React-Drift
 2 | 
 3 | React component implementation of Drift Chatbot Widget.
 4 | 
 5 | ![Alt Text](https://raw.githubusercontent.com/chardmd/react-drift/master/screenshot.png)
 6 | 
 7 | ### Install
 8 | 
 9 | ```
10 | npm install react-driftjs
11 | ```
12 | 
13 | ### Usage
14 | 
15 | ```javascript
16 | import Drift from "react-driftjs";
17 | 
18 | <Drift appId="xxxxx" />; //get the appId from drift.com
19 | ```
20 | 
21 | ### Identify User / Assign Attributes
22 | 
23 | To identify the user with an ID that is unique in your application, include a `userId` property with that value. This will trigger the chatbot to use the `identify` method. If `userId` is omitted, the component will have the chatbot use the `setUserAttributes` method.
24 | 
25 | ```javascript
26 | <Drift
27 |   appId="xxxxx"
28 |   userId="1234"
29 |   attributes={{ email: "user@example.com", company: "Acme Inc" }}
30 | />
31 | ```
32 | 
33 | ### Add Event Handlers
34 | 
35 | The chatbot widget emits several events. A listing of the events can be found here: https://devdocs.drift.com/docs/drift-events#section-first-interaction
36 | To handle the events, assign an array of objects to the eventHandlers property. The `event` property will match the name of the event emitted by drift. The `function` property is the function definition of the handler.
37 | 
38 | ```javascript
39 | <Drift
40 |   appId="xxxxx"
41 |   eventHandlers={[
42 |     { event: "conversation:firstInteraction", function: handleInteraction },
43 |   ]}
44 | />;
45 | 
46 | const handleInteraction = function () {
47 |   console.log("User has just interacted with the chatbot");
48 | };
49 | ```
50 | 
51 | ### Add Custom Styles
52 | 
53 | To add custom styling to the root `<iframe>` element (e.g. to change the position of the chatbot widget) you can assign a style object to the `style` property. This object will be parsed as a css string and added to a style tag in the head of the document.
54 | 
55 | ```javascript
56 | <Drift
57 |   appId="xxxxx"
58 |   style={{
59 |     bottom: "100px",
60 |   }}
61 | />
62 | ```
63 | 
64 | ### TypeScript
65 | 
66 | Includes TypeScript definitions.
67 | 
68 | ### About Drift
69 | 
70 | More information can be found here: https://www.drift.com/
71 | 
72 | ### License
73 | 
74 | MIT
75 | 


--------------------------------------------------------------------------------
/demo/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "react",
4 |     "env",
5 |     "stage-0"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/demo/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>React Drift Demo</title>
 7 | </head>
 8 | 
 9 | <body>
10 |   <div id="app"></div>
11 | <script type="text/javascript" src="main.js"></script></body>
12 | 
13 | </html>


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-drift-demo",
 3 |   "version": "1.2.2",
 4 |   "description": "React Drift Component Demo",
 5 |   "license": "MIT",
 6 |   "scripts": {
 7 |     "build": "webpack",
 8 |     "start": "webpack-dev-server --open"
 9 |   },
10 |   "dependencies": {
11 |     "prop-types": "^15.6.0",
12 |     "react": "^16.0.0",
13 |     "react-dom": "^16.0.0",
14 |     "react-driftjs": "^1.2.2"
15 |   },
16 |   "devDependencies": {
17 |     "babel-core": "^6.21.0",
18 |     "babel-loader": "^7.1.4",
19 |     "babel-preset-env": "^1.6.1",
20 |     "babel-preset-react": "^6.16.0",
21 |     "babel-preset-stage-0": "^6.24.1",
22 |     "html-webpack-plugin": "^3.2.0",
23 |     "path": "^0.12.7",
24 |     "webpack": "^4.20.2",
25 |     "webpack-cli": "^3.1.1",
26 |     "webpack-dev-server": "^3.1.3"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/demo/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>React Drift Demo</title>
 7 | </head>
 8 | 
 9 | <body>
10 |   <div id="app"></div>
11 | </body>
12 | 
13 | </html>


--------------------------------------------------------------------------------
/demo/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { render } from "react-dom";
 3 | 
 4 | import Drift from "react-driftjs";
 5 | 
 6 | render(
 7 |   <div>
 8 |     <h2>React Drift Demo</h2>
 9 |     <Drift
10 |       appId="9h3gdx9mm6ze"
11 |       userId="1234"
12 |       attributes={{ email: "user@example.com", company: "Acme Inc" }}
13 |     />
14 |   </div>,
15 |   document.getElementById("app")
16 | );
17 | 


--------------------------------------------------------------------------------
/demo/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const HtmlWebpackPlugin = require("html-webpack-plugin");
 2 | 
 3 | module.exports = {
 4 |   mode: "development",
 5 |   module: {
 6 |     rules: [
 7 |       {
 8 |         test: /\.jsx?$/,
 9 |         exclude: /(node_modules)/,
10 |         use: "babel-loader"
11 |       }
12 |     ]
13 |   },
14 |   plugins: [
15 |     new HtmlWebpackPlugin({
16 |       template: "./src/index.html"
17 |     })
18 |   ]
19 | };
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-driftjs",
 3 |   "version": "1.2.2",
 4 |   "description": "React component implementation of Drift Chatbot Widget",
 5 |   "homepage": "https://github.com/chardmd/react-drift",
 6 |   "keywords": [
 7 |     "React",
 8 |     "Drift",
 9 |     "npm"
10 |   ],
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "https://github.com/chardmd/react-drift"
14 |   },
15 |   "main": "./lib/Drift.js",
16 |   "types": "./lib/Drift.d.ts",
17 |   "license": "MIT",
18 |   "scripts": {
19 |     "build": "webpack"
20 |   },
21 |   "peerDependencies": {
22 |     "prop-types": "^15.6.0",
23 |     "react": "^16.0.0",
24 |     "react-dom": "^16.0.0"
25 |   },
26 |   "devDependencies": {
27 |     "babel-core": "^6.21.0",
28 |     "babel-loader": "^7.1.4",
29 |     "babel-preset-env": "^1.6.1",
30 |     "babel-preset-react": "^6.16.0",
31 |     "babel-preset-stage-0": "^6.24.1",
32 |     "copy-webpack-plugin": "^6.4.1",
33 |     "path": "^0.12.7",
34 |     "prop-types": "^15.6.0",
35 |     "react": "^16.0.0",
36 |     "react-dom": "^16.0.0",
37 |     "webpack": "^4.20.2",
38 |     "webpack-cli": "^3.1.1"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chardmd/react-drift/38dc59faca5a3374a540ef9e42abd1e103d80431/screenshot.png


--------------------------------------------------------------------------------
/src/Drift.d.ts:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export interface DriftProps {
 4 |   appId: string;
 5 |   userId?: string;
 6 |   attributes?: { [name: string]: any };
 7 |   eventHandlers?: { event: string; function: () => void }[];
 8 |   style?: { [name: string]: any };
 9 | }
10 | 
11 | export default class Drift extends React.Component {
12 |   props: DriftProps;
13 |   insertScript: (scriptText: string) => void;
14 |   addMainScript: () => void;
15 |   addAttributes: () => void;
16 |   addEventHandlers: () => void;
17 |   createStyleString: () => void;
18 |   addCustomStyle: () => void;
19 | }
20 | 


--------------------------------------------------------------------------------
/src/Drift.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Fragment } from "react";
  2 | import PropTypes from "prop-types";
  3 | 
  4 | class Drift extends React.Component {
  5 |   constructor(props) {
  6 |     super(props);
  7 | 
  8 |     this.addMainScript = this.addMainScript.bind(this);
  9 |     this.addAttributes = this.addAttributes.bind(this);
 10 |     this.addEventHandlers = this.addEventHandlers.bind(this);
 11 |     this.insertScript = this.insertScript.bind(this);
 12 |     this.createStyleString = this.createStyleString.bind(this);
 13 |     this.addCustomStyle = this.addCustomStyle.bind(this);
 14 |   }
 15 | 
 16 |   insertScript(scriptText) {
 17 |     const script = document.createElement("script");
 18 |     script.innerText = scriptText;
 19 |     script.async = true;
 20 |     document.body.appendChild(script);
 21 |   }
 22 | 
 23 |   addMainScript() {
 24 |     const scriptText = `!function() {
 25 |         var t = window.driftt = window.drift = window.driftt || [];
 26 |         if (!t.init) {
 27 |           if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
 28 |           t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on", "setUserAttributes" ],
 29 |           t.factory = function(e) {
 30 |             return function() {
 31 |               var n = Array.prototype.slice.call(arguments);
 32 |               return n.unshift(e), t.push(n), t;
 33 |             };
 34 |           }, t.methods.forEach(function(e) {
 35 |             t[e] = t.factory(e);
 36 |           }), t.load = function(t) {
 37 |             var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
 38 |             o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
 39 |             var i = document.getElementsByTagName("script")[0];
 40 |             i.parentNode.insertBefore(o, i);
 41 |           };
 42 |         }
 43 |       }();
 44 |       drift.SNIPPET_VERSION = '0.3.1';
 45 |       drift.load('${this.props.appId}');`;
 46 | 
 47 |     this.insertScript(scriptText);
 48 |   }
 49 | 
 50 |   addAttributes() {
 51 |     let scriptText = "";
 52 |     if (typeof this.props.userId !== "undefined") {
 53 |       scriptText = `
 54 |         var t = window.driftt = window.drift = window.driftt || [];
 55 |         drift.identify('${this.props.userId}', ${JSON.stringify(
 56 |         this.props.attributes
 57 |       )})
 58 |       `;
 59 |       this.insertScript(scriptText);
 60 |     } else if (this.props.attributes) {
 61 |       scriptText = `
 62 |         drift.on('ready', function() {
 63 |           drift.api.setUserAttributes(${JSON.stringify(this.props.attributes)})
 64 |         })
 65 |       `;
 66 |       this.insertScript(scriptText);
 67 |     }
 68 |   }
 69 | 
 70 |   addEventHandlers() {
 71 |     if (this.props.eventHandlers && Array.isArray(this.props.eventHandlers)) {
 72 |       this.props.eventHandlers.forEach((handler) => {
 73 |         let scriptText = `
 74 |         drift.on('${handler.event}', ${handler.function});
 75 |         `;
 76 |         this.insertScript(scriptText);
 77 |       });
 78 |     }
 79 |   }
 80 | 
 81 |   createStyleString() {
 82 |     return Object.keys(this.props.style).reduce((styleString, styleName) => {
 83 |       const styleValue = this.props.style[styleName];
 84 | 
 85 |       styleName = styleName.replace(
 86 |         /[A-Z]/g,
 87 |         (match) => `-${match.toLowerCase()}`
 88 |       );
 89 | 
 90 |       return `${styleString}${styleName}: ${styleValue} !important;`;
 91 |     }, "");
 92 |   }
 93 | 
 94 |   addCustomStyle() {
 95 |     if (this.props.style) {
 96 |       const style = document.createElement("style");
 97 |       document.head.appendChild(style);
 98 |       style.innerText = `
 99 |         iframe#drift-widget {
100 |           ${this.createStyleString()}
101 |         }
102 |       `;
103 |     }
104 |   }
105 | 
106 |   componentDidMount() {
107 |     if (typeof window !== "undefined" && !window.drift) {
108 |       this.addMainScript();
109 |       this.addAttributes();
110 |       this.addEventHandlers();
111 |       this.addCustomStyle();
112 |     }
113 |   }
114 | 
115 |   render() {
116 |     return <Fragment />;
117 |   }
118 | }
119 | 
120 | const propTypes = {
121 |   appId: PropTypes.string.isRequired,
122 |   userId: PropTypes.string,
123 |   attributes: PropTypes.object,
124 |   eventHandlers: PropTypes.array,
125 |   style: PropTypes.object,
126 | };
127 | 
128 | Drift.propTypes = propTypes;
129 | 
130 | export default Drift;
131 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require("path");
 2 | const CopyPlugin = require("copy-webpack-plugin");
 3 | 
 4 | module.exports = {
 5 |   mode: "production",
 6 |   entry: "./src/Drift.jsx",
 7 |   output: {
 8 |     path: path.resolve("lib"),
 9 |     filename: "Drift.js",
10 |     libraryTarget: "commonjs2",
11 |   },
12 |   module: {
13 |     rules: [
14 |       {
15 |         test: /\.jsx?$/,
16 |         exclude: /(node_modules)/,
17 |         use: "babel-loader",
18 |       },
19 |     ],
20 |   },
21 |   plugins: [
22 |     new CopyPlugin({
23 |       patterns: [{ from: "./src/Drift.d.ts", to: "./Drift.d.ts" }],
24 |     }),
25 |   ],
26 | };
27 | 


--------------------------------------------------------------------------------