|
| 1 | + |
| 2 | + |
| 3 | + |
| 4 | + |
| 5 | +**WARNING**: This is not a stable version. We are currently developing things, and it may have heavy security problems, have parts not finished, have parts broken, or crash unexpectedly. I do not recommend you to use it in production yet. |
| 6 | + |
1 | 7 | # inapp-support |
2 | | -HTML5 inApp support chat using your own firebase account |
| 8 | +HTML5 inApp support chat using your own firebase account. It is also possible to send images. Just include firebase, your config (as in firebase console is given to you), and add to your code: |
| 9 | + |
| 10 | +```html |
| 11 | +<!-- Include IASChat, take it from dist/chat.js --> |
| 12 | +<script src="js/chat.js"></script> |
| 13 | + |
| 14 | +<!-- Main working --> |
| 15 | +<script type="text/javascript"> |
| 16 | +window.onload = function() { |
| 17 | + window.IASChat = new IASChat({ |
| 18 | + uid: '33g07u1sDg44aa12', // The user id here |
| 19 | + name: 'CodingCarlos', // The user name here |
| 20 | + pic: 'http://yourdomain.com/pic/user/pic.jpg' // The user picture here |
| 21 | + button: true |
| 22 | + }); |
| 23 | +}; |
| 24 | +</script> |
| 25 | +``` |
| 26 | + |
| 27 | +And it's done! |
| 28 | + |
| 29 | +--- |
| 30 | + |
| 31 | +## Configuration |
| 32 | +### client js |
| 33 | +To configure the chat, just use the object passed on IASChat instantiation. *Bold are mandatory* |
| 34 | + |
| 35 | + - **uid**: String User id (if you put a Number, shall work, but I can't promise you that it will work as expected) |
| 36 | + - **name**: String User name |
| 37 | + - **pic**: String User picture |
| 38 | + - **button**: Boolean Show or not the fab button to open the chat |
| 39 | + - mainColor: Color [hex, name, rgb, rgba] Main color (chat topbar background, show button background and chat input border bottom) |
| 40 | + - textColor: Color Main text color (Chat topbar text/icons, show button text/icons) |
| 41 | + - topbarBg: Color Chat topbar background color |
| 42 | + - topbarColor: Color Chat topbar text and icons color |
| 43 | + - buttonBg: Color Show button background color |
| 44 | + - buttonColor: Color Show button text/icon color |
| 45 | + - inputBorderColor: Color Chat text input border bottom color |
| 46 | + - container: String Container for chat (*#identifier* or *.className*) |
| 47 | + - hashSign: String Symbol or string to add before url hash when chat open (Default: '?'. I.e.: url#existentHash**?**ias=true) |
| 48 | + - defaultSupportName: String Default support name (if no supporter assigned) |
| 49 | + - defaultSupportPic: String Default support picture (if no supporter assigned) |
| 50 | + |
| 51 | +In IASChatProvider, there are some extra features: |
| 52 | + - container: String Container for support panel (*#identifier* or *.className*. Default: *body*) |
| 53 | + - chatContainer: String Container for chat (*#identifier* or *.className*. Default: *body* or support container) |
| 54 | + |
| 55 | +In the future, early future, I hope to add... |
| 56 | + - uploadFiles: Boolean Enable or disable the option to upload and send pictures. |
| 57 | + - onlyPictures: Boolean Allow only pictures, or all file types. |
| 58 | + |
| 59 | +*I'm open to any suggestion or request for more configuration params. Don't hesitate to open a new Issue* |
| 60 | + |
| 61 | +### firebase |
| 62 | +Create a new firebase project (or use a existing one), and add the configuration script to your code, if possible, before including chat.js. |
| 63 | + |
| 64 | +Then, configure your security rules according to your authentication method (if you are already using firebase authentication as app authentication, the same authentication is valid). If you are not already using firebase authentication, but a custom method, maybe you shall [use the firease custom authentication method](https://firebase.google.com/docs/auth/web/custom-auth) (I'll try to add more info and demos in the future). |
| 65 | + |
| 66 | +Just for a test, set the rules as this for database: |
| 67 | +``` |
| 68 | +{ |
| 69 | + "rules": { |
| 70 | + ".read": true, |
| 71 | + ".write": true |
| 72 | + } |
| 73 | +} |
| 74 | +``` |
| 75 | +And for storage: |
| 76 | +``` |
| 77 | +service firebase.storage { |
| 78 | + match /b/chat-e6e7d.appspot.com/o { |
| 79 | + match /{allPaths=**} { |
| 80 | + allow read, write: if true; |
| 81 | + //allow read, write: if request.auth != null; |
| 82 | + } |
| 83 | + } |
| 84 | +} |
| 85 | +``` |
| 86 | +**Be careful**: *This allows anybody to read and write ALL your database and files. This is just for test prouposes, not for production.* |
| 87 | + |
| 88 | +## Support panel |
| 89 | +Check the code in demo/support.html to add to your existent panel. No authorization/authentication done here. That is your work in your own control/support pannel. As said before, you shall check yourself the firebase rules. |
| 90 | + |
| 91 | +```html |
| 92 | +<!-- Include IASChat --> |
| 93 | +<script src="js/chat.js"></script> |
| 94 | +<!-- Include IASChat Support Provider --> |
| 95 | +<script src="js/provider.js"></script> |
| 96 | + |
| 97 | +<!-- Main working --> |
| 98 | +<script type="text/javascript"> |
| 99 | +window.onload = function() { |
| 100 | + window.IASChatProvider = new IASChatProvider({ |
| 101 | + uid: '8sd0df4s8f0ss', // The support user id here |
| 102 | + name: 'Supporter', // The support user name here |
| 103 | + pic: 'http://yourdomain.com/pic/user/pic.jpg' // The supporter picture here |
| 104 | + container: '#container' // OPTIONAL: Container for support pannel (*#identifier* or *.className*). |
| 105 | + }); |
| 106 | +}; |
| 107 | +</script> |
| 108 | +``` |
| 109 | + |
| 110 | +### Assign user to supporter |
| 111 | +Supporter wil got assigned any chat that answer. Unassigned chats will appear to all supporters. To change assignation, for now, you have to do it in firebase console. |
| 112 | + |
| 113 | +In the future any supporter will be able to assign a chat, or change it's assignations to other supporter. But so, in the future. |
| 114 | + |
| 115 | +### Add supporters |
| 116 | +Initialize the support user, and done. |
| 117 | + |
| 118 | +### Secure the panel |
| 119 | +This is your work. Support pannel in demo folder is not really a support panel, but a demo. This is not a fully control panel app, just a support chat "component" to add to your existing app. |
| 120 | + |
| 121 | + |
| 122 | +## Responsiveness |
| 123 | +Nope, right now is not desktop/tablet responsive, just mobile, but I'm doing my best to add larger screen support. |
| 124 | + |
| 125 | +## Contribute |
| 126 | +You can use this code as you like. If you find a bug, or want to ask for a feature, just open an issue, and we'll do our best. If you can fix it, do a pull request to ``dev`` branch, and we promise to review it as fast as possible to merge it. |
| 127 | + |
| 128 | +If you are new on this open source world, here is a short guide about how to make a pull request to contribute: |
| 129 | + |
| 130 | +1. [Fork ](https://github.com/CodingCarlos/inapp-support/fork) then clone `git clone [email protected]:your-username/inapp-support.git` inapp-support repository |
| 131 | +2. Create a new branch in your personally forked repo, with a name similar to your edits, such as `fix-whatever` |
| 132 | +3. Make your edits inside your new branch |
| 133 | +4. Commit them and push them back to your personal github fork |
| 134 | +5. Make a new [Pull Request](https://github.com/CodingCarlos/inapp-support/compare/) on the inapp-support repo. Point your branch to the `dev` inapp-support branch and submit. |
| 135 | + |
| 136 | +I will do my best to review and accept the commit as soon as possible. |
0 commit comments