idoco · dannya · May 6, 2019
diff --git a/README.md b/README.md
@@ -37,14 +37,22 @@ Currently you can customize all visible texts and the main widget color by setti
 <script> 
     window.intergramId = "Your unique chat id";
     window.intergramCustomizations = {
-        titleClosed: 'Closed chat title',
-        titleOpen: 'Opened chat title',
-        introMessage: 'First message when the user opens the chat for the first time',
-        autoResponse: 'A message that is sent immediately after the user sends its first message',
-        autoNoResponse: 'A message that is sent one minute after the user sends its first message ' +
-                        'and no response was received',
-        mainColor: "#E91E63", // Can be any css supported color 'red', 'rgb(255,87,34)', etc
-        alwaysUseFloatingButton: false // Use the mobile floating button also on large screens
+        titleClosed: 'Click to chat!',
+        titleOpen: 'Let\'s chat!',
+        closedStyle: 'chat', // button or chat
+        closedChatAvatarUrl: '', // only used if closedStyle is set to 'chat'
+        cookieExpiration: 1, // in days. Once opened, closed chat title will be shown as button (when closedStyle is set to 'chat')
+        introMessage: 'Hello! How can we help you?',
+        autoResponse: 'Looking for the first available admin (It might take a minute)',
+        autoNoResponse: 'It seems that no one is available to answer right now. Please tell us how we can ' +
+        'contact you, and we will get back to you as soon as we can.',
+        placeholderText: 'Send a message...',
+        displayMessageTime: true,
+        mainColor: '#1f8ceb',   // Can be any css supported color 'red', 'rgb(255,87,34)', etc
+        textColor: '#ffffff',   // Should be a CSS hex color (due to its use in the SVG icons as well as normal HTML elements)
+        alwaysUseFloatingButton: false,   // Use the mobile floating button also on large screens
+        desktopHeight: 450,
+        desktopWidth: 370
     };
 </script>
 <script id="intergram" type="text/javascript" src="https://www.intergram.xyz/js/widget.js"></script>

diff --git a/server.js b/server.js
@@ -1,12 +1,13 @@
 const request = require('request');
-const compression = require('compression');
 const cors = require('cors');
 const express = require('express');
 const bodyParser = require('body-parser');
 const app = express();
 const http = require('http').Server(app);
 const io = require('socket.io')(http);
 
+
+// initialise Express app
 app.use(express.static('dist', {index: 'demo.html', maxage: '4h'}));
 app.use(bodyParser.json());
 

diff --git a/src/widget/arrow-icon.js b/src/widget/arrow-icon.js
@@ -2,7 +2,7 @@ import { h, Component } from 'preact';
 
 export default class ArrowIcon extends Component {
 
-    render({isOpened},{}) {
+    render({color, isOpened},{}) {
         return (
             <div>
                 {/* keyboard arrow up */}
@@ -12,15 +12,15 @@ export default class ArrowIcon extends Component {
                             marginTop: 6,
                             verticalAlign: 'middle',
                         }}
-                        fill="#FFFFFF" height="15" viewBox="0 0 15 15" width="15"
+                        height="15" viewBox="0 0 15 15" width="15"
                         xmlns="http://www.w3.org/2000/svg">
-                        <line x1="1" y1="15" 
-                            x2="15" y2="1" 
-                            stroke="white" 
+                        <line x1="1" y1="15"
+                            x2="15" y2="1"
+                            stroke={color}
                             stroke-width="1"/>
-                        <line x1="1" y1="1" 
-                            x2="15" y2="15" 
-                            stroke="white" 
+                        <line x1="1" y1="1"
+                            x2="15" y2="15"
+                            stroke={color}
                             stroke-width="1"/>
                     </svg>
                     :
@@ -29,11 +29,11 @@ export default class ArrowIcon extends Component {
                         marginTop: 6,
                         verticalAlign: 'middle',
                     }}
-                        fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24"
+                        fill={color} height="24" viewBox="0 0 24 24" width="24"
                         xmlns="http://www.w3.org/2000/svg">
                         <path d="M2.582 13.891c-0.272 0.268-0.709 0.268-0.979 0s-0.271-0.701 0-0.969l7.908-7.83c0.27-0.268 0.707-0.268 0.979 0l7.908 7.83c0.27 0.268 0.27 0.701 0 0.969s-0.709 0.268-0.978 0l-7.42-7.141-7.418 7.141z"></path>
                     </svg>
-                    
+
                 }
             </div>
         );

diff --git a/src/widget/chat-floating-button.js b/src/widget/chat-floating-button.js
@@ -3,14 +3,14 @@ import {mobileTitleStyle} from "./style";
 
 export default class ChatFloatingButton extends Component {
 
-    render({color, onClick},{}) {
+    render({color, textColor, onClick},{}) {
         return (
             <div
-                style={{background: color, ...mobileTitleStyle}}
+                style={{background: color, color: textColor, ...mobileTitleStyle}}
                 onClick={onClick}>
 
-                <svg style={{paddingTop: 4}}
-                     fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24"
+                <svg style={{paddingTop: 4}} height="24" viewBox="0 0 24 24" width="24"
+                     fill={textColor}
                      xmlns="http://www.w3.org/2000/svg">
                     <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z"/>
                     <path d="M0 0h24v24H0z" fill="none"/>

diff --git a/src/widget/chat-title-msg.js b/src/widget/chat-title-msg.js
@@ -5,12 +5,12 @@ export default class ChatTitleMsg extends Component {
     render({isOpened, conf},{}) {
         return (
             <div style={{position: 'relative', cursor: 'pointer'}} onClick={this.props.onClick}>
-                <div 
+                <div
                     className="desktop-closed-message"
                     style={{
                         background: conf.mainColor,
+                        color: conf.textColor,
                         letterSpacing: '1px',
-                        color: '#fff',
                         display: 'block',
                         position: 'absolute',
                         fontSize: '14px',
@@ -26,7 +26,7 @@ export default class ChatTitleMsg extends Component {
                     <div
                         style={{
                             width: 0,
-                            height: 0, 
+                            height: 0,
                             position: 'absolute',
                             top: '12px',
                             right: '-10px',
@@ -36,7 +36,7 @@ export default class ChatTitleMsg extends Component {
                         }}
                     />
                 </div>
-                <div 
+                <div
                     className="desktop-closed-message-avatar"
                     style={{
                         background: '#fff',
@@ -62,8 +62,8 @@ export default class ChatTitleMsg extends Component {
                             <path d="M20 21.859c0 2.281-1.5 4.141-3.328 4.141h-13.344c-1.828 0-3.328-1.859-3.328-4.141 0-4.109 1.016-8.859 5.109-8.859 1.266 1.234 2.984 2 4.891 2s3.625-0.766 4.891-2c4.094 0 5.109 4.75 5.109 8.859zM16 8c0 3.313-2.688 6-6 6s-6-2.688-6-6 2.688-6 6-6 6 2.688 6 6z"></path>
                         </svg>
                         :
-                        <img 
-                            src={conf.closedChatAvatarUrl} 
+                        <img
+                            src={conf.closedChatAvatarUrl}
                             alt="Avatar"
                             style={{
                                 width: '100%',

diff --git a/src/widget/default-configuration.js b/src/widget/default-configuration.js
@@ -12,6 +12,7 @@ export const defaultConfiguration = {
     placeholderText: 'Send a message...',
     displayMessageTime: true,
     mainColor: '#1f8ceb',
+    textColor: '#ffffff',
     alwaysUseFloatingButton: false,
     desktopHeight: 450,
     desktopWidth: 370

diff --git a/src/widget/style.js b/src/widget/style.js
@@ -54,7 +54,6 @@ export const desktopTitleStyle = {
     justifyContent: 'space-between',
     padding: '5px 0 5px 20px',
     fontFamily: 'Lato, sans-serif',
-    color: '#fff',
     cursor: 'pointer',
 };
 

diff --git a/src/widget/widget.js b/src/widget/widget.js
@@ -4,9 +4,9 @@ import ChatFloatingButton from './chat-floating-button';
 import ChatTitleMsg from './chat-title-msg';
 import ArrowIcon from './arrow-icon';
 import {
-    desktopTitleStyle, 
+    desktopTitleStyle,
     desktopWrapperStyle,
-    mobileOpenWrapperStyle, 
+    mobileOpenWrapperStyle,
     mobileClosedWrapperStyle,
     desktopClosedWrapperStyleChat
 } from "./style";
@@ -31,7 +31,7 @@ export default class Widget extends Component {
             wrapperStyle = { ...mobileClosedWrapperStyle}; // closed mobile floating button
         } else if (!isMobile){
             wrapperStyle = (conf.closedStyle === 'chat' || isChatOpen || this.wasChatOpened()) ?
-                (isChatOpen) ? 
+                (isChatOpen) ?
                     { ...desktopWrapperStyle, ...wrapperWidth} // desktop mode, button style
                     :
                     { ...desktopWrapperStyle}
@@ -47,16 +47,16 @@ export default class Widget extends Component {
                 {/* Open/close button */}
                 { (isMobile || conf.alwaysUseFloatingButton) && !isChatOpen ?
 
-                    <ChatFloatingButton color={conf.mainColor} onClick={this.onClick}/>
+                    <ChatFloatingButton color={conf.mainColor} textColor={conf.textColor} onClick={this.onClick}/>
 
                     :
 
                     (conf.closedStyle === 'chat' || isChatOpen || this.wasChatOpened()) ?
-                        <div style={{background: conf.mainColor, ...desktopTitleStyle}} onClick={this.onClick}>
+                        <div style={{background: conf.mainColor, color: conf.textColor, ...desktopTitleStyle}} onClick={this.onClick}>
                             <div style={{display: 'flex', alignItems: 'center', padding: '0px 30px 0px 0px'}}>
                                 {isChatOpen ? conf.titleOpen : conf.titleClosed}
                             </div>
-                            <ArrowIcon isOpened={isChatOpen}/>
+                            <ArrowIcon color={conf.textColor} isOpened={isChatOpen}/>
                         </div>
                         :
                         <ChatTitleMsg onClick={this.onClick} conf={conf}/>