1 / 1

Alli SDK実装（JavaScript）

連携

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

SDKの初期化

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

<head>
<script src="https://sdk.alli.ai/latest/alli.js"></script>
<meta charset="UTF-8">
</head>

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

<!-- Start of Alli Code -->
<script>
  Alli.initialize({
    apiKey: "YOUR_SDK_KEY",
    debug: false, 
    backButton: true, 
    providerLink: true, 
    styleOptions: { 
      conversationContainer: {
        right: 50, 
        left: 50, 
        bottom: 50 
      }
    }
  });
  if (window.Alli) {
    window.Alli.event();
  }
</script>
<!-- End of Alli Code -->
</body>

会話の開始

SDKを初期化したら、以下のオプションのいずれかを使用して次のコマンドを呼び出し、会話を開始してください。

if (window.Alli) {
    window.Alli.event();
}

Option 1ターゲティングおよびプレイスメントを指定しない場合

window.Alli.event();

Option 2: ターゲティングとプレイスメントを指定する場合

window.Alli.event({
    user: {id: "YOUR_USER_ID"},
    placement: "YOUR_PLACEMENT"
});

プレイスメント情報は、Webページにロードするキャンペーンを識別するために使用されます。 Alliダッシュボード＞キャンペーン内で、各キャンペーンの配置を設定できます。

SDKの高度な設定

高度な設定については以下を参照してください。

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

メインのターゲットブラウザに応じて、トグルアイコンの位置を調整できます。

script内の以下コードの値を変更し位置を変更します。StyleOptions > ConversationContainer > right, left, bottom の値を変更できます。デフォルト値は５０となっています。

ドラッグアンドドロップでトグルアイコンが移動しないようにするには、disableToggleDragをtrueに設定します。

Alli.initialize({
    disableToggleDrag: false, // optional, default: false
    styleOptions: { // optional, to customize style.
    conversationContainer: {
      right: 50, // offset from the right (applied when SDK position is set to right on project settings)
      left: 50, // offset from the left (applied when SDK position is set to left on project settings)
      bottom: 50 // offset from the bottom
    }
  }
});

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

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

Alli.initialize({
  popupMode: true,
  launcher: false,
});

popupModeがtureに設定されると、Alliはプレビューなしですぐに画面全体のチャットUIでロードされます。launcherがfalseに設定されると、切り替えのアイコンをロードしません。

＜ユーザーを特定する＞

ユーザIDで特定されないユーザの場合、Alliはcookieを使用して情報を保存します。cookie履歴を削除したり、他のデバイスを使用して接続する場合は、ユーザを特定することはできません。

ウェブサイトにログインし、ユーザが特定されている場合、Alliに情報を渡すことができます。あるいはログインしていないユーザーのために、一時的なIDを生成することもできます。

例えば、ユーザIDがUSER-123の場合は、次のように入力します。

window.Alli.event({
    user: {id: "USER-123"}
});

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

＜変数の値を指定する＞

会話を開始するとき、特定の変数の値を変数に割り当てる場合は、以下の形式を使用します。

window.Alli.event({
    variables: {
        "VARIABLE_NAME":"VARIABLE_VALUE"
    }
});

この機能を利用すれば、特定のユーザ情報をAlliの変数に格納して利用することができます。この変数は、Alliダッシュボード（プロジェクト設定＞変数）にすでに存在している変数である必要があります。

以下は、指定したユーザーにメールを割り当てる例です。

if (window.Alli) {
    window.Alli.event(
      {
        user: {id: "YOUR_USER_ID"},
        variables: {
            "EMAIL":"email_address@gmail.com"
        }
      }
    );
}

＜Placements＞

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

＜静的な配置＞

Placementを作成した後、Alliダッシュボードで必要なキャンペーン（スキル）にPlacementを指定することができ、この方法で必要な場所にキャンペーン（スキル）をロードすることができます。以下はPlacementをshoppingに呼び出す例です。

例：プレイスメント＝shopping

window.Alli.event({
    placement: "shopping"
});

＜動的な配置＞

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

＜音声認識を有効にする＞

音声をテキストに変換することができるように音声認識を有効にします。まず、Alliを初期化する前に以下を追加します。

var recognition = new Alli.__CustomSpeechRecognition__('wss://task.ecs-backend.alli.ai:3000/', { path: '/stt' });
recognition.interimResults = true;
recognition.maxAlternatives = 10;
recognition.continuous = true;

初期化する際に他のオプションがあれば、一緒に以下を追加します。

Alli.initialize({
  recognition: recognition
});

音声認識が正常に有効になると、テキスト入力フィールドと送信アイコンの間にマイクアイコンが表示されます。アイコンをクリックすると、音声入力が可能な状態となり、もう一度押すと停止します。

＜音声認識を無効にする＞

音声認識を非表示にする場合は、Alliを起動するサイトに埋め込んでいるJavaScript SDKの一部を下記のように変更いただけると可能になります。

変更前

Alli.initialize({
    apiKey: "御社環境のAPIキー",

変更後

  Alli.initialize({
    apiKey: "御社環境のAPIキー",
    recognition: null,

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

Chrome （バージョン64以降）
FireFox （バージョン60以降）
Opera（バージョン50以降）
Safari （10以降）
Microsoft Edge （バージョン40以降

Alli SDK実装（JavaScript）

連携

SDKの初期化

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

<head>
<script src="https://sdk.alli.ai/latest/alli.js"></script>
<meta charset="UTF-8">
</head>

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

<!-- Start of Alli Code -->
<script>
  Alli.initialize({
    apiKey: "YOUR_SDK_KEY",
    debug: false, 
    backButton: true, 
    providerLink: true, 
    styleOptions: { 
      conversationContainer: {
        right: 50, 
        left: 50, 
        bottom: 50 
      }
    }
  });
  if (window.Alli) {
    window.Alli.event();
  }
</script>
<!-- End of Alli Code -->
</body>

会話の開始

SDKを初期化したら、以下のオプションのいずれかを使用して次のコマンドを呼び出し、会話を開始してください。

if (window.Alli) {
    window.Alli.event();
}

Option 1ターゲティングおよびプレイスメントを指定しない場合

window.Alli.event();

Option 2: ターゲティングとプレイスメントを指定する場合

window.Alli.event({
    user: {id: "YOUR_USER_ID"},
    placement: "YOUR_PLACEMENT"
});

SDKの高度な設定

高度な設定については以下を参照してください。

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

メインのターゲットブラウザに応じて、トグルアイコンの位置を調整できます。

ドラッグアンドドロップでトグルアイコンが移動しないようにするには、disableToggleDragをtrueに設定します。

Alli.initialize({
    disableToggleDrag: false, // optional, default: false
    styleOptions: { // optional, to customize style.
    conversationContainer: {
      right: 50, // offset from the right (applied when SDK position is set to right on project settings)
      left: 50, // offset from the left (applied when SDK position is set to left on project settings)
      bottom: 50 // offset from the bottom
    }
  }
});

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

Alli.initialize({
  popupMode: true,
  launcher: false,
});

＜ユーザーを特定する＞

例えば、ユーザIDがUSER-123の場合は、次のように入力します。

window.Alli.event({
    user: {id: "USER-123"}
});

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

＜変数の値を指定する＞

会話を開始するとき、特定の変数の値を変数に割り当てる場合は、以下の形式を使用します。

window.Alli.event({
    variables: {
        "VARIABLE_NAME":"VARIABLE_VALUE"
    }
});

以下は、指定したユーザーにメールを割り当てる例です。

if (window.Alli) {
    window.Alli.event(
      {
        user: {id: "YOUR_USER_ID"},
        variables: {
            "EMAIL":"email_address@gmail.com"
        }
      }
    );
}

＜Placements＞

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

＜静的な配置＞

例：プレイスメント＝shopping

window.Alli.event({
    placement: "shopping"
});

＜動的な配置＞

＜音声認識を有効にする＞

音声をテキストに変換することができるように音声認識を有効にします。まず、Alliを初期化する前に以下を追加します。

var recognition = new Alli.__CustomSpeechRecognition__('wss://task.ecs-backend.alli.ai:3000/', { path: '/stt' });
recognition.interimResults = true;
recognition.maxAlternatives = 10;
recognition.continuous = true;

初期化する際に他のオプションがあれば、一緒に以下を追加します。

Alli.initialize({
  recognition: recognition
});

＜音声認識を無効にする＞

音声認識を非表示にする場合は、Alliを起動するサイトに埋め込んでいるJavaScript SDKの一部を下記のように変更いただけると可能になります。

変更前

Alli.initialize({
    apiKey: "御社環境のAPIキー",

変更後

  Alli.initialize({
    apiKey: "御社環境のAPIキー",
    recognition: null,

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

Chrome （バージョン64以降）
FireFox （バージョン60以降）
Opera（バージョン50以降）
Safari （10以降）
Microsoft Edge （バージョン40以降

Alli SDK実装（JavaScript）

連携

SDKの初期化

会話の開始

SDKの高度な設定

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

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

＜ユーザーを特定する＞

＜変数の値を指定する＞

＜Placements＞

＜静的な配置＞

＜動的な配置＞

＜音声認識を有効にする＞

＜音声認識を無効にする＞

変更前

変更後

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

Alli SDK実装（JavaScript）

連携

SDKの初期化

会話の開始

SDKの高度な設定

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

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

＜ユーザーを特定する＞

＜変数の値を指定する＞

＜Placements＞

＜静的な配置＞

＜動的な配置＞

＜音声認識を有効にする＞

＜音声認識を無効にする＞

変更前

変更後

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

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

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