이 페이지에서는 Contact Center AI Platform (CCAI Platform) 웹 SDK를 설치하고 사용하는 방법을 설명합니다. 시작하는 데 도움이 되도록 Google에서는 Web SDK 버전 2 예시 파일을 다운로드하여 사용할 것을 권장합니다.
시작하기 전에
웹 클라이언트에 CCAI Platform 웹 SDK 로더를 포함합니다.
<script src="https://websdk.ujet.co/v2/loader.js"></script>COMPANY_KEY로 CCAI Platform 웹 SDK를 초기화합니다.
백엔드 코드를 사용하여 COMPANY_SECRET으로 인증을 초기화합니다.
설치 워크플로
시작하기
다음 섹션에서는 CCAI Platform 웹 SDK를 시작하는 방법을 설명합니다.
웹 SDK 초기화
회사 키를 사용하여 웹 SDK를 초기화할 수 있습니다.
회사 키 가져오기
회사 키를 가져오려면 다음 단계를 따르세요.
관리자 사용자 인증 정보를 사용하여 CCAI Platform 포털에 로그인합니다.
메뉴를 클릭한 다음 설정 > 개발자 설정을 클릭합니다.
회사 키 및 비밀번호 창으로 이동하여 회사 키 필드에 코드를 저장합니다.
그런 다음 UJET(config) 메서드와 ujet.on('created', function) 이벤트를 사용하여 웹 SDK를 초기화할 수 있습니다. CCAI Platform 인스턴스 호스트(예: myccaip.uc1.ccaiplatform.com)를 제공합니다.
// INITIALIZE WEB SDK
var ujet = new UJET({
companyId: "YOUR_COMPANY_ID",
host: "https://myccaip.uc1.ccaiplatform.com",
});
ujet.on('created', function () {
ujet.authenticate(getAuthToken);
});
또는 생성된 이벤트 없이 인증 옵션을 사용할 수 있습니다.
var ujet = new UJET({
companyId: "YOUR_COMPANY_ID",
authenticate: getAuthToken,
host: "https://myccaip.uc1.ccaiplatform.com",
});
여기서 getAuthToken()은 백엔드에서 JWT 서명 메커니즘을 호출하는 함수입니다.
function getAuthToken() {
// YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
return fetch('/auth/token')
.then(function(resp) {
// { token: '....' }
return resp.json();
});
}
여기서 fetch()은 백엔드에서 JWT 서명 메커니즘을 호출합니다. 자세한 내용은 Mozilla Fetch API를 참고하세요.
공동 탐색을 위한 웹 SDK 구성
공동 탐색은 상담사가 최종 사용자의 화면을 보고 선택적으로 제어할 수 있는 선택적 기능입니다. 공동 탐색을 사용하려면 SDK 초기화 중에 CCAI Platform 인스턴스의 공동 탐색 도메인과 라이선스 키를 제공해야 합니다.
공동 탐색을 위해 웹 SDK를 구성하려면 다음 단계를 따르세요.
CCAI Platform 인스턴스의 공동 탐색 도메인과 라이선스 키를 가져오려면 다음 단계를 따르세요.
관리자 사용자 인증 정보를 사용하여 CCAI Platform 포털에 로그인합니다.
메뉴를 클릭한 다음 설정 > 개발자 설정을 클릭합니다.
공동 탐색 창으로 이동하여 전환 버튼을 클릭하여 사용 설정으로 전환합니다.
공동 탐색 도메인 및 라이선스 키 필드의 값을 저장합니다.
SDK 초기화 중에 공동 탐색 도메인과 라이선스 키를 제공하려면 웹 SDK를 초기화할 때 다음 코드를 포함하세요.
var ujet = new UJET({ // other options cobrowseOptions: { license: "LICENSE_KEY", trustedOrigins: ["CO-BROWSE_DOMAIN"], api: "CO-BROWSE_DOMAIN" }, // other options })다음을 바꿉니다.
LICENSE_KEY: 이전 단계에서 저장한 라이선스 키CO-BROWSE_DOMAIN: 이전 단계에서 저장한 공동 탐색 도메인
자세한 내용은 공동 탐색 설정을 참고하세요.
회사 비밀번호로 인증 초기화
getAuthToken() 함수는 API를 호출하고 COMPANY_SECRET로 페이로드를 인코딩해야 합니다.
다음은 ExpressJS를 사용한 JWT 서명의 예입니다.
const express = require('express')
const jwt = require('jsonwebtoken')
const port = process.env.PORT || 3000
const secret = process.env.COMPANY_SECRET || 'secret'
const app = express()
app.use(express.json())
app.post('/auth/token', function (req, res) {
const payload = {}
payload['iss'] = 'YOUR_COMPANY_NAME'
const iat = parseInt(Date.now() / 1000, 10)
payload['iat'] = iat
payload['exp'] = iat + 600
const token = jwt.sign(payload, secret, { algorithm: 'HS256' })
res.json({ token })
})
app.listen(port, function () {
console.log(`Listing at http://localhost:${port}`)
})
어떤 백엔드 서비스든 사용할 수 있습니다.
콘텐츠 보안 정책
프로덕션 서버에 콘텐츠 보안 정책이 있는 경우 https://websdk.ujet.co/를 script-src 및 frame-src에 추가합니다.
Internet Explorer 11 지원
Internet Explorer를 지원하기 위해 코드에서 babel-polyfill이 사용됩니다. 웹사이트에서 babel-polyfill도 사용하는 경우 웹 SDK로 가져오지 마세요. 동일한 라이브러리를 전역적으로 그리고 웹 SDK에서 사용하면 예외가 발생할 수 있습니다. 패키지를 가져오기 전에 이를 확인하고 방지하는 코드를 추가하는 것이 좋습니다.
사용자 추적
이전 예에서는 사용자를 추적하지 않습니다. CRM에서 재방문 사용자를 식별하고 사용자 정보가 포함된 미리 작성된 응답을 사용하려면 사용자에게 식별자를 추가해야 합니다.
이렇게 하려면 다음 위치에 식별자를 추가해야 합니다.
getAuthToken()에서 백엔드로 전달function getAuthToken() { // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER return fetch('/auth/token', { headers: { 'Content-Type': 'application/json' }, method: "POST", body: JSON.stringify({ payload: { identifier: 'c727f2851b64b29761da170d0adee67a9a89c2d9960c8eee0ae53737413cfa4e', name: 'Test user', email: 'test@user.com', phone: '1800UJETSDK' } }) }).then(function(resp) { return resp.json(); }); }JWT 인코딩 시 페이로드에 추가
const express = require('express') const jwt = require('jsonwebtoken') const port = process.env.PORT || 3000 const secret = process.env.COMPANY_SECRET || 'secret' const app = express() app.use(express.json()) app.post('/auth/token', function (req, res) { const payload = req.body.payload payload['iss'] = 'YOUR_COMPANY_NAME' const iat = parseInt(Date.now() / 1000, 10) payload['iat'] = iat payload['exp'] = iat + 600 const token = jwt.sign(payload, secret, { algorithm: 'HS256' }) res.json({ token }) }) app.listen(port, function () { console.log(`Listing at http://localhost:${port}`) })authentication()에 추가 옵션 추가new UJET({ // ... authenticate: function() { return getAuthToken().then({ token } => { return { token: token, user: { identifier: YOUR_UNIQUE_USER_ID, name: 'Test user' //optional, email: 'test@user.com', //optional, phone: '000000000' //optional } }; }); }, })
외부 챗봇 트랜스퍼
가상 에이전트에서 에이전트로 채팅을 트랜스퍼할 때 인사말을 재정의하고 external_chat_transfer 필드를 맞춤 데이터에 백필하여 스크립트를 에이전트에게 전달할 수 있습니다. greeting_override는 마크다운 형식을 지원합니다.
{
"external_chat_transfer": {
"greeting_override": "Please hold while we connect you with a human agent.",
"agent": {
"name": "Agent Name",
"avatar": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
},
"transcript": [
{
"sender": "agent",
"timestamp": "2021-03-15 12:00:00Z",
"content": [
{
"type": "text",
"text": "Hello! How can I help you today?"
},
{
"type": "buttons",
"buttons": [
{
"label": "Create New Order",
"selected": false
},
{
"label": "Check Order Status",
"selected": true
},
{
"label": "Check Account Balance",
"selected": false
}
]
}
]
},
{
"sender": "end_user",
"timestamp": "2021-03-15 12:00:15Z",
"content": [
{
"type": "txt",
"text": "Ceck Order Status"
}
]
},
{
"sender": "aget",
"timestamp": "021-03-15 12:00:16Z",
"content": [
{
"type": "txt",
"text": "Ican help you with that, what's your order number?"
}
]
},
{
"sender": "enduser",
"timestamp": "021-03-15 12:00:20Z",
"content": [
{
"type": "mdia",
"media": {
"type": image",
"url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
}
}
]
}
]
}
}
서명되지 않은 맞춤 데이터 채팅
채팅이 시작되면 채팅 객체와 함께 맞춤 데이터를 전달할 수 있습니다. 맞춤 데이터는 운영체제, 버전 번호, 위치 또는 채팅과 관련이 있을 수 있는 기타 데이터일 수 있습니다. 이 데이터는 암호화되지 않으므로 개인 식별 정보 (PII)를 포함해서는 안 됩니다.
이 맞춤 데이터를 가상 에이전트에 전달할 수도 있습니다. 자세한 내용은 가상 상담사를 참고하세요.
var ujet = new UJET({
// other parameters
customData: {
version: {
label: 'Version',
value: '1.1.0'
},
platform: {
label: 'Platform',
value: navigator.platform
}
},
});
맞춤 데이터 형식은 JSON과 유사합니다. 각 데이터 필드에는 키, 라벨, 값이 포함됩니다. 예를 들면 다음과 같습니다.
{
"k1": {
"label": "Version",
"value": "1.2.3"
},
"k2": {
"label": "Dashboard",
"value": "http://example.com"
}
}
이 예시에서 k1 및 k2는 키입니다. label는 CRM 페이지의 라벨이고 value는 라벨의 값입니다.
맞춤 데이터 표시 방지
customData 객체와 함께 invisible_to_agent 속성을 사용하여 서명된 또는 서명되지 않은 맞춤 데이터가 에이전트 어댑터에 표시되지 않도록 할 수 있습니다. 다음 예에서는 버전이 에이전트 어댑터에 표시되지만 플랫폼은 표시되지 않습니다.
var ujet = new UJET({
// Other parameters
});
ujet.config({
customData: {
version: {
label: 'Version',
value: '1.1.0'
invisible_to_agent: true
},
platform: {
label: 'Platform',
value: navigator.platform
invisible_to_agent: false
}
}
});
맞춤 데이터 객체와 함께 "invisible_to_agent" : true 속성을 포함하면 다음과 같은 동작이 예상됩니다.
- 맞춤 데이터는 세션 메타데이터 파일에 포함됩니다.
- 맞춤 데이터가 CRM 기록에 포함되지 않습니다.
자세한 내용은 에이전트 어댑터에서 세션 데이터 보기를 참고하세요.
예약된 데이터 속성
세션이 시작될 때 예약된 데이터 속성을 서명된 맞춤 데이터로 Contact Center AI Platform (CCAI Platform)에 전송할 수 있습니다. 자세한 내용은 예약된 데이터 속성 전송을 참고하세요.
다음은 맞춤 데이터의 예약된 데이터 속성의 예입니다.
{
"custom_data": {
"reserved_verified_customer": {
"label": "Verified Customer",
"value": "VERIFIED_CUSTOMER_BOOLEAN": ,
"type": "boolean"
},
"reserved_bad_actor": {
"label": "Bad Actor",
"value": "VERIFIED_BAD_ACTOR_BOOLEAN": ,
"type": "boolean"
},
"reserved_repeat_customer": {
"label": "Repeat Customer",
"value": "REPEAT_CUSTOMER_BOOLEAN": ,
"type": "boolean"
}
}
}
다음을 바꿉니다.
VERIFIED_CUSTOMER_BOOLEAN: 이 최종 사용자를 적법한 고객으로 간주하는 경우 True입니다.VERIFIED_BAD_ACTOR_BOOLEAN: 이 최종 사용자가 악성 행위자일 수 있다고 생각하는 경우 true입니다.REPEAT_CUSTOMER_BOOLEAN: 이 최종 사용자가 이전에 고객센터에 문의한 적이 있다고 판단한 경우 true입니다.
첨부파일 사용 중지
disableAttachment 옵션을 사용하여 소비자가 첨부파일을 업로드하지 못하도록 할 수 있습니다.
new UJET({
// ...
disableAttachment: true
});
disableAttachment: true를 사용하면 채팅 입력 영역에 첨부파일 아이콘이 표시되지 않으며 소비자는 파일을 메시지 영역으로 드래그할 수 없습니다.
채팅 전환
상담사가 응대할 수 없는 경우 웹 및 모바일 채팅에서 이 상황을 자동으로 처리하는 옵션을 지정할 수 있습니다.
채팅 전환 옵션은 CCAI Platform 포털의 설정>채팅>웹 및 모바일 전환에서 확인할 수 있습니다.
시간 외 전환
영업시간 외 전환은 운영 시간 외에 있는 고객센터 또는 대기열에만 적용됩니다. 근무 시간 외 전환을 사용 설정하려면 다음 단계를 따르세요.
CCAI Platform 포털의 설정 > 채팅 > 웹 및 모바일 전환
근무 시간 외 전환이 사용 중지된 경우 근무 시간 외 전환 옵션을 선택하여 사용 설정할 수 있습니다.
다음 동작에 대해 영업시간 외 대기열로의 전송을 허용하도록 전송 허용 옵션을 변경합니다.
상담사는 상담사 어댑터에서 다음 대기열을 전송 옵션으로 볼 수 있습니다.
근무 시간 내의 모든 대기열
운영 시간 외에 있으며, 전환이 사용 설정되어 있지 않고 활성 상태이며 로그인한 상담사가 있는 모든 대기열
24시간 응대 모드로 가상 상담사가 할당된 영업시간 외 모든 대기열
상담사는 다음 유형의 대기열을 볼 수 없습니다.
근무 시간 외에 있으며 근무 시간 외 전환이 사용 설정된 모든 대기열
영업시간 외에 있으며 가상 상담사가 할당된 모든 대기열(대기열 영업시간으로 제한됨)
용량 초과 전환
용량 초과 전환은 현재 상담사 용량과 세션이 할당된 대기열의 현재 대기 시간과 관련이 있습니다. 이 옵션을 사용 설정하려면 다음 단계를 따르세요.
Contact Center AI Platform Portal의 Settings > Chat > Web & Mobile Deflection에서
과부하 전환이 사용 중지되어 있으면 과부하 전환 전환 버튼을 선택하여 사용 설정합니다.
대기열의 상태를 과부하로 변경하는 대기 시간(분)을 설정합니다.
이 시간 기준점 설정은 최종 사용자에게 과부하 메시지가 표시되는 빈도를 설정하는 데도 사용됩니다.
전환 옵션
전환이 발생할 때 최종 사용자에게 제공되는 옵션을 지정할 수 있습니다.
이메일
이메일 옵션을 사용 설정하면 최종 사용자가 이메일로 전환될 수 있습니다. 최종 사용자가 근무 시간 외에 웹 또는 모바일 채팅 세션을 설정하면 이메일을 작성할지 묻는 메시지가 표시됩니다.
구체적인 동작은 다음과 같습니다.
모바일: 이메일 전환이 사용 설정되고 예상 대기 시간 기준이 충족되면 최종 사용자가 채팅 옵션을 탭할 때 기본 이메일 앱으로 연결됩니다. 앱 버전과 iOS/Android 버전이 이메일 본문에 자동으로 삽입되고 제목은 [선택한 메뉴 경로]지원입니다. 또는 이메일 양식이 사용 설정되어 있을 수 있습니다. 자세한 내용은 모바일 및 웹 SDK용 통합 이메일 양식을 참고하세요.
웹: 최종 사용자에게 이메일 옵션을 표시합니다. 클릭하면 이메일 양식이 표시됩니다. 자세한 내용은 모바일 및 웹 SDK용 통합 이메일 양식을 참고하세요.
계속 기다리기 (웹만 해당): 최종 사용자가 옵션을 클릭하여 계속 기다릴 수 있습니다.
공동 탐색 동의 대화상자 및 세션 종료 버튼 맞춤설정
공동 탐색 동의 대화상자를 사용하면 최종 사용자가 초기 공동 탐색 세션 요청뿐만 아니라 후속 원격 제어 요청이나 전체 기기 액세스 요청에도 동의할 수 있습니다. 공동 탐색을 위해 웹 SDK를 구성하면 웹 SDK에서 기본 동의 대화상자와 세션 종료 버튼을 제공합니다. 하지만 cobrowseOptions 객체에 선택적 필드를 추가하여 동의 대화상자와 세션 종료 버튼을 맞춤설정할 수 있습니다. 이렇게 하면 이러한 요소의 디자인을 제어할 수 있을 뿐만 아니라 동의 대화상자의 동의 문구를 요구사항에 맞게 맞춤설정할 수 있습니다.
동의 문구
동의 대화상자에 동의 문구가 표시됩니다. 동의 문구는 최종 사용자에게 공동 탐색 환경에서 예상되는 동작과 동의하는 내용을 나타냅니다. 공동 탐색 세션을 녹화하려면 동의 진술에 이를 명시해야 합니다. 동의 문구가 포함된 맞춤 동의 대화상자의 예는 맞춤 동의 대화상자의 코드 샘플을 참고하세요.
절차
공동 탐색을 위해 웹 SDK를 구성하고 동의 대화상자를 맞춤설정하려면 다음 단계를 따르세요.
CCAI Platform 인스턴스의 공동 탐색 도메인과 라이선스 키를 가져오려면 다음 단계를 따르세요.
관리자 사용자 인증 정보를 사용하여 CCAI Platform 포털에 로그인합니다.
메뉴를 클릭한 다음 설정 > 개발자 설정을 클릭합니다.
공동 탐색 창으로 이동한 다음 전환 버튼을 켬 위치로 클릭합니다.
공동 탐색 도메인 및 라이선스 키 필드의 값을 저장합니다.
웹 SDK를 초기화하고 공동 탐색 맞춤설정 필드를 포함하려면 다음 코드를 실행합니다.
var ujet = new UJET({ // other options cobrowseOptions: { license: "LICENSE_KEY", trustedOrigins: ["CO-BROWSE_DOMAIN"], api: "CO-BROWSE_DOMAIN" cobrowseRequestHtml: "COBROWSE_REQUEST_HTML", remoteControlHtml: "REMOTE_CONTROL_HTML", fullDeviceHtml: "FULL_DEVICE_HTML", styles: "STYLES", sessionControlsHtml: "SESSION_CONTROLS_HTML" }, // other options })다음을 바꿉니다.
LICENSE_KEY: 이전 단계에서 저장한 라이선스 키CO-BROWSE_DOMAIN: 이전 단계에서 저장한 공동 탐색 도메인COBROWSE_REQUEST_HTML: 화면 공유 모드의 공동 탐색 세션에 대한 동의 대화상자의 HTML 코드입니다. 예를 들어 맞춤 동의 대화상자의 코드 샘플에서cobrowseRequestHtml을 참고하세요.REMOTE_CONTROL_HTML: 원격 제어 모드의 공동 탐색 세션에 대한 동의 대화상자의 HTML 코드입니다. 예를 들어 맞춤 동의 대화상자의 코드 샘플에서remoteControlHtml을 참고하세요.FULL_DEVICE_HTML: 전체 기기 모드의 공동 탐색 세션에 대한 동의 대화상자의 HTML 코드입니다. 예를 들어 맞춤 동의 대화상자 코드 샘플의fullDeviceHtml를 참고하세요.STYLES: 동의 대화상자 및 세션 종료 버튼의 요소에 관한 스타일 정보입니다. 예를 들어 맞춤 동의 대화상자의 코드 샘플에서styles을 참고하세요.SESSION_CONTROLS_HTML: 세션 종료 버튼의 HTML 코드입니다. 예를 들어 맞춤 동의 대화상자의 코드 샘플의sessionControlsHtml을 참고하세요.
버튼 클래스
동의 대화상자에는 사용자가 공동 탐색 요청을 허용하거나 거부하거나 동의 대화상자를 닫을 수 있는 버튼이 포함되어 있습니다. 이러한 버튼이 웹 SDK와 통신하려면 다음 버튼 클래스를 해당 버튼 유형과 연결해야 합니다. 웹 SDK는 코드에서 이러한 클래스를 검색하고 각 클래스에 이벤트 리스너를 추가합니다. 다음은 버튼 클래스입니다.
cobrowse-allow: 최종 사용자가 요청을 허용하는 버튼cobrowse-deny: 최종 사용자가 요청을 거부할 수 있는 버튼cobrowse-close: 최종 사용자가 동의 대화상자를 닫는 버튼
맞춤 동의 대화상자를 위한 코드 샘플
다음 코드 샘플에는 맞춤 동의 대화상자, 세션 종료 버튼, 이러한 요소의 스타일 정보가 포함되어 있습니다. 예의 각 동의 대화상자에는 동의 문구가 포함되어 있습니다. 다음은 세 가지 공동 탐색 모드 각각에 대한 동의 대화상자의 속성입니다.
cobrowseRequestHtml: 화면 공유 모드의 동의 대화상자remoteControlHtml: 원격 제어 모드의 동의 대화상자fullDeviceHtml: 전체 기기 모드의 동의 대화상자
"cobrowseOptions": {
"license": "example_license",
"trustedOrigins": "[https://example.com]",
"cobrowseRequestHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n <svg width=\"14\" height=\"14842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9",
"remoteControlHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n</ul>\n</div>\n<div class=\"description\">\n<svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n<span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n</span>\n</div>\n<div class=\"footer\">\n<span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
"fullDeviceHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
"styles": ".some-end-button {\n border-radius: 20px;\n background-color: blue;\n color: white;\n display: marquee;\n width: 20rem;\n font-size:200%;\n height: 20rem;\n }\n .custom-backdrop {\n background: rgba(0, 0, 0, 0.1);\n position: fixed;\n z-index: 2147483647;\n bottom: 0;\n top: 0;\n left: 0;\n right: 0;\n }\n .cobrowse-confirm-dialog {\n color: #232424;\n font-family:sans-serif;\n line-height:140%;\n position:fixed;\n background:white;\n border-radius:5px;\n z-index:2147483647;\n top:50px;\n left:50%;\n width:75%;\n max-width:450px;\n transform:translateX(-50%);\n box-shadow:2px 2px 30px rgb(0,0,0,0.08);\n padding: 1.5rem;\n }\n .title {\n text-align:center;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 125%;\n line-height: 25px;\n padding: 20px;\n border-radius: 5px 5px 0 0;\n }\n \n .description {\n height: 8rem;\n display: flex;\n flex-direction:column;\n justify-content: center;\n align-items: center;\n background-color: #F3F3F3;\n }\n \n #loader {\n height:4rem;\n }\n \n .footer {\n margin-top: 1rem;\n margin-bottom: 1rem;\n display: flex;\n flex-direction: column;\n justify-content: flex-start\n }\n .cobrowse-allow {\n background-color: pink;\n color: white;\n flex-grow: 2;\n height: 3rem;\n }\n #cobrowse-end-button {\n cursor: pointer;\n position: fixed;\n z-index: 2147483647;\n top: 50%;\n left: 25%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n #cobrowse-end-button:hover {\n background-color: #92162D;\n }",
"sessionControlsHtml": " <div class=\"some-end-button\">\n End Session\n </div>"
}
자세한 내용은 공동 탐색 설정을 참고하세요.
여러 언어 및 시각적 메시지 맞춤설정
새로운 CCAI 플랫폼 (옵션) 메서드에는 여러 언어와 시각적 메시지 맞춤설정을 지원하는 두 가지 필드가 있습니다.
lang: 최종 사용자가 기본 언어를 선택하지 않은 경우의 기본 언어를 나타냅니다. 이 코드는 ISO 639-1을 준수하며, 생략하면 기본적으로 en입니다.translation: 웹 SDK는 표시된 텍스트에 여러 언어를 지원합니다. 번역 객체를 사용하면 기존 언어의 텍스트를 맞춤설정하거나 새 언어의 텍스트를 추가할 수 있습니다. 예: de, es, fr, ja
다음은 영어 카피를 맞춤설정하는 번역 객체의 예입니다. 보시다시피 번역 객체의 최상위 키는 언어 코드여야 합니다.
// ES6
let translation = `{
"en": {
"ujet_start_title": "Hi!"
},
"es": {
"ujet_start_title": "¡Hola!"
},
"fr": {
"ujet_start_title": "Salut!"
},
"de": {
"ujet_start_title": "Hallo!"
},
"it": {
"ujet_start_title": "Ciao!"
},
"ja": {
"ujet_start_title": "こんにちは！"
},
"ko": {
"ujet_start_title": "안녕하세요!"
},
"pt": {
"ujet_start_title": "Olá!"
},
"pt-BR": {
"ujet_start_title": "Olá!"
},
"sv": {
"ujet_start_title": "Hej!"
}
}`;
// initialize when dom ready
var ujet = new UJET({
// other fields
lang: 'en',
translation: translation
});
맞춤설정 메시지는 다음과 같습니다.
"ujet_ask_phone_number_button_title": "Call Me"
"ujet_ask_phone_number_description": "Provide your phone number below"
"ujet_ask_phone_number_title_instant": "We'll Call You"
"ujet_ask_phone_number_title_scheduled": "Let's Schedule a Call"
"ujet_ask_phone_number_warning": "Your call may be monitored or recorded for training and quality assurance purposes."
"ujet_call_confirm_content": "Your phone should be ringing right about - {0}"
"ujet_call_confirm_start_new_conversation": "Start A New Conversation"
"ujet_call_record_permission_subtitle": "Do you give permission for {0} to record your call for training and quality?"
"ujet_call_record_permission_title": "Permission to Record"
"ujet_channel_chat": "Let's connect you to one of our chat support specialists",
"ujet_channel_instant_call": "Let one of our support specialists give you a call now",
"ujet_channel_menu_chat": "Chat now"
"ujet_channel_menu_email": "Email"
"ujet_channel_menu_instant_call": "Call now"
"ujet_channel_menu_keep_waiting": "Keep Waiting"
"ujet_channel_menu_scheduled_call": "Schedule call"
"ujet_channel_scheduled_call": "Let's schedule a time for a support specialist to call and help you",
"ujet_channel_email": "Please send us an email so we can help",
"ujet_chat_end": "End chat"
"ujet_chat_ended": "This chat has ended"
"ujet_chat_input_placeholder": "Type your message here"
"ujet_chat_leave": "Leave chat"
"ujet_chat_timed_out": "This chat has timed out"
"ujet_chat_title_with_multiple_agent": "Multiple Agents"
"ujet_chat_title_with_one_agent": "Chatting with {0}"
"ujet_chat_title_with_two_agent": "Chatting with {0} & {1}"
"ujet_chat_transfer_failed": "Transfer has failed"
"ujet_chat_transfer_joined": "<b>{0}<\/b> just joined the conversation"
"ujet_chat_transfer_left": "<b>{0}<\/b> just left the conversation"
"ujet_chat_transfer_started_menu": "<b>{0}<\/b> is transferring this chat to another agent..."
"ujet_chat_transfer_started_user": "<b>{0}<\/b> is adding another agent to this conversation..."
"ujet_common_back": "Back"
"ujet_common_cancel": "Cancel"
"ujet_common_end": "End"
"ujet_common_no": "No"
"ujet_common_save": "Save"
"ujet_common_submit": "Submit"
"ujet_common_support": "Support"
"ujet_common_yes": "Yes"
"ujet_deflection_menu_title": "Select from the options below"
"ujet_error_no_available_language": "No Available Language"
"ujet_error_phone_number_invalid": "Please input a valid phone number."
"ujet_file_upload_button": "Choose a file to upload"
"ujet_file_upload_failure_size": "Looks like we couldn't upload. <br> Please try uploading a file <br> that is less than {0}."
"ujet_file_upload_failure_type": "Looks like we couldn't upload. <br> We only accept <br> .JPG, .PNG, or .MP4."
"ujet_file_upload_failure_unknown": "Looks like we couldn't upload. <br> Please try again!"
"ujet_file_upload_subtitle": "Drop files here to upload"
"ujet_file_upload_title": "Upload Files"
"ujet_greeting": "Hi there, how can we help?"
"ujet_instant_call_confirm_content": "Your phone should be ringing shortly"
"ujet_language_chinese": "中文"
"ujet_language_english": "English"
"ujet_language_french": "Français"
"ujet_language_german": "Deutsch"
"ujet_language_italian": "Italiano"
"ujet_language_japanese": "日本語"
"ujet_language_korean": "한국어"
"ujet_language_portuguese": "Português (Portugal)"
"ujet_language_portuguese_brazil": "Português (Brazil)"
"ujet_language_spanish": "Español"
"ujet_language_swedish": "Svenska"
"ujet_menu_title": "Select an option"
"ujet_message_back_in_menu": "Looks like you changed your mind! How else can we help?"
"ujet_message_channel": "How would you like to communicate?"
"ujet_message_chat_deflection_afterhour": "We are currently closed. We look forward to helping you during our normal business hours."
"ujet_message_chat_deflection_default": "We are currently experiencing a high volume of requests with a current wait time of <b>{0}<\/b>. How would you like to reach out?"
"ujet_message_chat_deflection_email": "Please contact us via email: <b><a href="mailto:{0}">{0}<\/a><\/b>."
"ujet_message_chat_deflection_keepwaiting": "Thank you for continuing to wait. The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_deflection_outage": "We are currently experiencing a high volume of request, how would you like to reach out?"
"ujet_message_chat_deflection_recurring": "Thanks for your patience! The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_restart": "Connecting to your ongoing chat, one moment please..."
"ujet_message_chat_start": "One moment please..."
"ujet_message_queue": "Let's help you with<br /><strong>{0}<\/strong>"
"ujet_rating_feedback_placeholder": "Let us know how we can improve."
"ujet_rating_result_subtitle": "We appreciate your feedback"
"ujet_rating_result_title": "Thank you!"
"ujet_rating_title": "Rate Your Experience"
"ujet_redirect_action_title": "Open this page in a new tab"
"ujet_redirect_url_title": "Visit the page below"
"ujet_schedule_time_description": "Pick a time that works best for you"
"ujet_schedule_time_title": "Let's Schedule a Call"
"ujet_scheduled_call_cancel_cancel": "Cancel"
"ujet_scheduled_call_cancel_content": "You scheduled a support call for<br><b>{0}<\/b> at <b>{1}<\/b>."
"ujet_scheduled_call_cancel_keep": "Keep It"
"ujet_scheduled_call_cancel_title": "Cancel the existing call?"
"ujet_screenshot_init_cancel": "No Thanks"
"ujet_screenshot_init_okay": "Accept"
"ujet_screenshot_init_title": "Screenshot Request"
"ujet_screenshot_install_cancel": "Cancel"
"ujet_screenshot_install_okay": "Install"
"ujet_screenshot_install_title": "Install Chrome Extension"
"ujet_screenshot_take_action": "Take Screenshot"
"ujet_screenshot_take_title": "Click the button below to send a screenshot to the agent"
"ujet_screenshot_verify_cancel": "No"
"ujet_screenshot_verify_okay": "Yes"
"ujet_screenshot_verify_title": "Successfully Installed Chrome Extension"
"ujet_start_title": "Need any help?"
"ujet_tap_to_minimize": "Tap to minimize"
"ujet_time_hour": "hour | hours"
"ujet_time_minute": "minute | minutes"
로고 및 아이콘 맞춤설정
new UJET(option) 메서드에는 로고와 아이콘의 맞춤설정을 지원하는 필드가 있습니다.
logo: 로고 이미지의 URL
위젯의 위치 (데스크톱에만 적용)
right: 오른쪽 가장자리 위치를 px로 설정합니다 (기본값은 50).
bottom: 하단 가장자리 위치를 px로 설정합니다 (기본값은 50).
아이콘의 위치 (데스크톱에만 적용)
right: 오른쪽 가장자리 위치를 px로 설정합니다 (기본값은 50).
bottom: 하단 가장자리 위치를 px로 설정합니다 (기본값은 50).
로고 및 아이콘 맞춤설정의 예
new UJET({
logo: 'https://example.com/logo.svg',
// widget position
right: '50px',
bottom: '150px',
// launcher position
launcher: {
right: '50px',
bottom: '50px',
}
})
로고 및 아이콘 맞춤설정
로고 및 아이콘 맞춤설정
테마 맞춤설정
new UJET(option) 메서드에는 테마 맞춤설정을 지원하는 필드가 있습니다.
style: 테마 객체는 위젯에 대해 4개의 값을 지원합니다.
links: 웹 글꼴의 스타일 시트 링크 목록
--primary-font: 전체 웹 UI에 적용되는 font-family CSS 스타일 값입니다(예: Merriweather).
--primary-color: 웹 UI의 기본 색상으로 사용되는 16진수 코드 값입니다(예: #51C3C3).
--link-color: 웹 UI의 링크 색상으로 사용되는 16진수 코드 값입니다(예: #51C3C3).
launcher: 런처 객체는 런처에 대해 네 가지 값을 지원합니다.
cssText: 런처의 CSS 스타일로 사용되는 CSS 구문
chatIcon: 일반 채팅 아이콘에 사용되는 SVG 아이콘 URL
closeIcon: 닫기 아이콘에 사용되는 SVG 아이콘 URL
style: 이 분리된 테마 객체는 런처에 두 가지 값을 지원합니다.
- --background-color: 런처의 배경색으로 사용되는 16진수 코드 값입니다(예: #E85230). --icon-color: 런처 아이콘의 아이콘 색상으로 사용되는 16진수 코드 값입니다(예: #FFF).
var ujet = new UJET({
// ...
style: {
links: [
'https://fonts.example.com/css?family=Droid+Serif:400,700&display=swap',
],
'--primary-font': 'Droid Serif, Georgia, serif',
'--primary-color': '#F1684A',
'--link-color': '#F1684A',
},
launcher: {
cssText: '.wrap button {background: #E85230}',
chatIcon: 'https://example.com/logo.svg',
closeIcon: 'https://example.com/close.svg',
style: {
'--background-color': '#F1684A',
'--icon-color': '#fff',
}
}
});
채널 선택 및 이메일 제출 추적
채널 선택 및 이메일 제출을 추적할 수 있도록 웹 SDK는 다음 데이터가 포함된 메시지를 전달하는 postMessage 함수를 사용합니다.
application: 기기 유형입니다.
sdk_version: 웹 SDK의 버전입니다.
user_agent: 브라우저 버전입니다.
company: 테넌트 이름입니다.
menu_name: 최종 사용자가 선택한 대기열 또는 메뉴의 이름입니다.
menu_path: 최종 사용자가 선택한 대기열 또는 메뉴의 경로입니다.
menu_id: 최종 사용자가 선택한 대기열 또는 메뉴의 메뉴 ID입니다.
url: 최종 사용자가 채널을 선택하거나 이메일을 제출했을 때 사용 중이던 웹페이지의 URL입니다.
timestamp: 최종 사용자가 선택한 시간입니다.
has_attachments: 이메일이 제출될 때 첨부파일이 있었는지 여부입니다 (채널 선택 중이 아닌 이메일 제출 중에만 표시됨).
메시지 데이터는 2개의 속성이 있는 ujet 객체에 저장됩니다. 하나는 완료된 작업의 이름을 포함하는 문자열인 action이고, 다른 하나는 이전에 설명한 데이터를 포함하는 data입니다.
메시지에서 데이터를 가져오려면 'message'를 수신 대기하는 이벤트 리스너를 만들면 됩니다. 작업과 데이터를 콘솔에 출력하는 예는 다음 섹션에 설명되어 있습니다. 작동하는 예는 tracking-channel-selection 폴더에서 확인할 수 있습니다.
window.addEventListener('message', (e) => {
if (e.data && e.data.ujet) {
console.log(`Action: ${e.data.ujet.action}`);
console.log(`Message Data: ${e.data.ujet.data}`);
}
});
에이전트 로고 테두리 숨기기
상담사 로고 테두리를 숨기려면 스타일 속성에 '--logo-shadow': 'none'을 추가하고 새 UJET(옵션)에서 true로 설정합니다.
new UJET({
// ...
style: {
'--logo-shadow': 'none',
}
});
실행 아이콘 숨기기
미적인 이유로 웹 UI 실행 아이콘을 숨기고 대신 사전 대응 채팅 트리거를 사용하거나 프로그래매틱 방식으로 채팅을 시작할 수 있습니다. 실행 아이콘을 삭제하려면 런처 속성을 추가하고 새 UJET에서 true로 설정합니다(선택사항).
new UJET({
// ...
launcher: false,
});
프로그래매틱 방식으로 웹 UI를 시작하려면 프로그래매틱 방식으로 웹 UI 시작하기를 참고하세요. 사전 대응 채팅 트리거로 웹 UI를 시작하려면 사전 대응 트리거를 참고하세요.
직접 액세스 포인트 사용
직접 액세스를 사용하여 최종 사용자를 특정 대기열로 직접 보낼 수 있습니다.
직접 액세스 포인트를 사용하려면 다음 단계를 따르세요.
CCAI Platform 포털에 로그인합니다.
설정 > 대기열로 이동합니다.
사용을 전환하여 웹 채널이 사용 설정되어 있는지 확인합니다.
웹 채널의 경우 수정 > 보기로 이동합니다. 웹 구조가 표시됩니다.
최종 사용자가 바로 이동할 대기열을 선택합니다.
액세스 포인트 섹션으로 이동한 다음 직접 액세스 포인트 만들기를 클릭합니다.
다음 정보를 제공합니다.
액세스 포인트 유형을 일반으로 설정합니다.
액세스 포인트 이름을 입력합니다. 액세스 포인트 목록에 표시되는 이름입니다.
일반 액세스 포인트 라벨을 제공합니다. 이 값은 웹 SDK를 구성하는 데 사용됩니다.
만들기를 클릭합니다.
ujet.start(options) 메서드를 사용하여 직접 액세스 포인트의 이름을 전달할 수 있습니다. 아래 예시를 참조하세요.
var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
if (ujet.status === 'open') {
ujet.close();
} else {
ujet.start({ menuKey: '__MENU_KEY__' });
}
});
프로그래매틱 방식으로 웹 UI 닫기
이 단계는 선택사항입니다. 이 단계를 거치지 않으면 웹 UI가 자동으로 종료되고 최소화됩니다.
이 단계를 통해 소비자가 웹 SDK를 닫으려고 할 때 콜백 함수를 호출할 수 있습니다.
ujet.on('close', function() {
// do something here
});
프로그래매틱 방식으로 웹 UI 시작
이 단계는 선택사항입니다. 이 단계를 거치지 않으면 최종 사용자가 웹 UI 실행 아이콘을 클릭하여 웹 UI를 시작할 수 있습니다.
이 단계를 통해 ujet.start(options) 메서드를 사용하여 프로그래매틱 방식으로 웹 UI를 열 수 있습니다. 최종 사용자가 다음과 같이 추가 버튼을 클릭하여 웹 UI를 열도록 할 수 있습니다.
<button id="launcher">클릭하여 열기</button>
var ujet = new UJET({
companyId: "YOUR_COMPANY_ID",
host: "HOST_URL",
launcher: false
});
var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
if (ujet.status === 'open') {
ujet.close();
} else {
ujet.start();
}
});
ujet.on('ready', function() {
launcher.textContent = 'ready to talk';
});
ujet.registerHook('loading', function() {
launcher.textContent = 'loading';
});
ujet.registerHook('open', function() {
launcher.textContent = 'Click to close';
});
ujet.registerHook('close', function() {
launcher.textContent = 'Click to open';
});
ujet.on('created', function() {
ujet.authenticate(getAuthToken);
});
ujet.close() 메서드로 위젯을 닫을 수도 있고 ujet.destroy() 메서드로 위젯을 삭제할 수도 있습니다.
사전 대응 트리거
사전 대응 트리거를 사용하면 웹 SDK가 최종 사용자에게 메시지를 사전 대응 방식으로 전송하도록 트리거할 수 있습니다.
사전 대응 트리거를 설정하려면 다음 단계를 따르세요.
CCAI Platform 포털에서 설정 > 채팅으로 이동합니다.
웹 사전 대응 채팅 트리거 창으로 이동한 다음 트리거 보기를 클릭합니다. 트리거 창이 표시됩니다.
트리거 추가를 클릭합니다. 이름 선택 창이 표시됩니다.
트리거 이름 필드에 이름을 입력한 다음 다음을 클릭합니다. 조건 설정 창이 표시됩니다.
조건을 설정하려면 다음 단계를 따르세요.
최종 사용자 옆에서 조건을 선택합니다.
키워드 입력 필드에 조건에서 참조할 키워드를 입력한 후 Enter 키를 누릅니다.
입력하려는 각 키워드에 대해 이전 단계를 반복합니다.
다른 조건을 추가하려면 다른 조건 추가를 클릭한 다음 원하는 조건 유형을 클릭합니다.
조건의 구성 옵션을 설정합니다.
조건을 추가하려면 이전 두 단계를 반복합니다.
다음을 클릭합니다. 작업 정의 창이 나타납니다.
작업을 정의하려면 다음을 실행하세요.
대기열 할당에서 최종 사용자에게 할당할 채팅 대기열 노드의 이름을 입력합니다. 이 이름의 채팅 대기열이 있으면 필드 아래에 이름이 굵게 표시됩니다.
굵은 글씨로 된 채팅 대기열 이름을 클릭합니다. 확인 대화상자가 나타납니다.
계속하려면 확인을 클릭합니다.
채팅 메시지에 트리거된 채팅에 표시할 메시지를 입력합니다.
마침을 클릭합니다.
새 트리거를 활성화하려면 실시간 스트리밍 시작을 클릭합니다.
기존 티켓 ID
최종 사용자에 대한 기존 티켓이 있는 경우 CRM에서 티켓 ID를 가져와 ujet.start()를 호출하여 웹 SDK에 전달할 수 있습니다.
예를 들면 다음과 같습니다.
yourFunctionToRetrieveTicket()
.then((existingTicket) => {
ujet.start({ ticketId: existingTicket });
});
참고로 ticket-id 폴더의 예시를 참조하세요.