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

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

웹 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 버전 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에는 테마 맞춤설정에 관한 업데이트된 접근 방식이 있습니다. 자세한 내용은 테마 맞춤설정을 참고하세요.