자바스크립트 SDK 연동

연동하기

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

<html>
  <body>
    <!-- ...Your website content... -->
    <script type="module">
      import Alli from 'https://sdk.alli.ai/2/alli.esm.min.js';
      const main = async () => {
        // YOUR_SDK_KEY enters the SDK key written in Alli Dashboard > Project Settings.
        await Alli.initialize({ sdkKey: 'YOUR_SDK_KEY' });
        // ...
      };
      main();
    </script>
  </body>

대화 시작하기 아래와 같이 대화를 시작하세요. 아래 두 가지 옵션 중 하나를 선택할 수 있습니다. 옵션 : 사용자 ID 또는 배치 정보를 지정하려면 다음과 같이 입력합니다.

<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>

사용자 특정 사용자 ID로 식별되지 않는 사용자의 경우, Alli는 쿠키를 사용하여 정보를 저장합니다. 즉, 쿠키 기록을 삭제하거나 다른 장치를 사용하여 연결하면 사용자를 식별할 수 없습니다.

웹사이트에 로그인하여 특정 사용자인 경우 알리에게 정보를 전달할 수 있습니다. 또는 로그인하지 않은 사용자를 위한 임시 ID를 만들 수도 있습니다.

예를 들어, 사용자 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>

플레이스먼트

플레이스먼트는 Alli SDK에서 가장 중요하고 특징적인 부분 중 하나입니다. 배치 정보는 해당 페이지나 앱에 로드할 기술을 결정하는 데 사용됩니다. 고정 플레이스먼트 플레이스먼트를 만들면 Alli 대시보드에서 원하는 스킬에 할당할 수 있으며, 이렇게 하면 원하는 시간과 장소에 원하는 스킬을 로드할 수 있습니다. 아래는 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' });
        
        const currentPlacement = Alli.placement;
        
        Alli.setPlacement('shopping');
        // ...
      };
      main();
    </script>
  </body>
</html>

Ali SDK V1에서 V2로 업그레이드

Alli SDK v1은 범용 모듈 정의(UMD)를 지원하지만, Alli SDK v2는 ECMAScript Module(ESM)을 지원합니다.

ESM과 같은 최신 표준 사양을 지원함으로써 Alli는 다양한 이점을 누릴 수 있습니다. 최신 브라우저를 사용하는 경우 대부분의 브라우저 환경에서 ESM을 지원하므로 별도로 고려할 필요가 없습니다. 또한 ESM을 지원하여 Alli 변수를 전역 범위(창) 변수에 넣을 필요가 없습니다. 이 변수를 전역 범위로 사용해야 하는 경우 고객이 직접 전역 범위를 대체해야 합니다.

<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를 통해 조정하고 아래 클래스를 편집하여 원하는 위치에 배치할 수 있습니다.

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

Previous고급 설정 Next웍스에 공지사항 내보내기

Last updated 2 months ago