Schedule a free demo

자바스크립트 SDK 연동(V2)

Updated on 7월 23, 2025

연동하기 #

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

<html>
  <body>

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

    <script type="module">
      import Alli from 'https://sdk.alli.ai/2/alli.js';

      const main = async () => {
        // YOUR_SDK_KEY는 Alli Dashboard > 프로젝트 설정에 적혀있는 SDK키를 입력합니다.
        await Alli.initialize({ sdkKey: 'YOUR_SDK_KEY' });
        // ...
      };

      main();
    </script>
  </body>

대화 시작하기 #

아래와 같이 대화를 시작합니다. 아래 두 옵션 중 한가지를 선택할 수 있습니다.
옵션 : USER ID 나 Placement 정보를 지정하고 싶으면 아래와 같이 입력합니다.

<html>
  <body>

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

    <script type="module">
      import Alli from 'https://sdk.alli.ai/2/alli.esm.min.js';

      const main = async () => {
        await Alli.initialize({ sdkKey: 'YOUR SDK KEY' });
        
        Alli.setPlacement('YOUR_PLACEMENT')

        Alli.setUser({
          id: 'YOUR_USER_ID',
          variables: { EMAIL: 'user@example.com' },
        });
        // ...
      };

      main();
    </script>
  </body>
</html>

유저 특정 #

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

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

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

<html>
  <body>

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

    <script type="module">
      import Alli from 'https://sdk.alli.ai/2/alli.esm.min.js';

      const main = async () => {
        await Alli.initialize({ sdkKey: 'YOUR SDK KEY' });
        
        const currentUser = Alli.user;

        Alli.setUserId('USER-123');
        // ...
      };

      main();
    </script>
  </body>
</html>

*이메일이나 주소 등의 다른 유저 정보를 할당하려면 아래 ‘변수값 지정하기’ 를 참고하세요.

변수값 지정하기 #

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

이 기능을 이용하면 특정한 유저 정보를 Alli 의 변수에 저장하여 활용할 수 있습니다. 해당 변수는 Alli 대시보드에 이미 존재하는 변수여야 합니다. 변수 목록은 대시보드 설정 > 변수 > 시스템에서 확인하실 수 있습니다.

아래는 특정한 유저에게 이메일 정보를 할당하는 예시입니다.

<html>
  <body>

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

    <script type="module">
      import Alli from 'https://sdk.alli.ai/2/alli.esm.min.js';

      const main = async () => {
        await Alli.initialize({ sdkKey: 'YOUR_SDK_KEY' });

        const currentUser = Alli.user;

        Alli.setUser({
          id: 'USER-123',
          variables: { EMAIL: 'user@example.com' },
        });
        // ...
      };

      main();
    </script>
  </body>
</html>

Placements #

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

고정 Placements #

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

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

<html>
  <body>

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

    <script type="module">
      import Alli from 'https://sdk.alli.ai/2/alli.esm.min.js';

      const main = async () => {
        await Alli.initialize({ sdkKey: 'YOUR_SDK_KEY' });
        
        const currentPlacement = Alli.placement;
        
        Alli.setPlacement('shopping');
        // ...
      };

      main();
    </script>
  </body>
</html>

동적 Placements #

Alli SDK 는 URL 정보를 자동으로 내보내며 이를 이용해 동적 Placement 를 설정할 수 있습니다. 이를 위해서는 단순히 Placement 정보 호출을 생략하고 대시보드에서 아래와 같이 설정합니다. 예를 들어 \”/download\” 가 포함된 url 에서 스킬을 불러오고 싶다면, 아래와 같이 스킬의 Placement 설정을 \”contains download\” 로 지정합니다. SPA (Single Page App) 에서는 동적 Placement 를 사용할 수 없다는 점 기억하기시 바랍니다.

지원하는 브라우저 #

  • Chrome (버전 86 이상)
  • FireFox (버전 85 이상)
  • Safari (버전 15.4 이상)
  • Microsoft Edge (버전 86 이상)

Alli SDK V1에서 V2로의 업그레이드 #

Alli SDK v1에서는 Universal Module Definition(UMD)을 지원하고 있었으나 Alli SDK v2에서는 ECMAScript Module(ESM)를 지원합니다. ESM과 같은 최신 표준 사양을 지원함으로써 Alli는 다양한 이점을 누릴 수 있습니다. 최신 브라우저를 이용하고 있는 경우, 대부분의 브라우저 환경에서 ESM가 지원되므로 별도 고려 사항은 없습니다. 더불어 ESM을 지원함으로써 Alli 변수를 Global scope(window) 변수에 넣을 필요가 없어졌습니다. 이 변수를 Global scope로 이용해야 할 경우 고객이 직접 Global scope을 대입해야 합니다.

<script type="module">
  import Alli from 'https://sdk.alli.ai/2/alli.esm.min.js';

  window.Alli = Alli;
</script>

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

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

반대의 경우 true를 false로 변경하시면 됩니다.

Alli.initialize({
  sdkKey: 'YOUR_SDK_KEY',
  fullscreen: true,
  launcher: {
    hidden: true,
  },
  });

        Alli.show(); // 
      };

토글 아이콘과 말풍선 및 대화창 위치 조정하기 #

사용 환경에 따라 토글 아이콘과 말풍선, 대화창의 위치를 조정해야 하는 경우가 있습니다. 이 경우 CSS를 통해 조정할 수 있으며 아래의 class를 수정해서 원하는 곳으로 위치시킬 수 있습니다. 

토글 아이콘 위치 조정: 'alli-launcher-container'

말풍선 위치 조정: 'alli-message-preview-container'

대화창 위치 조정: 'alli-messenger-container'

Polyfill #

이전 브라우저를 사용 중일 경우 ESM을 지원하고 있지 않을 가능성이 있습니다. 브라우저에 따라서는 Polyfill이 필요할 수 있습니다.

하기 Polyfill은 Alli SDK v2에 포함됩니다.

  • Array.prototype.at
  • Promise.allSettled
  • globalThis
  • queueMicrotask
  • Symbol.prototype.description

사용하는 브라우저에 따라서 하기 Polyfill이 필요할 수 있습니다.

  • Intl.Locale
  • Intl.PluralRules
  • Intl.NumberFormat
  • Intl.RelativeTimeFormat
  • AbortController
  • ResizeObserver
Table of contents