SDK実装 (JavaScript)

※キャンペーン（スキル）メニューで作成したチャットボットのみSDK実装が可能です。

連携

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

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

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の管理画面でのプレイスメント設定方法

キャンペーン(スキル)メニュー＞必要なキャンペーン（スキル）の「プレイスメント」タブで任意のプレイスメントを指定してください。

動的な配置

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

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

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

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

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

スマートフォンのブラウザなどの小さな画面にロードするなどの場合には、トグルアイコンとプレビューを省略してすぐにフルスクリーンでチャットUIを読み込む必要がときがあります。以下のようにfullscreenとlauncherを使用します。

<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,
          },
        });

        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: 'YOUR_SDK_KEY',
          fullscreen,
        });
        // ...
      };

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

利用可能なオプション設定

Alli.initialize(options) のオプション：

オプション

型

デフォルト

説明

sdkKey

string (必須)

—

SDKキー（apiKey もエイリアスとして許容）

fullscreen

boolean

false

メッセンジャーをコンテナ/ビューポートいっぱいに広げるか

launcher

{ hidden?: boolean }

{ hidden: false }

トグルボタンを非表示にするか

hideCloseButton

boolean

false

メッセンジャーの閉じるボタンを非表示にするか（フルスクリーン用）

debug

boolean

false

デバッグログの出力

例

    <script type="module">
      import Alli from '';

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

        //
        Alli.show();
      };

      main();
    </script>

Methods / getters:

API

説明

Alli.initialize(options)

SDKを初期化する（Promiseを返す）

Alli.destroy()

SDKを完全に破棄する（フルリセット。その後の再 initialize は新規スタートとなる）

Alli.show() / Alli.hide()

メッセンジャーを開く / 閉じる

Alli.setPlacement(placement?: string | null)

実行時にプレースメントを設定/クリアする

Alli.setUser({ id, variables })

ユーザーIDと変数を一度に設定する（クリアする場合は null を渡す）

Alli.setUserId(id: string | number)

ユーザーIDを設定する

Alli.setUserVariable(key, value) / Alli.setUserVariables({...})

ユーザー変数（string/number/boolean/null）を設定する

Alli.initialized

getter — SDKが初期化されているかどうか

Alli.user

getter — 現在のユーザー（{ id, variables }）

Alli.placement

getter — 現在のプレイスメント

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

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

前へ【Worksプロジェクト版】HENNGE One SAML SSO認証次へお知らせ機能

最終更新 7 日前