ウィジェットAPI

開発者向け。独自のボタンからチャットを開きたい場合にもご利用いただけます。

インストール

<script src="https://keyda.in/business/widget.js"
        data-key="kb_live_your_key_here" async></script>

スクリプトタグに必要なのはsrcとdata-keyだけです。色、位置、挨拶文、言語など、それ以外はすべてダッシュボードから設定されるため、変更のたびにサイトを再デプロイする必要はありません。

ウィジェットはインストール → ボットが話す言語で設定した言語で表示されます。ボタン、入力欄の説明、通知、そしてレイアウトの方向（アラビア語とウルドゥー語は右から左）まで含まれます。これらの文言はウィジェットの設定に含まれて届くため、追加のリクエストは発生せず、あなたの側で翻訳する必要もありません。

モード

フローティング（デフォルト）：画面の隅にランチャーボタンを配置し、クリックでチャットパネルを開きます。

インライン。ページ上に空のコンテナを配置すると、そこにチャットが表示されます：

<div data-keyda-bot style="height:520px"></div>

コンテナには高さの設定が必要です。インラインモードではチャットが常に表示されるため、開閉の操作はありません。

JavaScript API

スクリプトの読み込み後、window.KeydaBotで利用可能：

例 — 独自の「チャットで問い合わせる」ボタンからチャットを開く：

<button onclick="KeydaBot.open()">Chat with us</button>

ページ上での動作

• パネルはランチャーボタンの上部に開きます。ランチャーボタンはその場に留まり、閉じるためのコントロールに変わります。再度タップするか、ヘッダーの✕を押すか、Escapeキーを押すとチャットが閉じます。
• 訪問者はヘッダーからパネルを拡大できます。ウィンドウの高さまで広がり、幅は最大760pxまで対応します。この設定はブラウザに記憶されます。スマートフォンの場合は最初から全画面表示となるため、この操作ボタンは表示されません。
• ロゴサイズの設定はロゴを変更するもので、ボタンは変わりません。ランチャーは元のサイズのまま、その中でロゴが大きくなります。ボタン自体のサイズ（小・中・大）を変更するのはボタンサイズ（インストール → 外観）で、形状にかかわらず適用されます。
• ボタンの形状は4種類です。ラベル付きのピル型、円形のバブル、角丸の四角形、しっぽの付いた吹き出し型。しっぽはページ側を向いて配置されます。
• すべてがシャドウDOM内でレンダリングされるため、サイトのCSSがウィジェットに影響を与えることも、ウィジェットのCSSがサイトに干渉することもありません。
• パネルは訪問者が開いた時にのみ読み込まれるため、ページの読み込み速度は低下しません。
• 訪問者が戻ってきた場合、会話は24時間継続し、それを過ぎると新しい会話として始まります。パネルを再度開くとスレッドが復元され、ファイルや、回答待ちだったウェルカムフローの質問も引き継がれます。
• 入力欄のクリップアイコンから、訪問者は1メッセージにつき最大3枚の写真やドキュメントを添付できます（サイズと形式は制限とセキュリティを参照）。写真はアップロード前にブラウザ内で縮小されるため、1200万画素の写真でも数百キロバイト程度でページから送信されます。インストールでファイル機能をオフにすると、このボタンは表示されなくなります。
• ウェルカムフローは通常の吹き出しとして表示されます。選択肢は吹き出しの下にボタンとして表示され、任意のステップでは「スキップ」ボタンが現れ、入力欄の説明文が質問文になります。完了したフローは訪問者のブラウザに30日間記憶されます。
• アシスタントに接続できない場合、ウィジェットは短いメッセージを表示し、ページ上でエラーを発生させることはありません。

アプリSDK内での対応

同じチャットがすべてのSDKで動作するため、添付ファイルやウェルカムフローはリリースなしでアプリに届きます。ただし一つ例外があります。ウェブビューからファイル選択画面を開く処理はホスト側の役割です。iOS、React Native、Ionicの各パッケージはすでに対応済みですが、AndroidとFlutterはSDK 0.1.4以降が必要です。それより古いバージョンでは、ウィジェットがそのシェルを認識し、動作しないボタンを表示する代わりにクリップアイコンを非表示にします。