시작하기

웹 SDK를 사용하여 Contact Center AI Platform (CCAI Platform) 기능을 웹 애플리케이션에 통합합니다. 웹 SDK는 헤드리스 웹 SDK를 기반으로 빌드되므로 모든 헤드리스 클라이언트 메서드를 웹 SDK 위젯에서 사용할 수 있습니다. 이 페이지에서는 웹 SDK를 마운트하고 초기화하고 인증하는 방법을 보여줍니다. 새 대화를 시작하고 스크립트를 다운로드하는 버튼과 명령어를 숨기는 방법도 설명합니다.

웹 SDK 설치에 관한 도움말은 GitHub의 구현 예를 참고하세요.

기본 예시

기본 예시에는 다음 3가지 옵션만 필요합니다.

companyId
host
Authenticate

위젯 문서를 따라 회사 ID와 호스트를 가져옵니다.

전체 HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic demo</title>
</head>
<body>
  <!-- An empty element to mount the CCAI Platform web SDK widget. -->
  <div id="ccaas-widget"></div>

  <!-- Include the CCAI Platform web SDK widget -->
  <script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
  <script>
    var ccaas = new UJET({
      companyId: "$COMPANY_ID",
      host: "$HOST",
      authenticate: getAuthToken
    });
    ccaas.mount("#ccaas-widget");

    function getAuthToken() {
      // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
      return fetch('/auth/token').then(function(resp) {
        // { token: 'a JWT contains user identifier, name, and email' }
        return resp.json();
      });
    }
  </script>
</body>
</html>

맞춤 데이터 예

맞춤 데이터 예는 기본 예와 유사합니다. .config({ customData })로 맞춤 데이터를 구성해야 합니다.

전체 HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Data demo</title>
</head>
<body>
  <!-- An empty element to mount the CCAI Platform web SDK widget. -->
  <div id="ccaas-widget"></div>

  <!-- Include the CCAI Platform web SDK widget -->
  <script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
  <script>
    var ccaas = new UJET({
      companyId: "$COMPANY_ID",
      host: "$HOST",
      authenticate: getAuthToken
    });

    // use `.config` to configure custom data.
    ccaas.config({
      customData: {
        version: {
          label: 'Version',
          value: '1.0.0'
        }
      }
    });
    ccaas.mount("#ccaas-widget");

    function getAuthToken() {
      // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
      return fetch('/auth/token').then(function(resp) {
        // { token: 'a JWT contains user identifier, name, and email' }
        return resp.json();
      });
    }
  </script>
</body>
</html>

준비

Contact Center AI Platform Web SDK를 실행하려면 다음 단계를 따르세요.

웹 SDK 위젯 스크립트를 포함합니다.
마운트 요소를 준비합니다.
COMPANY_KEY로 웹 SDK 초기화

백엔드 코드를 사용하여 COMPANY_SECRET로 인증 초기화

<!-- an empty element to mount the web SDK -->
<div id="ccaas-widget"></div>

<script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
<script>
  // const ccaas = new UJET({ ... })
</script>

회사 키 가져오기

관리자 권한이 있는 계정을 사용하여 Contact Center AI Platform 포털에 로그인합니다.
설정 > 개발자 설정으로 이동합니다.
회사 키를 COMPANY_KEY로 복사합니다.

여기에서 회사 비밀을 확인할 수도 있습니다. 보안 비밀은 백엔드 서버에서 인증 토큰 엔드포인트를 만드는 데 사용됩니다. 자세한 내용은 인증 섹션을 참고하세요.

초기화 중

그런 다음 새 UJET(options) 메서드로 CCAI Platform 웹 SDK를 초기화할 수 있습니다. 포털이 https://{your_ccaas_host}인 경우 호스트는

https://{your_ccaas_host}:
const ccaas = new UJET({
  companyId: "{COMPANY_KEY}",
  host: "https://{your_ccaas_host}",
  authenticate: getAuthToken,
});

옵션은 헤드리스 웹 SDK 가이드와 동일합니다.

인증

getAuthToken는 백엔드에서 JWT 서명 메커니즘을 호출하는 함수입니다.

async function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  const resp = await fetch('/auth/token')
  const data = await resp.json()
  return { token: data.token }
}

자세한 내용은 인증 섹션을 참고하세요.

SDK 구성

ccaas.config({...})를 사용하여 웹 SDK를 구성합니다.

다음 코드에는 웹 SDK를 구성하기 위한 속성이 나열되어 있습니다.

export interface ConfigOptions {
  name?: string
  accent?: 'default' | 'blue' | 'green' | 'purple' | 'orange' | 'yellow' | 'gold' | 'red'
  logo?: string
  menuKey?: string
  ticketId?: string
  preferredChannel?: string
  disableAttachment?: boolean
  customData?: Record<string, any>
  signedCustomData?: string
  messages?: Record<string, unknown>
  disableLauncher?: boolean
  launcherOpenIcon?: string
  launcherCloseIcon?: string
  launcherLoadingIcon?: string
  optionsMenuIcon?: string
  confirmationIcon?: string
  enableMuteChat?: boolean
  tooltipIcon?: string
  hideNewConversation?: boolean
  hideDownloadTranscriptOptions?: boolean
  hideDownloadTranscriptPostChat?: boolean
}

자세한 내용은 지원되는 기능 및 테마 맞춤설정을 참고하세요.

세션이 끝날 때 새 대화를 시작하는 버튼 숨기기

세션이 끝날 때 최종 사용자의 채팅 창에서 새 대화 시작 버튼을 숨기도록 웹 SDK를 구성할 수 있습니다. 이렇게 하려면 ccaas.config 메서드에 hideNewConversation 속성을 포함하세요. 자세한 내용은 SDK 구성을 참고하세요.

세션 중에 스크립트를 다운로드하는 명령어 숨기기

세션 중에 최종 사용자의 채팅 창에 있는 채팅 옵션 메뉴에서 스크립트 다운로드 명령어를 숨기도록 웹 SDK를 구성할 수 있습니다. 이렇게 하려면 ccaas.config 메서드와 함께 hideDownloadTranscriptOptions 속성을 포함하세요. 자세한 내용은 SDK 구성을 참고하세요.

세션이 종료되면 스크립트 다운로드 버튼 숨기기

세션이 끝날 때 최종 사용자의 채팅 창에서 스크립트 다운로드 버튼을 숨기도록 웹 SDK를 구성할 수 있습니다. 이렇게 하려면 ccaas.config 메서드에 hideDownloadTranscriptPostChat 속성을 포함하세요. 자세한 내용은 SDK 구성을 참고하세요.

위젯 마운트

처음에 빈 요소를 준비해야 합니다.

<div id="ccaas-widget"></div>

그런 다음 위젯을 이 요소에 마운트할 수 있습니다.

ccaas.mount('#ccaas-widget')

헤드리스 웹 SDK 가이드를 사용하여 자체 채팅 및 통화 위젯을 만드세요.

설치

npm을 사용하여 패키지를 설치할 수 있습니다.

npm install @ujet/websdk-headless --save

또는 CCAI Platform 인스턴스에서 호스팅되는 스크립트를 사용할 수 있습니다.

<script src="https://{your_ccaas_host}/web-sdk/v3/headless.js"></script>

<script>
  // const client = new HeadlessClient(...)
</script>

SDK 통합

관리자 권한이 있는 계정을 사용하여 Contact Center AI Platform 포털에 로그인합니다.
설정 > 개발자 설정으로 이동합니다.
회사 키를 COMPANY_KEY로 복사합니다.

포털이 https://{your_ccaas_host}인 경우 회사 정보를 가져오는 예는 다음과 같습니다.

import { Client } from "@ujet/websdk-headless"

async function authenticate() {
  const resp = await fetch("/your-auth-endpoint")
  const data = await resp.json()
  return { token: data.token }
}

const client = new Client({
  companyId: "COMPANY_KEY",
  host: "https://{your_ccaas_host}",
  authenticate: authenticate,
})

const company = await client.getCompany()

시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

기본 예시

전체 HTML

맞춤 데이터 예

전체 HTML

준비

회사 키 가져오기

초기화 중

인증

SDK 구성

세션이 끝날 때 새 대화를 시작하는 버튼 숨기기

세션 중에 스크립트를 다운로드하는 명령어 숨기기

세션이 종료되면 스크립트 다운로드 버튼 숨기기

위젯 마운트

설치

SDK 통합

시작하기