Alli User Guide - Alli SDK実装（JavaScript）

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

<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.
    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サイトをrefresh後、Webサイトの右下隅にAlliのチャットダイアログポップアップが表示されます。
これで実装完了です。

Initializing SDK

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

<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();

２．ユーザーがわかっていて、Alli起動のWEBページを指定する場合

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

Advanced Integration

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

ユーザーを特定する

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

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

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

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

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

＜Placements＞

Static Placements

プレースメントを作成したら、Alli Dashboardを使用して、そのプレースメントでのキャンペーンチャットフローを変更できます。
プレースメントシステムの利点は、いつでも好きなときにプレースメントに表示するキャンペーンを決定できることです。
例：プレースメント＝shopping

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

Dynamic Placements

また、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以降）