(cache)Alli User Guide - Alli SDK実装（JavaScript）

Alliの実装に必要なJavascriptの実装はシンプルで簡単です。 ‌‌
次のコードをコピーして該当Webサイトのhtmlソース内に貼り付けてください。

<head>
<script src="https://sdk.alli.ai/latest/alli.js"></script>
</head>

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

<!-- Start of Alli Code -->
<script>
  // apiKey is unique identifier provided by Alli 
  Alli.initialize({
    apiKey: "YOUR_API_KEY",
    debug: false, // if you turn this on, debug info will be printed in the console
    backButton: true, // optional, default: true, If you want to remove the back button on the header, turn off this option.
    providerLink: true, // optional, default: true, If you want to remove the link on the Alli provider logo, turn off this option.
    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
      }
    }
  });
  if (window.Alli) {
    window.Alli.event();
  }
</script>
<!-- End of Alli Code -->
</body>

次に、"YOUR_API_KEY"に、管理画面で取得できるプロジェクトAPIキーをコピーします。

Webサイトをリフレッシュ後、Webサイトの右下隅にAlliのチャットダイアログポップアップが表示されます。これで実装完了です。
　

※ 以下では、実装の詳細、またより高度な実装についてご案内をいたします。

SDK初期化

htmlソースのブロック内に、以下のコードをコピーして貼り付けてください。

<head>
<script src="https://sdk.alli.ai/latest/alli.js"></script>
</head>

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

<!-- Start of Alli Code -->
<script>
  if (window.Alli) {
    //apiKey is unique identifier provided by Alli 
    Alli.initialize({
      apiKey: "YOUR_API_KEY",
      debug: false,
      backButton: true
    });
  }
</script>
<!-- End of Alli Code -->
</body>

＜会話を開始する＞

１．ターゲティングもプレイスメントも指定しない場合

window.Alli.event();

２．ターゲティングもプレイスメントも指定する場合

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

ユーザーや起動場所を特定した実装

Alli SDKの高度な設定は以下を参照ください。

＜ユーザーを特定する＞

AlliはCookieを使用して、ユーザーを識別しています。ユーザーがCookieをクリアするか、別のデバイスにアクセスすると、履歴は失われます。
あなたがサイト訪問者が誰であるか特定できている場合、あなたは彼らが誰であるかをAlliに伝えることができます。

例：ユーザーID”USER-123”

Alli.setUser({
  id: "USER-123"
});

ユーザーに関する詳細情報がある場合は、setUser（）関数で送信できます。送信された情報は変数に保存されます。

Alli.setUser({
  id: "USER-123",
  email: "user123@gmail.com",
});

＜起動場所の特定（プレイスメント）＞

静的プレイスメント

プレイスメントを作成したら、Alli Dashboardを使用して、そのプレイスメントでのキャンペーンチャットフローを変更できます。プレイスメント活用の利点は、いつでも好きな場所に、表示したいキャンペーンを設定できることです。

例：プレースメント＝shopping

if (window.Alli) {
    window.Alli.setPlacement("shopping");    
}

動的プレイスメント

また、Alli SDKはURLを自動的に送信するため、キャンペーン設定で動的にURLパターンを指定できます。この場合、次のような呼び出しを行います。

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

たとえば、「/download」のURLでキャンペーンを開始する場合、「ダウンロードを含む」を使用してプレイスメントを設定するだけです。
なお、 SPA（シングルページアプリ）は動的プレイスメントでは機能しないことに注意してください。

ユーザーとプレイスメントが設定されたら、以下の呼び出しを実行してください。

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

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

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

Alli User Guide - Alli SDK実装（JavaScript）