AIチャットのウィジェットコード: あらゆるWebサイトにサポートアシスタントを追加

AIチャットウィジェットは、訪問者がいま読んでいるページの上でそのまま質問に答えます。api14なら連携はscriptタグ1つで完了します。ダッシュボードでウィジェットをデザインし、コードをコピーしてHTMLに貼り付けるだけです。インストールするSDKも、書くべきサーバーコードもありません。

チャットウィジェットでできること

チャットウィジェットは、選んだモデルの回答をストリーミングで表示する小さな会話ウィンドウです。訪問者には見えない非公開の指示に従って動くため、サポート担当、営業アシスタント、ドキュメントの案内役として使えます。回答は基本的な書式 (段落、リスト、太字、コード、リンク) に対応し、停止 ボタンで長い回答を止められます。訪問者が同じタブ内でページを移動しても、会話はそのまま残ります。

ウィジェットコード

ウィジェット でウィジェットを保存すると、エディターに埋め込みコードが表示されます。

<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>

チャットを表示したい位置の <body> 内にタグを置いてください。2つの任意属性で、表示する場所と方法を変えられます。

画面の隅にランチャーを置きたい場合は、エディターで フローティングボタン の配置を選んでください。コードは変わりません。

チャットアシスタント公開までの4ステップ

1. モデルを選ぶ。 カタログにあるチャットモデルならどれでも使えます。モデル選択欄には各モデルの価格が表示されるので、高速で安価なモデルから始め、サイトに手を加えずに後から切り替えられます。
2. APIキーを選ぶ。 すべてのウィジェットは、あなたのAPIキーのいずれかで動作します。既存のキーを選ぶか、リストの最後にある 新しいAPIキーを作成 でこのウィジェット専用のキーを作りましょう。キーの制限がウィジェットに適用され、キーそのものがブラウザに渡ることはありません。
3. 指示と表示テキストを書く。 タイトル、あいさつメッセージ、入力欄のプレースホルダー、ボタンの文言を設定します。製品の説明と希望する口調を、非公開の指示として追加しましょう。
4. ドメインを許可する。 設定、ウィジェットのサイト に、ウィジェットを動かすサイトを登録します。それ以外のサイトからのリクエストは拒否されます。

ページを崩さない理由

ウィジェットは分離されたShadow DOM内に描画されます。サイトのCSSがチャットウィンドウに漏れ込むことはなく、ウィジェットがページのスタイルを変えることもありません。非同期で読み込まれるため、ほかのコンテンツの描画を妨げることもありません。

公開前のチェック

• エディターでプレビューを開き、お客様が実際にする質問を試してください。プレビューは未保存の設定で実際にリクエストを送ります。
• ウィジェットに1日の利用上限を設定し、アクセスの多い日でも想定外の請求が出ないようにしましょう。
• 想定されるトラフィックを残高でまかなえるか確認してください。訪問者のリクエストは、モデルの通常価格でUSD残高から差し引かれます。

試してみませんか？アカウントなしで ウィジェットページ からチャットウィジェットをデザインし、詳しくは ウィジェットのドキュメント をご覧ください。