> For the complete documentation index, see [llms.txt](https://docs.allganize.ai/allganize-alli-works/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.allganize.ai/allganize-alli-works/alli-dashboard/setting/sdk.md). # 자바스크립트 SDK 연동 연동하기 Alli와 자바스크립트 통합은 쉽고 간단합니다. \ 아래 코드를 복사하여 웹사이트에 붙여넣기만 하면 됩니다. ``` ``` **대화 시작하기**\ \ 아래와 같이 대화를 시작하세요. 아래 두 가지 옵션 중 하나를 선택할 수 있습니다.\ 옵션 : 사용자 ID 또는 배치 정보를 지정하려면 다음과 같이 입력합니다. ``` ``` **사용자 특정**\ \ 사용자 ID로 식별되지 않는 사용자의 경우, Alli는 쿠키를 사용하여 정보를 저장합니다. 즉, 쿠키 기록을 삭제하거나 다른 장치를 사용하여 연결하면 사용자를 식별할 수 없습니다. \ 웹사이트에 로그인하여 특정 사용자인 경우 알리에게 정보를 전달할 수 있습니다. 또는 로그인하지 않은 사용자를 위한 임시 ID를 만들 수도 있습니다. \ 예를 들어, 사용자 ID가 USER-123인 경우 다음과 같이 입력합니다. ``` ``` \*이메일이나 주소와 같은 다른 사용자 정보를 할당하려면 아래의 '변수 값 지정'을 참조하시기 바랍니다. **변수 값 지정** 대화를 시작할 때 특정 변수 값을 변수에 할당하려면 아래 형식을 사용하세요. \ 이 기능을 사용하면 특정 사용자 정보를 Alli 변수에 저장할 수 있습니다. 이 변수는 Alli 대시보드에 이미 존재해야 합니다. 대시보드 설정 > 변수 > 시스템에서 변수 목록을 확인할 수 있습니다. \ 다음은 특정 사용자에게 이메일 정보를 할당하는 예시입니다. ``` ``` **플레이스먼트** 플레이스먼트는 Alli SDK에서 가장 중요하고 특징적인 부분 중 하나입니다. 배치 정보는 해당 페이지나 앱에 로드할 기술을 결정하는 데 사용됩니다.\ \ **고정 플레이스먼트**\ \ 플레이스먼트를 만들면 Alli 대시보드에서 원하는 스킬에 할당할 수 있으며, 이렇게 하면 원하는 시간과 장소에 원하는 스킬을 로드할 수 있습니다.\ \ 아래는 Placement를 쇼핑으로 호출하는 예시입니다. ``` ``` **Ali SDK V1에서 V2로 업그레이드** \ Alli SDK v1은 범용 모듈 정의(UMD)를 지원하지만, Alli SDK v2는 ECMAScript Module(ESM)을 지원합니다. ESM과 같은 최신 표준 사양을 지원함으로써 Alli는 다양한 이점을 누릴 수 있습니다. 최신 브라우저를 사용하는 경우 대부분의 브라우저 환경에서 ESM을 지원하므로 별도로 고려할 필요가 없습니다. 또한 ESM을 지원하여 Alli 변수를 전역 범위(창) 변수에 넣을 필요가 없습니다. 이 변수를 전역 범위로 사용해야 하는 경우 고객이 직접 전역 범위를 대체해야 합니다. ``` ``` **아이콘과 미리보기를 전환하지 않고 Alli를 전체 화면에 로드하기** \ 모바일 브라우저와 같은 작은 화면에 Alli를 로드하는 경우 토글 아이콘을 건너뛰고 미리 보기를 한 후 바로 전체 화면에 채팅 UI를 로드해야 하는 경우가 있습니다. 아래와 같이 사용할 수 있습니다. \ 반대의 경우 true를 false로 변경합니다. ``` Alli.initialize({ sdkKey: 'YOUR_SDK_KEY', fullscreen: true, launcher: { hidden: true, }, }); Alli.show(); }; ``` **토글 아이콘, 말풍선, 채팅 창 위치 조정하기** \ 사용 환경에 따라 토글 아이콘, 말풍선, 채팅 창의 위치를 조정해야 할 수도 있습니다. 이 경우 CSS를 통해 조정하고 아래 클래스를 편집하여 원하는 위치에 배치할 수 있습니다. ``` Toggle icon position adjustment: 'alli-launcher-container' Adjust speech bubble position: 'alli-message-preview-container' Adjust chat window position: 'alli-messenger-container' ``` **Polyfil** 구형 브라우저를 사용하는 경우 ESM을 지원하지 않을 수 있습니다. 브라우저에 따라 Polyfil이 필요할 수 있습니다. 하기 Polyfil은 Ali SDK v2에 포함되어 있습니다. * `Array.prototype.at` * `Promise.allSettled` * `globalThis` * `queueMicrotask` * `Symbol.prototype.description` 사용하는 브라우저에 따라 하기 Polyfil이 필요할 수 있습니다. * `Intl.Locale` * `Intl.PluralRules` * `Intl.NumberFormat` * `Intl.RelativeTimeFormat` * `AbortController` * `ResizeObserver`