範例 1
帶入訪客名稱、電子信箱
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="org.apache.commons.codec.digest.DigestUtils"%>
<%
String api_key = "API Key";
String timestamp = String.valueOf(new Date().getTime() / 1000);
String token_string = ""
+ "guest_info_name:訪客名稱"
+ "guest_info_email:guest@test.com"
+ api_key
+ timestamp
;
Map cami_bridge = new HashMap();
cami_bridge.put("timestamp", timestamp);
cami_bridge.put("token", DigestUtils.sha1Hex(token_string));
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
<title>Cami 線上客服系統 Java 串接範例 (帶入訪客名稱、Email 信箱)</title>
<!-- 以下為串接所需要新增的部份 js 變數 -->
<script>
const cami_bridge = {
"setting": {
"timestamp": "<%=cami_bridge.get("timestamp")%>",
"token": "<%=cami_bridge.get("token")%>"
},
"guest_info": {
"name": "訪客名稱",
"email": "guest@test.com"
}
};
</script>
<!-- 以下為原本的系統安裝代碼 -->
<script async src="..."></script>
</head>
<body>
<div id="cami_system_include"></div>
</body>
</html>
範例 2
帶入訪客名稱、聯絡電話、暱稱、生日
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="org.apache.commons.codec.digest.DigestUtils"%>
<%
String api_key = "API Key";
String timestamp = String.valueOf(new Date().getTime() / 1000);
String token_string = ""
+ "guest_info_name:訪客名稱"
+ "guest_info_phone:0987654321"
+ "暱稱:Yesing"
+ "生日:1988-06-04"
+ api_key
+ timestamp
;
Map cami_bridge = new HashMap();
cami_bridge.put("timestamp", timestamp);
cami_bridge.put("token", DigestUtils.sha1Hex(token_string));
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
<title>Cami 線上客服系統 Java 串接範例 (帶入訪客名稱、聯絡電話、暱稱、生日)</title>
<!-- 以下為串接所需要新增的部份 js 變數 -->
<script>
const cami_bridge = {
"setting": {
"timestamp": "<%=cami_bridge.get("timestamp")%>",
"token": "<%=cami_bridge.get("token")%>"
},
"guest_info": {
"name": "訪客名稱",
"phone": "0987654321"
},
"columns": {
"暱稱": "Yesing",
"生日": "1988-06-04"
}
};
</script>
<!-- 以下為原本的系統安裝代碼 -->
<script async src="..."></script>
</head>
<body>
<div id="cami_system_include"></div>
</body>
</html>
範例 3
需登入會員後才能使用客服系統，並帶入會員帳號、生日
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="org.apache.commons.codec.digest.DigestUtils"%>
<%
String api_key = "API Key";
String timestamp = String.valueOf(new Date().getTime() / 1000);
String token_string = ""
+ "member_unique_id:會員帳號唯一辨識名稱",
+ "member_login_required:1"
+ "member_login_status:0"
+ "member_no_login_redirect:http://www.yesing.com/cami_bridge_check"
+ "guest_info_name:會員帳號"
+ "生日:1988-06-04"
+ api_key
+ timestamp
;
Map cami_bridge = new HashMap();
cami_bridge.put("timestamp", timestamp);
cami_bridge.put("token", DigestUtils.sha1Hex(token_string));
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
<title>Cami 線上客服系統 Java 串接範例 (需登入會員後才能使用客服系統，並帶入會員帳號、生日)</title>
<!-- 以下為串接所需要新增的部份 js 變數 -->
<script>
const cam_bridge = {
"setting": {
"timestamp": "<%=cami_bridge.get("timestamp")%>",
"token": "<%=cami_bridge.get("token")%>"
},
"member": {
"unique_id": "會員帳號唯一辨識名稱",
"login_required": 1,
"login_status": 0,
"no_login_redirect": "http://www.yesing.com/cami_bridge_check"
},
"guest_info": {
"name": "會員帳號"
},
"columns": {
"生日": "1988-06-04"
}
};
</script>
<!-- 以下為原本的系統安裝代碼 -->
<script async src="..."></script>
</head>
<body>
<div id="cami_system_include"></div>
</body>
</html>