Alli User Guide - Alli SDK実装（JavaScript）

Integration

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.
    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キーをコピーします。
APIキーは設定＞全般タブより取得します。

Webサイトをリフレッシュ後、Webサイトの右下隅にAlliのチャットダイアログポップアップが表示されます。これで実装完了です。
次のセクションでは、高度な統合について説明します。

Initializing SDK

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

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

SDKを実装後、次の迅速かつ簡単な統合手順のいずれかを実行できます。

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

window.Alli.event();

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

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

Advanced Integration

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

Alli toggle icon の位置を調整する

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

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

Alli.initialize({
  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はCookieを利用し、ユーザーIDでは識別できないサイト訪問者を識別します。ユーザーがCookieを消去した場合は履歴が失われます。

ウェブサイトにログインしているユーザーが特定できている場合、このユーザーが誰であるかをAlliに伝えることができます。また、ログインしていないユーザーの一時IDを設定することもできます。

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

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

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

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

Placements

Alli SDKは特定のキャンペーンチャットフローを任意のWEBサイト（アプリ）に実装する事ができます。
例えば、LPではプロダクトの紹介やユーザーニーズを確認する為のキャンペーンを配置。カートのページでは追加注文を頂く為のおススメ商品の紹介する為のキャンペーンを配置する事ができます。

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でキャンペーンを開始する場合は、ダッシュボードの「contains download」を使用してプレースメントを設定できます。 SPA（シングルページアプリ）はダイナミックプレースメントでは機能しないことに注意してください。

Starting a conversation

ユーザーとプレースメントを設定後、以下を記載します。

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

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

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