diff --git a/src/main/ui/service_client.html b/src/main/ui/service_client.html
new file mode 100644
index 000000000..8570863a3
--- /dev/null
+++ b/src/main/ui/service_client.html
@@ -0,0 +1,24 @@
+<html>
+<!--[if lt IE 9]>
+<script src="https://g.alicdn.com/aliww/ww/json/json.js" charset="utf-8"></script>
+<![endif]-->
+<!-- 自动适配移动端与pc端 -->
+<script src="https://g.alicdn.com/aliww/??h5.openim.sdk/1.0.6/scripts/wsdk.js,h5.openim.kit/0.3.3/scripts/kit.js" charset="utf-8"></script>
+<script>
+    window.uid='taki';
+    window.touid='mitsuha';
+    window.onload = function(){
+        WKIT.init({
+    container: document.getElementById('J_demo'),
+    width: 700,
+    height: 500,
+    uid: window.uid,
+    appkey: 24960261,
+    credential: 'xxxxxx',
+    touid: window.touid,
+    logo: 'http://img.alicdn.com/tps/i3/TB12LD9IFXXXXb3XpXXSyFWJXXX-82-82.png',
+    pluginUrl: 'http://192.168.0.43:9001/service_contact_list.html?uid='+window.uid
+});
+    }
+</script>
+</html>
\ No newline at end of file
diff --git a/src/main/ui/service_contact_list.html b/src/main/ui/service_contact_list.html
new file mode 100644
index 000000000..8e4a1734a
--- /dev/null
+++ b/src/main/ui/service_contact_list.html
@@ -0,0 +1,131 @@
+<html>
+<!--[if lt IE 9]>
+<script src="https://g.alicdn.com/aliww/ww/json/json.js" charset="utf-8"></script>
+<![endif]-->
+<!-- 自动适配移动端与pc端 -->
+<script src="https://g.alicdn.com/aliww/??h5.openim.sdk/1.0.6/scripts/wsdk.js,h5.openim.kit/0.3.3/scripts/kit.js"
+        charset="utf-8"></script>
+<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
+
+<script>
+    var unreadMap = {};
+    var sdk = new WSDK();
+
+    var queryParam = getQueryString();
+    function login() {
+        sdk.Base.login({
+                           uid: queryParam['uid'],
+                           appkey: '24960261',
+                           credential: 'xxxxxx',
+                           timeout: 4000,
+                           success: function (data) {
+                               initUnreadMsgAndContact();
+                               console.log('login success', data);
+                               sdk.Base.startListenAllMsg();
+                           },
+                           error: function (error) {
+                               console.log('get login msg count fail', error);
+                           }
+                       });
+    }
+
+    function loadContactList() {
+        var str = '';
+        for (var key in unreadMap) {
+            str += "{" + key + ":" + unreadMap[key] + "}";
+        }
+        $("#contact").html(str);
+        var contact_list = '';
+        for (var key in unreadMap) {
+            contact_list += "<li>" + key + ":" + unreadMap[key] + "</li>";
+        }
+        $("#contact_list").html(contact_list);
+    }
+
+    function initUnreadMsgAndContact() {
+        sdk.Base.getRecentContact({
+                                      count: 40,
+                                      success: function (data) {
+                                          console.log('get contact msg count success', data);
+
+                                          var cnts = data.data.cnts;
+                                          for (var i = cnts.length - 1; i >= 0; i--) {
+                                              unreadMap[sdk.Base.getNick(cnts[i].to)] = 0;
+                                          }
+                                          getUnreadMsgCount();
+                                      },
+                                      error: function (error) {
+                                          console.log('get contact msg count fail', error);
+                                      }
+                                  })
+    }
+
+    function getUnreadMsgCount() {
+        sdk.Base.getUnreadMsgCount({
+                                       count: 40,
+                                       success: function (data) {
+                                           console.log('get unread msg count success', data);
+                                           var unreads = data.data;
+                                           for (var i = unreads.length - 1; i >= 0; i--) {
+                                               unreadMap[sdk.Base.getNick(unreads[i].contact)] =
+                                                   unreads[i].msgCount;
+                                           }
+                                           loadContactList();
+                                       },
+                                       error: function (error) {
+                                           console.log('get recent contact fail', error);
+                                       }
+                                   });
+    }
+
+    function setReadState(touid) {
+        sdk.Chat.setReadState({
+                                  touid: touid,
+                                  timestamp: Math.floor((+new Date()) / 1000),
+                                  success: function (data) {
+                                      console.log('set read state success', data);
+                                  },
+                                  error: function (error) {
+                                      console.log('set read state fail', error);
+                                  }
+                              });
+    }
+
+    function startListenMsg(touid) {
+        sdk.Chat.startListenMsg({touid: 'touid'});
+    }
+
+    function stopListenMsg() {
+        sdk.Chat.stopListenMsg();
+    }
+
+    function getQueryString() {
+        var qs = location.search.substr(1), // 获取url中"?"符后的字串
+            args = {}, // 保存参数数据的对象
+            items = qs.length ? qs.split("&") : [], // 取得每一个参数项,
+            item = null,
+            len = items.length;
+
+        for(var i = 0; i < len; i++) {
+            item = items[i].split("=");
+            var name = decodeURIComponent(item[0]),
+                value = decodeURIComponent(item[1]);
+            if(name) {
+                args[name] = value;
+            }
+        }
+        return args;
+    }
+</script>
+<script>
+    window.onload = function () {
+        login();
+    };
+
+</script>
+<body>
+<ul id="contact_list">
+</ul>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/ui/service_customer.html b/src/main/ui/service_customer.html
new file mode 100644
index 000000000..660343ad7
--- /dev/null
+++ b/src/main/ui/service_customer.html
@@ -0,0 +1,22 @@
+<html>
+<!--[if lt IE 9]>
+<script src="https://g.alicdn.com/aliww/ww/json/json.js" charset="utf-8"></script>
+<![endif]-->
+<!-- 自动适配移动端与pc端 -->
+<script src="https://g.alicdn.com/aliww/??h5.openim.sdk/1.0.6/scripts/wsdk.js,h5.openim.kit/0.3.3/scripts/kit.js" charset="utf-8"></script>
+<script>
+    window.onload = function(){
+        WKIT.init({
+    container: document.getElementById('J_demo'),
+    width: 700,
+    height: 500,
+    uid: 'mitsuha',
+    appkey: 24960261,
+    credential: 'xxxxxx',
+    touid: 'taki',
+    logo: 'http://img.alicdn.com/tps/i3/TB12LD9IFXXXXb3XpXXSyFWJXXX-82-82.png',
+    pluginUrl: 'http://www.taobao.com/market/seller/openim/plugindemo.php'
+});
+    }
+</script>
+</html>
\ No newline at end of file
