웹 SDK는 모든 최신 데스크톱 및 모바일 브라우저에서 작동하도록 설계되었지만, 다음 브라우저의 최신 버전은 공식적으로 지원됩니다.
데스크톱:
Chrome
Safari
에지
Android
Chrome
에지
iOS:
Chrome
Safari
에지
사전 트리거
사전 대응 트리거를 사용하면 웹 SDK를 실행하고 소비자에게 사전 대응 메시지를 보낼 수 있습니다. 설정 > 채팅 > 웹 사전 대응 채팅 트리거로 이동하여 Contact Center AI Platform에서 사전 대응 채팅 트리거를 설정할 수 있습니다.
자세한 내용은 사전 대응형 웹 SDK 트리거를 참고하세요.
사용자 추적
CRM에서 재방문 사용자를 식별하거나 사용자의 정보를 사용하여 미리 작성된 응답을 사용하려면 사용자에게 identifiers를 추가해야 합니다.
미리 준비된 답변을 사용하려면 CRM이 필요합니다.
인증 (식별자 업데이트)은 세션 시작 시 또는 세션 중간에 실행할 수 있습니다. 세션 중 인증에 대한 자세한 내용은 API를 통한 세션 중 인증을 참고하세요.
식별자
통화 또는 채팅을 시작할 때 Google 시스템은 사용자 인증을 위해 식별자를 사용합니다. 구성 중에 식별자 필드의 원하는 값을 지정할 수 있습니다. 사용자의 GUID (전역적으로 고유한 식별자)를 이미 보유하고 있는 경우 사용자 식별에 사용할 수 있습니다. 하지만 사용자에 대해 보유한 식별자가 열거 가능하거나 개인 식별 정보 (PII)를 포함하는 경우 보안을 강화하기 위해 해싱해야 합니다.
식별자는 다음 위치에 추가해야 합니다.
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: '18008675309' } }) }).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(`Listening 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은(는) 마크다운 형식을 지원합니다.
ccaas.config({
customData: {
"external_chat_transfer": {
"greeting_override": "YOUR GREETING MESSAGE."
}
}
"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": "text",
"text": "Check Order Status"
}
]
},
{
"sender": "agent",
"timestamp": "2021-03-15 12:00:16Z",
"content": [
{
"type": "text",
"text": "I can help you with that, what's your order number?"
}
]
},
{
"sender": "end_user",
"timestamp": "2021-03-15 12:00:20Z",
"content": [
{
"type": "media",
"media": {
"type": "image",
"url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
}
}
]
}
]
}
}
회사 이름
회사 API의 이름 대신 맞춤 name를 선택합니다.
ccaas.config({
name: 'ACME',
})
채팅 전환
상담사가 이용 불가능한 경우, 전환을 통해 상황을 자동으로 처리하는 옵션을 지정할 수 있습니다.
채팅 전환 옵션은 포털의 설정 > 채팅 > 웹 및 모바일 전환에서 확인할 수 있습니다.
직접 액세스 포인트 (DAP)
직접 액세스 포인트를 사용하여 사용자를 대기열 구조의 특정 대기열로 직접 안내할 수 있습니다.
직접 액세스 포인트를 사용하려면 먼저 포털에서 직접 액세스 포인트를 만들어야 합니다.
CCAI Platform 포털에서 설정 > 대기열을 클릭합니다. 설정 메뉴가 표시되지 않으면 메뉴를 클릭합니다.
웹 메뉴의 사용을 사용 설정하고 수정 / 보기로 이동합니다.
대기열 구조에서 대기열을 선택합니다.
직접 액세스 포인트 만들기를 클릭합니다.
액세스 포인트 유형 = 일반
대화상자에서 직접 액세스 포인트의 입력 데이터를 추가합니다.
General Access Point Label필드는 다음 단계에 언급된MenuKey와 일치합니다.만들기를 클릭합니다.
포털을 사용하여 구성한 후 MenuKey:를 사용하여 사용자를 특정 대기열로 안내할 수 있습니다.
ccaas.config({
menuKey: 'vip'
})
티켓 ID
소비자에 대한 기존 티켓이 있는 경우 CRM에서 티켓 ID를 가져와 웹 SDK에 전달할 수 있습니다.
retrieveTicket().then(ticket => {
ccaas.config({ ticketId: ticket.id })
})
자동 채널 선택
preferredChannel를 사용하면 소비자가 특정 대기열을 선택할 때 채널을 자동으로 선택할 수 있습니다.
ccaas.config({
preferredChannel: 'chat'
})
첨부파일 사용 중지
기본적으로 웹 SDK를 사용하면 소비자가 채팅 세션 중에 사진과 동영상을 업로드할 수 있습니다. 다음 스크립트를 사용하여 사용 중지할 수 있습니다.
ccaas.config({
disableAttachment: false
})
맞춤 데이터 전달
채팅이 시작되면 채팅 객체와 함께 맞춤 데이터를 전송할 수 있습니다. 맞춤 데이터는 OS, 버전, 위치 또는 각 채팅과 관련이 있을 수 있는 기타 데이터가 될 수 있습니다.
customData 구성을 사용하여 서명되지 않은 맞춤 데이터를 추가할 수 있습니다.
맞춤 데이터 형식은 JSON 객체와 유사하며 key, label, value로 구성됩니다.
ccaas.config({
customData: {
k1: {
label: 'Version',
value: '1.1.0'
},
k2: {
label: 'Platform',
value: navigator.platform
}
}
})
Key: 데이터의 고유 식별자입니다. 위의 예시에서 k1과 k2는 키입니다.
Label: CRM 페이지의 표시 이름입니다.
Value: 라벨 값
signedCustomData 구성을 사용하여 서명된 맞춤 데이터를 추가할 수 있습니다.
ccaas.config({
signedCustomData: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.n...."
})
signedCustomData은 HS256 알고리즘이 적용된 JWT 문자열입니다.
SIGN_JWT(
algorithm='HS256',
secret=YOUR_COMPANY_SECRET,
payload={
custom_data: {
version: {
label: 'Version',
value: '1.0.0'
},
...
},
iss: 'YOUR TENANT',
iat: NOW,
exp: NOW + 3600,
}
)
여러 언어 지원
lang 필드를 사용하면 실행 시 기본 언어를 제어하고 여러 언어를 지원할 수 있습니다. 생략하면 기본값은 영어 (en)입니다. 기본 언어는 웹사이트의 페이지별로 구성할 수 있습니다. 테넌트에서 다른 언어가 지원되는 경우 소비자에게 다른 언어로 전환할 수 있는 옵션이 제공됩니다.
client.getMenus(key?: string, lang?: string)
.getMenus 메서드는 선택적 lang 매개변수를 허용합니다. .getMenus에 lang 매개변수를 전달하지 않으면 이 메서드는 기본 lang 옵션을 사용합니다.
예시:
const client = new Client({
// ...
lang: 'ja',
})
이 옵션은 다음 속성을 사용하여 액세스할 수 있습니다.
console.log(client.lang)
다음 언어가 지원되며 다음 표에 표시된 약어를 사용합니다.
| 언어 | 약어 |
| 영어 | en |
| 영어(캐나다) | en-CA |
| 영어(영국) | en-GB |
| 영어(호주) | en-AU |
| 영어(인도) | en-IN |
| 스페인어(스페인) | es |
| 스페인어(멕시코) | es-MX |
| 프랑스어(캐나다) | fr-CA |
| 독일어 | de |
| 일본어 | ja |
| 한국어 | ko |
| 이탈리아어 | 있습니다 |
| 중국어(간체) | zh |
| 중국어(번체) | zh-Hant |
| 스웨덴어 | sv |
| 포르투갈어 | pt |
| 포르투갈어(브라질) | pt-BR |
| 핀란드어 | fi |
| 노르웨이어 | nb |
| 덴마크어 | da |
| 네덜란드어 | nl |
| 터키어 | tr |
| 베트남어 | vi |
| 태국어 | th |
| 아랍어 | ar |
| 체코 | cs |
| 폴란드어 | pl |
| 헝가리어 | hu |
| 러시아어 | ru |
| 힌디어 | hi |
| 루마니아어 | ro |
| 크로아티아어 | 시간 |
| 우크라이나어 | uk |
| 타갈로그어 | tl |
번역에 관한 자세한 내용은 메시지 및 번역 맞춤설정 섹션을 참고하세요.
프로그래매틱 방식으로 웹 UI 시작
이 단계를 통해 ccaas.start(options) 메서드로 프로그래매틱 방식으로 웹 UI를 열 수 있습니다.
경우에 따라 소비자가 추가 버튼을 클릭하여 웹 SDK UI를 열도록 할 수 있습니다.
예시:
<button id="launcher">Click to open</button>
var ccass = new UJET({
companyId: "YOUR_COMPANY_ID",
host: "HOST_URL",
authenticate: getAuthToken,
});
ccass.config({disableLauncher: true})
var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
if (ccass.visible) {
ccaas.hide();
launcher.textContent = 'Click to open';
} else {
ccaas.show();
launcher.textContent = 'Click to close';
}
});
ccass.on('ready', function() {
launcher.textContent = 'ready to talk';
});
ccass.close() 메서드로 위젯을 닫을 수도 있고 ccass.destroy() 메서드로 위젯을 삭제할 수도 있습니다.
프로그래매틱 방식으로 웹 UI 닫기
이 단계를 통해 소비자가 웹 SDK를 닫으려고 할 때 콜백 함수를 호출할 수 있습니다.
ccass.on('visible', function(visible) {console.log(visible) })
활성 채팅 세션에 관한 정보 가져오기
채팅 ID를 비롯한 활성 채팅 세션에 관한 정보를 가져올 수 있습니다.
아래 예시를 참조하세요.
ccass.getOngoingChat()
활성 채팅 세션이 있는 경우 채팅 메타데이터를 반환합니다. 활성 채팅 세션이 없으면 null이 반환됩니다.
이를 사용하여 진행 중인 활성 채팅이 있는 경우 SDK를 조건부로 숨겨 소비자가 여러 채팅 세션을 열지 못하도록 할 수 있습니다.
여러 탭 또는 창 간에 열기 또는 닫기 상태 추적
웹사이트의 여러 탭 또는 창 간에 SDK의 열림 또는 닫힘 상태를 동기화할 수 있습니다. 코드 스니펫을 사용하여 로컬 저장소에서 SDK의 상태를 추적합니다.
ccass.on('visible', (isVisible) => {
localStorage['ujetOpen'] = isVisible ? 'yes' : 'no'
})
if (localStorage['ujetOpen'] == 'yes') {
ccass.show()
} else {
ccass.hide()
}
화면 공유 동의 대화상자 및 종료 버튼 맞춤설정
템플릿
이 옵션을 사용하여 화면 공유 대화상자 템플릿을 맞춤설정할 수 있습니다. 기본 template는 다음과 같습니다.
<dialog open class="cobrowse-dialog">
<h1>$title</h1>
<div class="cobrowse-dialog_content">$content</div>
<div class="cobrowse-dialog_footer">
<button class="cobrowse-dialog_allow js-cobrowse-allow">$allow</button>
<button class="cobrowse-dialog_deny js-cobrowse-deny">$deny</button>
</div>
</dialog>
이 template는 다음 용도로 사용됩니다.
세션 확인 대화상자
리모컨 확인 대화상자
전체 기기 확인 대화상자
템플릿의 매개변수는 messages 옵션의 콘텐츠로 대체됩니다.
confirmSessionTemplate
이 옵션은 세션 확인 대화상자를 맞춤설정하는 데 사용됩니다.
confirmRemoteControlTemplate
이 옵션은 리모컨 확인 대화상자를 맞춤설정하는 데 사용됩니다.
confirmFullDeviceTemplate
이 옵션은 전체 기기 확인 대화상자를 맞춤설정하는 데 사용됩니다.
sessionControlsTemplate
이 옵션은 세션 컨트롤 버튼을 맞춤설정하는 데 사용됩니다. 기본 템플릿은 다음과 같습니다.
<button class="cobrowse-end js-cobrowse-end">$end</button>
메시지
위 템플릿에는 다음과 같은 메시지 변수가 포함되어 있습니다.
$title$content$allow$deny
이러한 변수는 다음으로 대체됩니다.
{
confirmSessionTitle: string; // $title
confirmSessionContent: string; // $content
confirmRemoteControlTitle: string; // $title
confirmRemoteControlContent: string; // $content
confirmFullDeviceTitle: string; // $title
confirmFullDeviceContent: string; // $content
allowText: string; // $allow
denyText: string; // $deny
endSessionText: string; // $end
}
예를 들어 en 언어의 메시지와 같이 화면 공유 메시지가 내장되어 있습니다.
{
"confirmSessionTitle": "Screen Share Session Request",
"confirmSessionContent": "Do you want to share your current screen with the agent?",
"endSessionText": "End Screen Share Session",
"confirmRemoteControlTitle": "Remote Access Request",
"confirmRemoteControlContent": "The agent would like to have access to your currently shared screen to further assist you. Do you want to allow this?",
"confirmFullDeviceTitle": "Screen Share Request",
"confirmFullDeviceContent": "Do you want to share your full screen with the agent? The agent will not be able to control anything on the screen.",
"allowText": "Allow",
"denyText": "Deny"
}