# SDK実装 (JavaScript)
**※キャンペーン（スキル）メニューで作成したチャットボットのみSDK実装が可能です。**
## 連携
Alli Javascriptの実装は次のコードをコピーしてWebサイトに貼り付けるだけです。sdkKeyはDashboard 設定＞全般タブのSDK キー より取得し、”YOUR\_SDK\_KEY”に入力します。ブラウザをリフレッシュ後、Webサイトの右下にAlliのチャットダイアログポップアップが表示されたら、実装完了です。
※SDK v2を実装するページは「https」である必要があります。「http」ページの場合はサポート対象外となりますのでご了承ください。
## SDKの初期化
コードをコピーして、ウェブページの ブロックに貼り付けます。
{% code lineNumbers="true" %}
```javascript
```
{% endcode %}
## 会話の開始
SDKを初期化したら、以下のオプションのいずれかを使用して次のコマンドを呼び出し、会話を開始してください。ターゲティングやプレイスメントを指定しない場合は、上記のコードに追記する必要はありません。\
\
Option：ターゲティングとプレイスメントを指定する場合
{% code lineNumbers="true" %}
```javascript
```
{% endcode %}
## ユーザーを特定する
ユーザIDで特定されないユーザの場合、Alliはcookieを使用して情報を保存します。cookie履歴を削除したり、他のデバイスを使用して接続する場合は、ユーザを特定することはできません。\
\
ウェブサイトにログインし、ユーザが特定されている場合、Alliに情報を渡すことができます。あるいはログインしていないユーザーのために、一時的なIDを生成することもできます。 \
\
例えば、ユーザIDがUSER-123の場合は、次のように入力します。
{% code lineNumbers="true" %}
```javascript
```
{% endcode %}
電子メール、アドレスなどのユーザー情報を送信する場合は、下記の「変数に値を割り当てる」セクションを参照してください。
## 変数の値を指定する
会話を開始するとき、特定の変数の値を変数に割り当てる場合は、以下の形式を使用します。\
この機能を利用すれば、特定のユーザ情報をAlliの変数に格納して利用することができます。\
\
この変数は、Alliダッシュボード（プロジェクト設定＞変数）にすでに存在している変数である必要があります。 \
\
以下は、指定したユーザーにメールを割り当てる例です。
{% code lineNumbers="true" %}
```javascript
```
{% endcode %}
## **Placements**
プレイスメント情報を設定することで、Alli SDKを特定のキャンペーンチャットフローを任意のWEBサイト（アプリ）に実装することができます。
## 静的な配置
Placementを作成した後、Alliのダッシュボード上で必要なキャンペーン（スキル）にプレイスメントを指定することができ、この方法で必要な場所にキャンペーン（スキル）をロードすることができます。以下はPlacementをshoppingに呼び出す例です。
{% code lineNumbers="true" %}
```javascript
```
{% endcode %}
## 動的な配置
Alli SDKは、URL情報を自動的に送り出し、これを利用して、動的Placementを設定することができます。そのためには、単にPlacement情報の呼び出しを省略して、ダッシュボードで、次のように設定します。 \
\
たとえば、「/ download」が含まれているURLでスキル（キャンペーン）を呼びだしたい場合は、以下の様にスキルのPlacement設定を「contains 」・「DOWNLOAD」に指定します。\
SPA(Single Page App)は、動的Placementを使用することはできません。
## **トグルアイコンの位置を調整する**
alli-launcher-containerクラスを使ってカスタムCSSを記述することで、位置を調整することができます。
{% code lineNumbers="true" %}
```css
.alli-launcher-container {
bottom: 24px !important;
right: 24px !important;
}
```
{% endcode %}
## **トグルアイコンとプレビューなしで全画面でウィンドウをロードする**
スマートフォンのブラウザなどの小さな画面にロードするなどの場合には、トグルアイコンとプレビューを省略してすぐにフルスクリーンでチャットUIを読み込む必要がときがあります。以下のようにfullscreenとlauncherを使用します。
{% code lineNumbers="true" %}
```javascript
Alli.initialize({
sdkKey: 'SUN5SIMZQCTMPQQ9CZ34GJFDK8D4999382',
fullscreen: true,
launcher: {
hidden: true,
},
});
```
{% endcode %}
## モバイルで利用する場合のSDKの最適化
展開するSDKがスマートフォンなどのモバイル端末での利用を想定している場合、最適化するためには以下のコードを参考にご利用ください。
以下はモバイルでチャット画面を表示した場合に、チャット画面を全画面表示で展開する例です。以下のコードを適用した場合も、PCでの利用時には、カスタムしたチャット画面サイズで表示されます。
{% code lineNumbers="true" %}
```javascript
```
{% endcode %}
## サポートしているブラウザ
* 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`