Web SDK API 참조

이 페이지에는 웹 SDK의 API 메서드가 포함되어 있습니다.

웹 SDK 초기화

다음 코드를 사용하여 웹 SDK를 초기화합니다.

    const ujet = new UJET({
      companyId: '',
      // ...
    })

옵션

이 섹션에는 웹 SDK를 초기화할 때 전달할 수 있는 옵션이 포함되어 있습니다.

`companyId`

필수

CCAI Platform 포털에서 companyId를 검색하려면 다음 단계를 따르세요.

관리자 계정으로 CCAI 플랫폼 포털에 로그인합니다.
설정 > 개발자 설정으로 이동합니다.

회사 키 복사

new UJET({
  companyId: '{ COMPANY KEY }',
})

`tenant`

권장

테넌트는 Contact Center AI Platform (CCAI Platform) 인스턴스의 하위 도메인으로, 환경이라고도 합니다. 예를 들어 CCAI Platform 포털이 https://acme.ccaiplatform.com/이면 acme은 테넌트입니다. 아래 예시를 참조하세요.

```sh
new UJET({
  companyId: '....',
  tenant: 'acme',
})
```

`host`

선택사항

host는 웹 SDK에서 사용하는 API 엔드포인트입니다. tenant를 설정한 경우 host를 설정할 필요가 없습니다.

new UJET({
  companyId: '....',
  host: 'https://acme.api.ccaiplatform.com',
})

host이 아닌 tenant를 설정한 경우 웹 SDK는 tenant에 따라 host 값을 구성합니다. 아래 예시를 참조하세요.

https://{tenant}.api.ccaiplatform.com

`authenticate`

선택사항

authenticate는 프로미스와 함께 JWT 토큰을 반환하는 함수입니다. 아래 예시를 참조하세요.

new UJET({
  // ...
  authenticate: getAuthToken,
})

function getAuthToken () {
  return fetch('/ujet/token').then(function(resp) {
    return resp.json()
  })
}

웹 SDK에서는 인증이 필요하지만 authenticate 옵션은 선택사항입니다. created 이벤트에서 ujet.authenticate을 호출할 수 있습니다.

var ujet = new UJET({ ... })
ujet.on('created', function() {
  getAuthToken().then({ token } => {
    ujet.authenticate({ token })
  })
})

`lang`

선택사항

최종 사용자의 기본 언어입니다. 아래 예시를 참조하세요.

new UJET({
  // ...
  lang: 'ja',
})

`user`

선택사항

아래 예시를 참조하세요.

new UJET({
  companyId: '....',
  user: {
    identifier: '...',
    name: '...',
    email: '...',
  },
})

`launcher`

선택사항

launcher 옵션은 false 또는 객체일 수 있습니다. 다음 launcher 옵션을 참고하세요.

right: string,
bottom: string,
cssText: string,
chatIcon: url,
closeIcon: url,
style: {
  '--background-color': color,
  '--icon-color': color,
}

CCAI Platform 기본 런처를 사용 중지하려면 이 옵션을 false로 설정하면 됩니다. 아래 예시를 참조하세요.

const ujet = new UJET({
  companyId: '...',
  launcher: false,
})
// use your own button: `<button id="start-chat">Chat with Me</button>`
document.querySelector('#start-chat').addEventListener('click', function() {
  ujet.open()
})

또는 내장 런처를 맞춤설정할 수 있습니다. 아래 예시를 참조하세요.

new UJET({
  companyId: '...',
  launcher: {
    // cssText: 'body{color:red}',
    // chatIcon: 'https://example.com/logo.svg',
    // closeIcon: 'https://example.com/static/close.svg',
    // right: '50px',
    // bottom: '50px',
    style: {
      '--icon-color': '#FFF',
      '--background-color': '#F1684A',
    }
  },
})

`logo`

권장

회사 로고 URL입니다. 아래 예시를 참조하세요.

new UJET({
  logo: 'https://example.com/logo.svg',
})

`style`

선택사항

style 옵션을 사용하여 웹 SDK 위젯을 맞춤설정합니다. 아래 예시를 참조하세요.

    new UJET({
      // ...
      style: {
        // links: ['https://example.com/font.css'],
        '--primary-font': '',
        '--primary-color': '',
        '--link-color': '',
        '--logo-shadow': '',
      }
    })

`customData`

선택사항

채팅이 시작될 때 채팅과 함께 맞춤 데이터를 전송할 수 있습니다. 아래 예시를 참조하세요.

new UJET({
  // ...
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
    }
  }
})

`disableAttachment`

선택사항

disableAttachment이 true로 설정된 경우 웹 SDK는 최종 사용자가 채팅에서 사진, 동영상 또는 기타 첨부파일을 업로드하는 것을 허용하지 않습니다. 아래 예시를 참조하세요.

    new UJET({
      companyId: '....',
      disableAttachment: true,
    })

`right`

선택사항

런처가 아닌 위젯의 오른쪽에 배치합니다. launcher.right에 따라 이 값을 조정합니다. 아래 예시를 참조하세요.

new UJET({
  right: '50px',
})

`bottom`

선택사항

런처가 아닌 위젯 아래에 배치합니다. launcher.bottom에 따라 이 값을 조정합니다. 아래 예시를 참조하세요.

new UJET({
  bottom: '150px',
})

`translation`

선택사항

웹 SDK의 번역 기능을 사용합니다. 다음 예를 참고하세요.

new UJET({
  translation: {
    "en": {
      "ujet_start_title": "English!",
      "ujet_greeting": "Hi there!"
    },
    "es": {
      "ujet_start_title": "¡Español!",
      "ujet_greeting": "¡Hola!"
    },
    "fr": {
      "ujet_start_title": "Français!",
      "ujet_greeting": "Salut!"
    },
    "de": {
      "ujet_start_title": "Deutsche!",
      "ujet_greeting": "Hallo!"
    },
    "ja": {
      "ujet_start_title": "日本語！",
      "ujet_greeting": "こんにちは！"
    }
  }
})

메서드

이 섹션에는 UJET 객체의 메서드가 포함되어 있습니다.

`.on(event, callback)`

지정된 event를 수신할 때 callback를 실행합니다.

ujet.on('ready', function() {
  console.log('widget is ready')
})

이벤트 문서에서 모든 이벤트를 확인하세요.

`.off(event, callback)`

이벤트 리스너에서 지정된 callback를 삭제합니다.

function ready() {
  console.log('widget is ready')
}

ujet.on('ready', ready)
ujet.off('ready', ready)

`.authenticate(authData)`

token 값을 위젯에 전송합니다. 이 메서드는 일반적으로 created 이벤트에서 호출됩니다.

ujet.on('created', function() {
  fetchToken().then(function(token) {
    ujet.authenticate({ token: token })
  })
})

`.authenticate(authFunction)`

.authenticate 메서드에 함수를 전달할 수도 있습니다. 이 함수는 token의 promise를 반환해야 합니다.

ujet.on('created', function() {
  ujet.authenticate(function(callback) {
    return fetchToken().then(function(token) {
      return { token: token }
    })
  })
})

`.start({ menuKey, ticketId })`

위젯은 최종 사용자가 런처를 클릭할 때 시작되지만 다음 코드로도 시작할 수 있습니다.

// if end user stayed in the web page for 10 senconds
setTimeout(function() {
  ujet.start({ menuKey: 'help' })
}, 10000)

menuKey이 있는 .start인 경우 위젯이 해당 대기열로 바로 이동합니다.

`.open()`

.open는 .start와 비슷하지만 매개변수를 허용하지 않습니다.

setTimeout(function() {
  ujet.open()
}, 10000)

`.close()`

다음과 같이 프로그래매틱 방식으로 위젯을 최소화합니다.

ujet.on('chat:status', function(status) {
  if (status === 'timeout') {
    ujet.close()
  })
})

`.destroy()`

웹 SDK를 소멸시킵니다. 즉, 현재 웹페이지에서 삭제합니다.

`.registerHook(event, fn)`

.registerHook의 event는 .on의 event와 다릅니다. 이 함수는 일반적으로 자체 런처를 사용하려는 경우에 사용됩니다.

// <button id="launcher">Click to open</button>

const ujet = new UJET({
  // ...
  launcher: false,
})

const launcher = document.getElementById('launcher')
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close()
  } else {
    ujet.open()
  }
});

ujet.registerHook('loading', function () {
  launcher.textContent = 'loading'
})

ujet.registerHook('open', function () {
  launcher.textContent = 'Click to close'
})

ujet.registerHook('close', function () {
  launcher.textContent = 'Click to open'
})

번역

다음은 번역을 맞춤설정하는 데 사용할 수 있는 키 목록입니다.

ujet_start_title
ujet_greeting

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

웹 SDK 초기화

옵션

companyId

tenant

host

authenticate

lang

user

launcher

logo

style

customData

disableAttachment

right

bottom

translation

메서드

.on(event, callback)

.off(event, callback)

.authenticate(authData)

.authenticate(authFunction)

.start({ menuKey, ticketId })

.open()

.close()

.destroy()

.registerHook(event, fn)

번역

Web SDK API 참조

`companyId`

`tenant`

`host`

`authenticate`

`lang`

`user`

`launcher`

`logo`

`style`

`customData`

`disableAttachment`

`right`

`bottom`

`translation`

`.on(event, callback)`

`.off(event, callback)`

`.authenticate(authData)`

`.authenticate(authFunction)`

`.start({ menuKey, ticketId })`

`.open()`

`.close()`

`.destroy()`

`.registerHook(event, fn)`