1 / 1

Alli SDK V2実装（JavaScript）

連携

Alli Javascriptの実装は次のコードをコピーしてWebサイトに貼り付けるだけです。sdkKeyはDashboard 設定＞全般タブのSDK キーより取得し、”YOUR_SDK_KEY”に入力します。ブラウザをリフレッシュ後、Webサイトの右下にAlliのチャットダイアログポップアップが表示されたら、実装完了です。

※SDK v2を実装するページは「https」である必要があります。「http」ページの場合はサポート対象外となりますので、SDKv1をご利用ください。

SDKの初期化

コードをコピーして、ウェブページのブロックに貼り付けます。

<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にはAlli Dashboard > プロジェクト設定に記載のSDKキーを入力します
        await Alli.initialize({ sdkKey: 'YOUR_SDK_KEY' });
        // ...
      };

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

会話の開始

SDKを初期化したら、以下のオプションのいずれかを使用して次のコマンドを呼び出し、会話を開始してください。ターゲティングやプレイスメントを指定しない場合は、上記のコードに追記する必要はありません。 Option：ターゲティングとプレイスメントを指定する場合

<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はcookieを使用して情報を保存します。cookie履歴を削除したり、他のデバイスを使用して接続する場合は、ユーザを特定することはできません。ウェブサイトにログインし、ユーザが特定されている場合、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>

Placements

プレイスメント情報を設定することで、Alli SDKを特定のキャンペーンチャットフローを任意のWEBサイト（アプリ）に実装することができます。

静的な配置

Placementを作成した後、Alliのダッシュボード上で必要なキャンペーン（スキル）にプレイスメントを指定することができ、この方法で必要な場所にキャンペーン（スキル）をロードすることができます。以下は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>

動的な配置

Alli SDKは、URL情報を自動的に送り出し、これを利用して、動的Placementを設定することができます。そのためには、単にPlacement情報の呼び出しを省略して、ダッシュボードで、次のように設定します。たとえば、「/ download」が含まれているURLでスキル（キャンペーン）を呼びだしたい場合は、以下の様にスキルのPlacement設定を「contains 」・「DOWNLOAD」に指定します。 SPA(Single Page App)は、動的Placementを使用することはできません。

トグルアイコンの位置を調整する

alli-launcher-containerクラスを使ってカスタムCSSを記述することで、位置を調整することができます。

.alli-launcher-container {
  bottom: 24px;
  right: 24px;
}

PCでトグルアイコンとプレビューなしで全画面でAlliウィンドウをロードする

展開するSDKをトグルアイコンとプレビューなしで全画面でロードする場合には以下のコードを参考にご利用ください。

以下はPCでチャット画面を表示した場合に、チャット画面を全画面表示で展開する例です。以下のコードを適用した場合も、モバイルでの利用時には、カスタムしたチャット画面サイズで表示されます。

<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({
　　　　　　　　　　　// YOUR_SDK_KEYにはAlli Dashboard > プロジェクト設定に記載のSDKキーを入力します
                   sdkKey: 'YOUR_SDK_KEY',
                   fullscreen: true,
                   launcher: {
                     hidden: true,
                   },
                   hideCloseButton: true, 
                 });

        Alli.show(); 
        
        };

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

モバイルで利用する場合のSDKの最適化

展開するSDKがスマートフォンなどのモバイル端末での利用を想定している場合、最適化するためには以下のコードを参考にご利用ください。

以下はモバイルでチャット画面を表示した場合に、チャット画面を全画面表示で展開する例です。以下のコードを適用した場合も、PCでの利用時には、カスタムしたチャット画面サイズで表示されます。

<html>
 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, minimum-scale=1, viewport-fit=cover, user-scalable=no" />
 </head>
  
  <body>

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

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

      const fullscreenBreakpoint = 428;

      const main = async () => {
        const fullscreen = window.innerWidth < fullscreenBreakpoint;

        // YOUR_SDK_KEYにはAlli Dashboard > プロジェクト設定に記載のSDKキーを入力します
        await Alli.initialize({
          sdkKey: 'AJHMEYF4HC98WXXOIHTKPO0K8ZYNPJDCJT',
          fullscreen,
        });
        // ...
      };

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

サポートしているブラウザ

Chrome （バージョン67以降）
FireFox （バージョン69以降）
Opera（バージョン54以降）
Safari （バージョン11.1以降）
Microsoft Edge （バージョン80以降）

Alli SDK v1からv2への移行に関して

これまでのAlli SDK v1では、Universal Module Definition(UMD)をサポートしていました。最新のAlli SDK v2では、ECMAScript モジュール（ESM）へ移行を進めています。ESMのような最新の標準仕様をサポートすることで、Alliは様々なメリットを享受できます。最新のブラウザを利用している場合は、ほとんどのブラウザ環境でESMはサポートされているため、お客様の環境で考慮すべきことはありません。 ESMをサポートしたことで、Alli変数をグローバルスコープ(window)変数へ入れる必要がなくなりました。この変数をグローバルスコープで利用する必要がある場合、お客様でグローバルスコープに代入する必要があります。

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

  window.Alli = Alli;
</script>

ポリフィル(Polyfill)

古いブラウザをお使いの場合、ESMがサポートされていない可能性がございます。その場合、ブラウザによってはポリフィルが必要な場合がございます。

次のPolyfillは、Alli SDK v2に含まれています。

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

お使いのブラウザによっては、以下のポリフィルが必要な場合がございます。

Intl.Locale
Intl.PluralRules
Intl.NumberFormat
Intl.RelativeTimeFormat
AbortController
ResizeObserver

Alli SDK V2実装（JavaScript）

連携

※SDK v2を実装するページは「https」である必要があります。「http」ページの場合はサポート対象外となりますので、SDKv1をご利用ください。

SDKの初期化

コードをコピーして、ウェブページのブロックに貼り付けます。

<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にはAlli Dashboard > プロジェクト設定に記載のSDKキーを入力します
        await Alli.initialize({ sdkKey: 'YOUR_SDK_KEY' });
        // ...
      };

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

会話の開始

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

ユーザーを特定する

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

電子メール、アドレスなどのユーザー情報を送信する場合は、下記の「変数に値を割り当てる」セクションを参照してください。

変数の値を指定する

<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

プレイスメント情報を設定することで、Alli SDKを特定のキャンペーンチャットフローを任意のWEBサイト（アプリ）に実装することができます。

静的な配置

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

動的な配置

トグルアイコンの位置を調整する

alli-launcher-containerクラスを使ってカスタムCSSを記述することで、位置を調整することができます。

.alli-launcher-container {
  bottom: 24px;
  right: 24px;
}

PCでトグルアイコンとプレビューなしで全画面でAlliウィンドウをロードする

展開するSDKをトグルアイコンとプレビューなしで全画面でロードする場合には以下のコードを参考にご利用ください。

<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({
　　　　　　　　　　　// YOUR_SDK_KEYにはAlli Dashboard > プロジェクト設定に記載のSDKキーを入力します
                   sdkKey: 'YOUR_SDK_KEY',
                   fullscreen: true,
                   launcher: {
                     hidden: true,
                   },
                   hideCloseButton: true, 
                 });

        Alli.show(); 
        
        };

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

モバイルで利用する場合のSDKの最適化

展開するSDKがスマートフォンなどのモバイル端末での利用を想定している場合、最適化するためには以下のコードを参考にご利用ください。

<html>
 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, minimum-scale=1, viewport-fit=cover, user-scalable=no" />
 </head>
  
  <body>

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

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

      const fullscreenBreakpoint = 428;

      const main = async () => {
        const fullscreen = window.innerWidth < fullscreenBreakpoint;

        // YOUR_SDK_KEYにはAlli Dashboard > プロジェクト設定に記載のSDKキーを入力します
        await Alli.initialize({
          sdkKey: 'AJHMEYF4HC98WXXOIHTKPO0K8ZYNPJDCJT',
          fullscreen,
        });
        // ...
      };

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

サポートしているブラウザ

Chrome （バージョン67以降）
FireFox （バージョン69以降）
Opera（バージョン54以降）
Safari （バージョン11.1以降）
Microsoft Edge （バージョン80以降）

Alli SDK v1からv2への移行に関して

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

  window.Alli = Alli;
</script>

ポリフィル(Polyfill)

次のPolyfillは、Alli SDK v2に含まれています。

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

お使いのブラウザによっては、以下のポリフィルが必要な場合がございます。

Intl.Locale
Intl.PluralRules
Intl.NumberFormat
Intl.RelativeTimeFormat
AbortController
ResizeObserver

Alli SDK V2実装（JavaScript）

連携

SDKの初期化

会話の開始

ユーザーを特定する

変数の値を指定する

Placements

静的な配置

動的な配置

トグルアイコン の位置を調整する

PCでトグルアイコンとプレビューなしで全画面でAlliウィンドウをロードする

モバイルで利用する場合のSDKの最適化

サポートしているブラウザ

Alli SDK v1からv2への移行に関して

ポリフィル(Polyfill)

Alli SDK V2実装（JavaScript）

連携

SDKの初期化

会話の開始

ユーザーを特定する

変数の値を指定する

Placements

静的な配置

動的な配置

トグルアイコン の位置を調整する

PCでトグルアイコンとプレビューなしで全画面でAlliウィンドウをロードする

モバイルで利用する場合のSDKの最適化

サポートしているブラウザ

Alli SDK v1からv2への移行に関して

ポリフィル(Polyfill)

トグルアイコンの位置を調整する

トグルアイコンの位置を調整する