# 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` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.allganize.ai/alli-llm-app-market/project-settings/sdk-implementation.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.