웹 SDK 버전 2에서 웹 SDK 버전 3으로 업그레이드

이 페이지에서는 웹 SDK 버전 2에서 웹 SDK 버전 3으로 업그레이드하는 방법을 설명합니다. 웹 SDK를 처음 설치하는 경우 웹 SDK v3 가이드를 참고하세요.

웹 SDK v3 기능

다음은 웹 SDK v2에는 없는 웹 SDK v3 기능입니다.

  • 맞춤 양식: 상담원은 웹 채팅 인터페이스 내에서 직접 맞춤 데이터 수집 양식을 보낼 수 있습니다. 자세한 내용은 데이터 수집 양식을 참고하세요.

  • 다운로드 가능한 스크립트: 최종 사용자가 위젯에서 직접 채팅 스크립트를 다운로드할 수 있습니다. 자세한 내용은 채팅 스크립트 웹 SDK 및 모바일 SDK를 사용하여 다운로드를 참고하세요.

  • 고급 사전 예방적 채팅 트리거: 고급 사전 예방적 채팅 트리거를 사용합니다(예: 대기열 언어 지정 또는 URL 키워드에 복잡한 AND-OR 로직 사용). 자세한 내용은 사전 예방적 웹 SDK 트리거를 참고하세요.

웹 SDK v3으로 업그레이드

먼저 소스 코드 내에서 이 스크립트를 찾습니다.

<script type="module" src="https://websdk.ujet.co/v2/loader.js"></script>

그런 다음 다음으로 바꿉니다.

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

주목할 만한 차이점

웹 SDK v3은 UJET 헤드리스 클라이언트를 기반으로 직접 빌드됩니다. 위젯 UI는 이 헤드리스 구조를 사용하므로 ccaas.client를 타겟팅하여 헤드리스 SDK에서 지원하는 모든 기본 메서드에 액세스하고 호출하며 이벤트를 수신 대기할 수 있습니다.

이 섹션에서는 웹 SDK 버전 2와 3의 주요 차이점을 간략하게 설명합니다.

초기화

v2

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

v3

var ccas = new UJET({
  "companyId": "{companyId}",
  "host": "https://{your_ccaas_host}",
  "authenticate": getAuthToken
})

// v3 has a mount point
// ccaas.mount(HTMLElement | string)
ccaas.mount('#ccaas-widget')

옵션

웹 SDK를 시작할 때 옵션을 지정합니다. 이 섹션에서는 웹 SDK 버전 2와 3의 차이점을 설명합니다.

v2

v2에는 해당사항 없음

v3

v3에서 초기화 옵션은 헤드리스 SDK와 동일합니다.

interface ClientOption {
  companyId: string;
  authenticate: () => Promise<TokenResponse>;
  tenant?: string;
  host?: string;
  lang?: string;
  bridge?: string;
  cobrowse?: {
    enabled: boolean;
    template?: string;
    messages?: CobrowseMessages;
    api?: string;
    license?: string;
    trustedOrigins?: string[];
    capabilities?: string[];
    registration?: boolean;
    redactedViews?: string[];
    unredactedViews?: string[];
  };
}

ccaas.config() 메서드를 사용하여 추가 옵션을 구성할 수 있습니다.

ccaas.config({
  disableAttachment: true
})

사용 가능한 구성 옵션:

interface ConfigOptions {
  accent?: AccentColor;
  logo?: string;
  menuKey?: string;
  ticketId?: string;
  preferredChannel?: string;
  disableAttachment?: boolean;
  customData?: string | Record<string, any>;
  messages?: Record<string, unknown>;
  reCaptchaSiteKey?: string;
}

메서드

v2에는 로더에 다음과 같은 몇 가지 추가 메서드가 있습니다.

ccaas.createCobrowseCode()
ccaas.fetchWaitTimes({id: 123})

v3에서 위젯 UI는 헤드리스 클라이언트를 사용하므로 헤드리스 SDK에서 지원하는 모든 메서드를 호출할 수 있습니다.

const client = ccaas.client
client.getCompany()
client.loadOngoingChat()

자세한 내용은 헤드리스 웹 SDK 가이드를 참고하세요.

이벤트

v2에서는 다음을 사용하여 이벤트를 수신 대기할 수 있습니다.

ccaas.on('chat:update', (chat) => {
  console.log(chat)
})

v3에서는 헤드리스 클라이언트를 사용하여 이벤트를 수신 대기할 수 있습니다.

const client = ccaas.client

client.on('chat.updated', (chat) => {
  console.log(chat)
})

자세한 이벤트는 헤드리스 웹 SDK 가이드를 참고하세요.

테마 맞춤설정

웹 SDK v3에는 테마 맞춤설정에 관한 업데이트된 접근 방식이 있습니다. 자세한 내용은 테마 맞춤설정을 참고하세요.