연동하기
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"
});User ID 와 Placement 에 대한 설명은 아래 고급 설정의 '유저 특정' 및 'Placements' 내용을 참고하세요.
고급 설정
아래 고급 설정 가이드에서는 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 인 경우 아래와 같이 입력합니다.
window.Alli.event({
user: {id: "USER-123"}
});이메일이나 주소 등의 다른 유저 정보를 할당하려면 아래 '변수값 지정하기' 를 참고하세요.
변수값 지정하기
대화를 시작할 때 특정 변수값을 변수에 지정하고 싶다면 아래 형식을 사용합니다.
window.Alli.event({
variables: {
"VARIABLE_NAME":"VARIABLE_VALUE"
}
});이 기능을 이용하면 특정한 유저 정보를 Alli 의 변수에 저장하여 활용할 수 있습니다. 해당 변수는 Alli 대시보드에 이미 존재하는 변수여야 합니다.
아래는 특정한 유저에게 이메일 정보를 할당하는 예시입니다.
if (window.Alli) {
window.Alli.event(
{
user: {id: "YOUR_USER_ID"},
variables: {
"EMAIL": "email_address@gmail.com"
}
}
);
}Placements
Placement 는 Alli SDK 에서 가장 중요하고 특징적인 부분 중 하나입니다. Placement 정보는 해당 페이지나 앱에서 어떤 스킬을 불러올지 결정하기 위해 사용됩니다.
고정 Placements
Placement 를 생성하고 나면 Alli 대시보드에서 원하는 스킬에 Placement 를 지정할 수 있으며, 이 방법으로 원하는 시간과 장소에 원하는 스킬을 로드할 수 있습니다.
아래는 Placement 를 shopping 으로 호출하는 예시입니다.
window.Alli.event({
placement: "shopping"
});동적 Placements
Alli SDK 는 URL 정보를 자동으로 내보내며 이를 이용해 동적 Placement 를 설정할 수 있습니다. 이를 위해서는 단순히 Placement 정보 호출을 생략하고 대시보드에서 아래와 같이 설정합니다.
예를 들어 "/download" 가 포함된 url 에서 스킬을 불러오고 싶다면, 아래와 같이 스킬의 Placement 설정을 "contains download" 로 지정합니다. SPA (Single Page App) 에서는 동적 Placement 를 사용할 수 없다는 점 기억하기시 바랍니다.
음성인식 활성화하기
Alli 가 음성을 텍스트로 변환할 수 있도록 음성인식을 활성화할 수 있습니다. 먼저 Alli 초기화 전에 아래와 같이 입력합니다.
var recognition = new Alli.__CustomSpeechRecognition__('wss://task.ecs-backend.alli.ai:3000/', { path: '/stt' });
recognition.interimResults = true;
recognition.maxAlternatives = 10;
recognition.continuous = true;이후 초기화시 다른 옵션들과 함께 아래와 같이 입력합니다.
Alli.initialize({
recognition: recognition
});성공적으로 활성화되면 아래와 같이 텍스트 입력 필드와 보내기 아이콘 사이에 마이크 아이콘이 나타납니다. 아이콘을 누르면 음성 입력이 가능한 상태가 되며, 한번 더 누르면 중단합니다.
지원 브라우저 목록
- 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)
