Add custom icon FIX #14

By passing an aditional parameter, you are able to add your own png/svg image as icon. All explained in readme docs
CodingCarlos · Mar 7, 2017 · 1ac4b12 · 1ac4b12
1 parent 1712607
commit 1ac4b12
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -42,6 +42,7 @@ To configure the chat, just use the object passed on IASChat instantiation. *Bol
  - topbarColor: Color Chat topbar text and icons color
  - buttonBg: Color Show button background color
  - buttonColor: Color Show button text/icon color
+ - buttonIcon: String Image URI for the icon you want to add in the open button. SVG or PNG recommended, but all image types should work
  - inputBorderColor: Color Chat text input border bottom color
  - container: String Container for chat (*#identifier* or *.className*)
  - hashSign: String Symbol or string to add before url hash when chat open (Default: '?'. I.e.: url#existentHash**?**ias=true)

diff --git a/demo/index.html b/demo/index.html
@@ -54,6 +54,7 @@ <h1>User side support</h1>
 			button: true,
 			// topbarBg: 'lightgrey',
 			// topbarColor: '#000',
+			// buttonIcon: 'http://simpleicon.com/wp-content/uploads/rocket.png',
 			// buttonBg: 'red',
 			// buttonColor: '#ccc',
 			// inputBorderColor: 'rgba(0, 0, 0, .2)',

diff --git a/dist/chat.js b/dist/chat.js
@@ -13,6 +13,7 @@ function IASChat(config) {
 	var topbarColor = config.topbarColor || textColor;
 	var buttonBg = config.buttonBg || mainColor;
 	var buttonColor = config.buttonColor || textColor;
+	var buttonIcon = config.buttonIcon || null;
 	var inputBorderColor = config.inputBorderColor || mainColor;
 	var defaultSupportName = config.defaultSupportName || 'Support chat';
 	var defaultSupportPic = config.defaultSupportPic || 'https://s3.amazonaws.com/uifaces/faces/twitter/robertovivancos/128.jpg';
@@ -177,6 +178,16 @@ function IASChat(config) {
 			form.children[1].style.margin = '0 16px';
 			form.children[1].style.width = 'calc(100% - 88px)';
 		}
+
+		// If changed button icon
+		if(buttonIcon) {
+			var icon = document.createElement('img');
+			icon.style.width = '24px';
+			icon.style.height = '24px';
+			icon.setAttribute('src', buttonIcon);
+			document.getElementById('ias-show').removeChild(document.getElementById('ias-show').firstChild);
+			document.getElementById('ias-show').appendChild(icon);
+		}
 	}
 
 

diff --git a/js/chat.js b/js/chat.js
@@ -13,6 +13,7 @@ function IASChat(config) {
 	var topbarColor = config.topbarColor || textColor;
 	var buttonBg = config.buttonBg || mainColor;
 	var buttonColor = config.buttonColor || textColor;
+	var buttonIcon = config.buttonIcon || null;
 	var inputBorderColor = config.inputBorderColor || mainColor;
 	var defaultSupportName = config.defaultSupportName || 'Support chat';
 	var defaultSupportPic = config.defaultSupportPic || 'https://s3.amazonaws.com/uifaces/faces/twitter/robertovivancos/128.jpg';
@@ -177,6 +178,16 @@ function IASChat(config) {
 			form.children[1].style.margin = '0 16px';
 			form.children[1].style.width = 'calc(100% - 88px)';
 		}
+
+		// If changed button icon
+		if(buttonIcon) {
+			var icon = document.createElement('img');
+			icon.style.width = '24px';
+			icon.style.height = '24px';
+			icon.setAttribute('src', buttonIcon);
+			document.getElementById('ias-show').removeChild(document.getElementById('ias-show').firstChild);
+			document.getElementById('ias-show').appendChild(icon);
+		}
 	}