헤드리스 웹 SDK를 사용하면 필요에 따라 회사의 지원 환경을 확장하고 맞춤설정할 수 있습니다. 여기에는 친숙한 모든 웹 SDK 기능이 포함되어 있으며 이러한 기능을 지원하는 UI와 UX를 빌드할 수 있습니다.
헤드리스 웹 SDK를 설치하고 사용하려면 조직의 웹 개발팀의 지원이 필요합니다. 성공적으로 통합하고 최적의 성능을 달성하려면 자격을 갖춘 인력을 참여시키는 것이 좋습니다.
소프트웨어 개발의 맥락에서 '헤드리스'는 프런트엔드 프레젠테이션 레이어('헤드')가 백엔드 로직 및 기능과 분리된 분리된 아키텍처를 의미합니다. 헤드리스 아키텍처에서 백엔드('헤드리스' 부분이라고도 함)는 기능을 사용하고 서비스를 이용할 수 있는 API를 제공합니다.
예를 들어 맞춤 워크플로 자동화가 있습니다. 최종 사용자가 채팅을 시작하면 on("chat.message") 이벤트가 트리거됩니다. 수신한 특정 채팅 메시지를 기반으로 맞춤 자동화 트리거를 정의할 수 있습니다. 예를 들어 최종 사용자가 채팅에 '에스컬레이션'이라고 입력하면 이벤트 핸들러가 채팅 세션을 상위 수준 지원팀으로 자동 에스컬레이션하여 중요한 문제에 신속하게 대응할 수 있습니다.
이 가이드에서는 SDK의 설치 프로세스, 통합 기능, 사용법을 안내합니다. API 사용에 관한 자세한 내용은 헤드리스 웹 SDK API 문서를 참고하세요. 사용 가능한 이벤트 목록은 이벤트 페이지에서 확인할 수 있습니다.
헤드리스 웹 SDK 설치
헤드리스 웹 SDK를 설치하려면 프로젝트에서 다음 코드 스니펫을 사용하세요.
npm install @ujet/websdk-headless --save
헤드리스 웹 SDK 사용
헤드리스 웹 SDK를 사용하려면 제공된 예시 코드를 따르세요.
import { Client } from "@ujet/websdk-headless"
const client = new Client({ ... })
async function authenticate() {
const resp = await fetch("/your-auth-endpoint")
const data = await resp.json()
return { token: data.token }
}
const client = new Client({
companyId: "YOUR-COMPANY-ID",
tenant: "YOUR-TENANT-NAME",
authenticate: authenticate,
})
// const company = await client.getCompany()
// const menus = await client.getMenus()
클라이언트 클래스는 여러 옵션을 허용합니다 (요구사항에 따라 맞춤설정할 수 있음).
interface ClientOption {
companyId: string;
authenticate: () => Promise<TokenResponse>;
tenant?: string;
host?: string;
lang?: string;
bridge?: string;
cobrowse?: {
enabled: boolean;
messages?: CobrowseMessages;
api?: string;
license?: string;
trustedOrigins?: string[];
capabilities?: string[];
registration?: boolean;
redactedViews?: string[];
unredactedViews?: string[];
};
}
로깅 사용 설정
구현 및 테스트 중에 콘솔 로그에서 추가 정보를 수집해야 할 수 있습니다. 헤드리스 SDK의 로깅을 사용 설정하려면 웹 애플리케이션에 다음 코드를 추가하여 Logger 및 consoleLoggerHandler를 가져옵니다.
import {Logger, consoleLoggerHandler } from '@ujet/websdk-headless'
Logger.addHandler(consoleLoggerHandler)
화면 공유 구성
헤드리스 웹 SDK를 사용하여 화면 공유를 사용 설정하고 구성할 수 있습니다.
다음 코드 샘플은 화면 공유를 사용 설정하는 방법을 보여줍니다.
new Client({
// ...
cobrowse: {
enabled: true,
license: 'YOUR_SCREEN_SHARE_LICENSE'
}
})
다음 코드 샘플은 화면 공유 옵션을 보여줍니다.
interface CobrowseOption {
enabled: boolean
template?: string
confirmSessionTemplate?: string
confirmRemoteControlTemplate?: string
confirmFullDeviceTemplate?: string
sessionControlsTemplate?: string
root?: Element
messages?: {
confirmSessionTitle: string;
confirmSessionContent: string;
confirmRemoteControlTitle: string;
confirmRemoteControlContent: string;
confirmFullDeviceTitle: string;
confirmFullDeviceContent: string;
allowText: string;
denyText: string;
endSessionText: string;
}
api?: string
license?: string
trustedOrigins?: string[]
capabilities?: string[]
registration?: boolean
redactedViews?: string[]
unredactedViews?: string[]
}
커스텀 템플릿
이전 코드 샘플의 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>
이 템플릿을 사용하여 다음 항목에 대한 최종 사용자의 승인을 요청하는 대화상자를 구성할 수 있습니다.
화면 공유 세션 시작
원격 제어 화면 공유 세션 시작
전체 기기 화면 공유 세션 시작
템플릿 옵션은 다음과 같습니다.
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
}
다음 예시는 기본 영어 변수 값을 보여줍니다.
{
"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"
}
맞춤 데이터 구성
custom_data 옵션을 사용하면 임의의 키-값 쌍 데이터를 웹 SDK에 전달할 수 있습니다.
용도
채팅을 만들 때 맞춤 데이터를 객체 (서명되지 않음) 또는 문자열 (서명됨)로 제공할 수 있습니다.
interface ChatRequest {
lang?: string;
trigger_id?: string;
ticket_id?: string;
email?: string;
greeting?: string;
cobrowsable?: boolean;
custom_data?: {
signed?: string;
unsigned?: Record<string, any>;
};
}
아래 예시를 참조하세요.
const custom_data = {
unsigned: {
version: {
label: 'Version',
value: '1.0.0'
}
},
signed: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // JWT or other signed payload
}
try {
const chat: Chat = await client.createChat(123, { custom_data })
} catch (error) {
// handle error
}
외부 챗봇 트랜스퍼
다른 채팅 제공업체의 기록과 상호작용을 유지하고 싶을 수 있습니다. custom_data object를 사용하여 이 작업을 수행할 수 있습니다.
아래 예시를 참조하세요.
const custom_data = {
unsigned: {
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: "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"
}
}
]
}
]
}
},
signed: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // JWT or other signed payload
}
try {
const chat: Chat = await client.createChat(123, { custom_data })
} catch (error) {
// handle error
}
참조 구현
웹 SDK의 참조 구현은 GitHub의 ccaas-web-headless-sdk-sample을 참고하세요.
이 저장소에는 CCAI Platform Web Headless SDK를 사용하여 빌드된 채팅 애플리케이션 데모가 포함되어 있습니다. Node.js 백엔드에서 보안 인증 및 구성 제공을 처리하고 순수 JavaScript 프런트엔드에서 채팅 사용자 인터페이스를 제공하는 기본 클라이언트-서버 아키텍처를 보여줍니다.