はじめに
ウィジェット(サイトへの埋め込み)
1 つの script タグでチャット、画像、音声、音楽、動画のウィジェットを自分のサイトに埋め込む方法です。作成手順、埋め込みコード、許可するサイト、利用額の制御、状態とアラートを説明します。訪問者に API キーは不要で、料金はモデルの通常価格で USD 残高に課金されます。
ウィジェットを使うと、1 つの script タグで、カタログの任意のモデルを使ったホワイトラベルの AI インターフェース(チャット、画像、音声、音楽、動画)を自分のウェブサイトに設置できます。訪問者に API キーは不要です。リクエストの料金は、モデルの通常価格で USD 残高に課金されます。
ウィジェットを作成する
- ウィジェットを開き、New widget を選択します(アカウントなしで先にデザインしたい場合は、ウィジェットのページを使います)。
- タイプとモデルを選び、タイトル、色、テーマ、角の丸み、テキスト、配置を設定します。チャットウィジェットでは、非公開の指示と、回答の長さの上限も設定できます。
- プレビューでは、保存前の設定が実際に実行されるため、保存する前にモデルや指示を試せます。プレビューのリクエストは残高に課金されます。
- 保存して、埋め込みコードをコピーします。
埋め込みコード
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
タグは、ウィジェットを表示したい場所の <body> 内に置きます。オプションは次のとおりです。
| 属性 | 効果 |
|---|---|
data-widget | 必須。ダッシュボードのウィジェット ID。 |
data-target | 描画先の要素を指す CSS セレクター。例: #support。指定しない場合、ウィジェットは script タグの直前に描画されます。 |
data-height | インラインのウィジェットの高さ。例: 520px。デフォルトは、チャットが 480px、その他のタイプが 420px。 |
ウィジェットは分離された Shadow DOM 内に描画されるため、ページのスタイルが入り込むことも、ウィジェットがページを変更することもありません。配置を Floating button にすると、代わりに下隅のボタンから開きます。
許可するサイト
ウィジェットは、設定のウィジェットサイトに登録したサイトからのリクエストにのみ応答します。1 行に 1 つのドメインを記載します。ドメインはサブドメインも対象に含みます(example.com は www.example.com も対象)。ポートを付けると、そのポートのみ許可されます。たとえば、ローカルテスト用の localhost:3000 です。ダッシュボードのプレビューは常に動作します。
それ以外のサイトのページは 403 site_not_allowed を受け取り、ウィジェットは描画されません(ブラウザーのコンソールに理由を説明する 1 行が表示されます)。
この確認はブラウザーの Origin ヘッダーを使います。ブラウザーはこれを変更できませんが、ブラウザー以外のツールは変更できます。そのため、サイトのリストは制限であって秘密ではないと考えてください。費用に上限を設けるのは、次の利用額の制御です。
利用額の制御
ウィジェットは公開されるため、費用はあなただけが変更できる上限によって制限されます。
| 制御 | 場所 | 効果 |
|---|---|---|
| このウィジェットの 1 日の利用額上限 | ウィジェットエディター | ウィジェットが本日(UTC)にこの金額を使い切ると、翌日まで停止します: 429 widget_daily_limit。 |
| すべてのウィジェットの 1 日の利用額上限 | 設定のウィジェット制御 | アカウント内のすべてのウィジェットに共通の上限。 |
| 訪問者ごとの 1 日のリクエスト数 | 設定のウィジェット制御 | ウィジェットごとに、訪問者の IP 単位で数えます。デフォルトは 100: 429 visitor_daily_limit。 |
| 訪問者ごとの毎分のリクエスト数 | 固定 | 訪問者ごとに毎分 10: 429 rate_limited。 |
| ウィジェットのレート | プラン | 1 つのウィジェットのすべての訪問者が、プランの毎分リクエスト数を共有します。 |
残高が最終的な上限です。$0 になると、残高を追加するまですべてのウィジェットが 402 insufficient_balance を返します。
状態とアラート
ウィジェット一覧には、各ウィジェットの最終使用日時、本日の利用額とリクエスト数が表示されます。ウィジェットが、残高不足、削除されたモデル、利用額上限への到達、リストにないサイトといった修正可能な理由で失敗している場合は、最後のエラーも表示されます。Email me when a widget fails(設定のウィジェット制御)をオンにすると、ウィジェットごとに 1 日最大 1 通のメールが届きます。
利用状況には、ウィジェットのリクエストが、ウィジェット名とリクエスト元のサイトとともに表示されます。By widget または By site でグループ化して比較できます。
訪問者に表示されるもの
- チャットの回答はストリーミングで表示され、基本的な書式(段落、リスト、太字、斜体、コード、リンク)に対応します。同じタブ内でページを移動しても、会話は維持されます。
- Stop ボタンで長い回答を終了できます。エラー後は、Try again リンクでメッセージを再送できます。
- 画像、音声、動画には Download リンクが付きます。動画はバックグラウンドジョブとして生成され、準備ができると、通常は数分以内に表示されます。
- 訪問者に、あなたの指示、残高、モデルの生のエラーが表示されることはありません。表示されるのはあなたが設定したエラーメッセージ(またはニュートラルなデフォルト)で、原因はダッシュボードであなたにだけ表示されます。
- 空のままにしたテキストには、アカウントの言語のデフォルトが使われます。