연동하기

Alli 자바스크립트 연동은 쉽고 간단합니다. 아래 코드를 웹사이트에 붙여넣기만 하면 됩니다.

<head>
<script src="https://sdk.alli.ai/latest/alli.js"></script>
</head>

<body>
<!-- ...Your website content... -->

<!-- Start of Alli Code -->
<script>
  // apiKey 는 Alli 대시보드에서 제공되는 고유값을 입력합니다. 
  Alli.initialize({
    apiKey: "YOUR_API_KEY",
    debug: false, // 켜져 있으면 콘솔에 디버그 정보가 표시됩니다.
    backButton: true, // 선택사항으로 기본값은 true 입니다. Alli 헤더에서 뒤로가기 버튼을 제거하고 싶으면 이 옵션을 끄면 됩니다.
    providerLink: true, // 선택사항으로 기본값은 true 입니다. Alli 서비스 제공자 페이지로 가는 링크를 제거하려면 이 옵션을 끄면 됩니다.
    styleOptions: { // 선택사항이며 외형 커스터마이징 관련입니다.
      conversationContainer: {
        right: 50, // 화면 오른쪽으로부터의 간격입니다. 프로젝트 설정에서 SDK 위치가 오른쪽일 때 적용됩니다.
        left: 50, // 화면 왼쪽으로부터의 간격입니다. 프로젝트 설정에서 SDK 위치가 왼쪽일때 적용됩니다.
        bottom: 50 // 화면 아래쪽으로부터의 간격입니다.
      }
    }
  });
  if (window.Alli) {
    window.Alli.event();
  }
</script>
<!-- End of Alli Code -->
</body>

웹사이트 오른쪽 하단에 Alli 가 로딩되는지 확인하면 연동이 완료됩니다.

보다 상세한 내용은 아래를 참고하세요.

SDK 초기화

아래 <!-- Start of Alli Code> 부터 <!-- End of Alli Code> 까지를 웹사이트의 <body> 마지막 부분에 복사하여 붙여넣습니다.

<head>
<script src="https://sdk.alli.ai/latest/alli.js"></script>
</head>

<body>
<!-- ...Your website content... -->

<!-- Start of Alli Code -->
<script>
  if (window.Alli) {
    //apiKey is unique identifier provided by Alli 
    Alli.initialize({
      apiKey: "YOUR_API_KEY",
      debug: false,
      backButton: true
    });
  }
</script>
<!-- End of Alli Code -->
</body>

대화 시작하기

아래와 같이 대화를 시작합니다.

if (window.Alli) {
    window.Alli.event();    
}

아래 두 옵션 중 한가지를 선택할 수 있습니다.

옵션 1: User ID 나 Placement 정보 없이 바로 대화를 시작합니다.

window.Alli.event();

Option 2: User ID 나 Placement 정보를 지정하고 싶으면 아래와 같이 입력합니다.

window.Alli.event({
    user: {id: "YOUR_USER_ID"},
    placement: "YOUR_PLACEMENT"
});

고급 설정

아래 고급 설정 가이드에서는 Alli SDK 에서 조절하는 기능들을 설명합니다.

Alli 토글 아이콘 위치 조정

주요 타겟 브라우저 등을 고려해 Alli 의 토글 아이콘 위치를 조절할 수 있습니다.

이니셜라이징 시 아래와 같이 StyleOptions > ConversationContainer > right, left, bottom 값을 조정하면 됩니다. 기본값은 50입니다.

Alli.initialize({
  styleOptions: { // 선택사항이며 외형 커스터마이징 관련입니다.
    conversationContainer: {
      right: 50, // 화면 오른쪽으로부터의 간격입니다. 프로젝트 설정에서 SDK 위치가 오른쪽일 때 적용됩니다.
      left: 50, // 화면 왼쪽으로부터의 간격입니다. 프로젝트 설정에서 SDK 위치가 왼쪽일때 적용됩니다.
      bottom: 50 // 화면 아래쪽으로부터의 간격입니다.
    }
  }
});

토글 아이콘과 프리뷰 없이 전체 화면으로 Alli 로딩하기

모바일 브라우저 등의 작은 화면에 Alli 를 로딩하는 등의 경우, 토글 아이콘과 프리뷰를 생략하고 바로 전체 화면으로 챗 UI 를 불러와야 할 때가 있습니다. 아래와 같이 popupMode 와 launcher 를 사용하면 됩니다.

Alli.initialize({
  popupMode: true,
  launcher: false
});

popupMode 가 ture 로 설정되면 Alli 는 프리뷰 없이 바로 전체 화면의 챗 UI로 로딩됩니다. launcher 가 false 로 설정되면 토글 아이콘을 로드하지 않습니다.

유저 특정

유저 ID 로 특정되지 않는 유저의 경우 Alli 는 쿠키를 사용해 정보를 저장합니다. 즉 쿠키 히스토리를 삭제하거나 다른 디바이스를 사용해 접속하는 경우 유저를 특정할 수 없습니다.

웹사이트에 로그인하여 유저가 특정되어 있는 경우 Alli 에게 정보를 전달할 수 있습니다. 혹은 로그인되지 않은 유저를 위해 임시 ID 를 생성할 수도 있습니다.

예를 들어 유저 ID 가 USER-123 인 경우 아래와 같이 입력합니다.

Alli.setUser({
  id: "USER-123"
});

유저 관련 정보가 더 있을 경우 setUser() 함수를 이용해 아래와 같은 형식으로 Alli 프로젝트 내의 변수에 정보를 저장할 수 있습니다.

Alli.setUser({
  id: "USER-123",
  email: "user123@gmail.com",
});

Placements

Placement 는 Alli SDK 에서 가장 중요하고 특징적인 부분 중 하나입니다. Placement 정보는 해당 페이지나 앱에서 어떤 스킬을 불러올지 결정하기 위해 사용됩니다.

고정 Placements

Placement 를 생성하고 나면 Alli 대시보드에서 원하는 스킬에 Placement 를 지정할 수 있으며, 이 방법으로 원하는 시간과 장소에 원하는 스킬을 로드할 수 있습니다.

아래는 Placement 를 shopping 으로 호출하는 예시입니다.

if (window.Alli) {
    window.Alli.setPlacement("shopping");    
}

동적 Placements

Alli SDK 는 URL 정보를 자동으로 내보내며 이를 이용해 동적 Placement 를 설정할 수 있습니다. 이 경우 Placement 정보는 아래와 같이 호출됩니다.

if (window.Alli) {
    window.Alli.setPlacement();    
}

예를 들어 "/download" 가 포함된 url 에서 스킬을 불러오고 싶다면, 아래와 같이 스킬의 Placement 설정을 "contains download" 로 지정합니다. SPA (Single Page App) 에서는 동적 Placement 를 사용할 수 없다는 점 기억하기시 바랍니다.

변수값 지정하기

대화를 시작할 때 특정 변수값을 변수에 지정하고 싶다면 아래 형식을 사용합니다.

window.Alli.event({
    variables: [{
    	"name": "VARIABLE_NAME",
    	"value":"VARIABLE_VALUE"
  }]
});

해당 변수는 Alli 대시보드에 존재하는 변수여야 합니다.

지원 브라우저 목록

  • Chrome (version 64 or above)
  • FireFox (version 60 or above)
  • Opera (version 50 or above)
  • Safari 10 or above
  • Internet Explorer 11
  • Microsoft Edge (version 40 or above)