Widget API — Keyda Business docs

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

インストール

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

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

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

通話	機能について
`KeydaBot.open()`	チャットパネルを開く
`KeydaBot.close()`	閉じる
`KeydaBot.toggle()`	開閉する
`KeydaBot.expand()`	パネルをウィンドウの高さまで広げ、幅を最大760pxにします
`KeydaBot.shrink()`	標準カードに戻る
`KeydaBot.isOpen`	`true` チャットを表示するタイミング
`KeydaBot.isExpanded`	`true` パネルが展開されている間
`KeydaBot.clientId`	このページで使用されているClient ID

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

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

スクリプトは非同期で読み込まれるため、ページ読み込み直後はwindow.KeydaBotが存在しない場合があります。ページ解析時に呼び出すのではなく、クリックイベントにハンドラーを紐付けてください。

パネルはランチャーボタンの上部に開きます。ランチャーボタンはその場に留まり、閉じるためのコントロールに変わります。再度タップするか、ヘッダーの✕を押すか、Escapeキーを押すとチャットが閉じます。
訪問者はヘッダーからパネルを拡大できます。ウィンドウの高さまで広がり、幅は最大760pxまで対応します。この設定はブラウザに記憶されます。スマートフォンの場合は最初から全画面表示となるため、この操作ボタンは表示されません。
ロゴサイズ設定はボタンではなくロゴを変更します。ランチャーは固定の52pxピル型（円形および正方形は58px）で、その中でロゴが拡大されます。
すべてがシャドウDOM内でレンダリングされるため、サイトのCSSがウィジェットに影響を与えることも、ウィジェットのCSSがサイトに干渉することもありません。
パネルは訪問者が開いた時にのみ読み込まれるため、ページの読み込み速度は低下しません。
訪問者の会話は、再訪した場合24時間継続し、その後リセットされます。
アシスタントに接続できない場合、ウィジェットは短いメッセージを表示し、ページ上でエラーを発生させることはありません。