Prostir

実践ガイド

AI エージェント ウィジェットを Web サイトに追加する方法

ステップバイステップの記事: AI エージェント ウィジェットを Web サイトに追加する方法。 Prostir エージェントを作成して公開し、チャネルを開き、Web ウィジェットを選択し、サイトに正確な HTTPS 許可オリジンを追加し、チャット ウィジェットのスタイルを設定し、[保存] を押して、埋め込みスクリプトをコピーして Web サイトに貼り付け、ライブ ページから Web サイトのチャットボットをテストします。

01

始める前に必要なもの

  • 明示的なチャネル実行モデル、エージェント単位で有効にした Channels スイッチ、さらに hosted model 用の正の Model Usage Credits または保存済み BYOK キーを備えた公開済み Prostir エージェント。
  • ウィジェットが実行される正確なパブリック サイトのオリジン (例: https://example.com.) HTTPS を使用し、適切なサブドメインを含めて、/pricing のようなパスを貼り付けないでください。
  • Web サイト ビルダー、CMS、タグ マネージャー、または HTML テンプレートにアクセスし、</body> の前またはサイト全体のカスタム コード フィールドに小さなスクリプトを貼り付けることができます。
02

AI エージェント ウィジェットを追加する方法

パターンは単純です。エージェントを公開し、Web ウィジェット チャネルを作成し、保存し、スクリプトをコピーしてサイトに貼り付け、許可されたオリジンからテストします。

  1. 01
    Prostir に AI エージェントを作成します。

    Web サイト エージェントが行うべきことを記述し、ページ、FAQ、ドキュメント、価格設定メモ、サポート ルール、使用できるツールを追加します。訪問者に公開する前にモデルを選択してください。

  2. 02
    エージェントを公開します。

    Web サイト ウィジェットは、公開されたエージェント ランタイムを使用します。エージェントがまだドラフトのみである場合、埋め込みスクリプトは信頼できる公開 Web サイトのチャットボットを提供できません。

  3. 03
    Channels を開き、Web ウィジェットを選択します。

    エージェント単位の Channels スイッチを有効にして Web ウィジェットを選びます。サードパーティートークンは不要ですが、実行時チェックを通過するまでチャネルは無効のままです。

  4. 04
    許可されたオリジンを追加します。

    https://example.com や https://www.example.com. など、ウィジェットが実行される可能性がある正確な HTTPS オリジンをそれぞれ追加します。 Prostir はリストにない外部オリジンをブロックするため、別のサイトがウィジェット スクリプトを再利用できません。

  5. 05
    チャットウィジェットをデザインします。

    位置、幅、高さ、色、挨拶テキスト、イントロテキスト、入力プレースホルダー、ランチャーラベル、クイックアクションを設定します。最初に提案されるアクションは、価格設定、予約、サポート、注文ステータス、製品の適合など、訪問者が実際に尋ねるものに近いものにしてください。

  6. 06
    保存を押します。

    保存は設定を記録し、公開、明示的な実行モデル、エージェントの Channels スイッチ、allowed origins、構成、hosted credits または BYOK の全チェックに通った場合だけ Web ウィジェットを有効にします。それ以外は、目に見えるエラーとともに無効のままです。

  7. 07
    埋め込みスクリプトをコピーします。

    返された widgetEmbedUrl をコピーします。公開 slug と正確な channel id を必ず使用します: https://{slug}.ai.prostir.build/widget/embed.js?channelId={id}。

  8. 08
    スクリプトを Web サイトに貼り付けます。

    手動でコーディングしたサイトの場合は、</body> の前に貼り付けます。 Webflow、WordPress、Shopify、Wix、Squarespace、Framer、またはその他のビルダーでは、サイト全体のカスタム コード、埋め込みコード、またはカスタム HTML 領域を使用します。

  9. 09
    ライブサイトからテストします。

    ランダムなプレビュー URL ではなく、実際の許可されたドメインを開きます。実際に質問し、回答を確認し、会話がチャンネルに表示されることを確認します。

03

保存する前に準備するもの

優れた Web サイト AI エージェントには、ランチャー バブル以上のものが必要です。

docagent instructionsWhat the widget should answer, what it should refuse, and when it should ask for a human.
docwebsite knowledgePricing, services, FAQs, docs, policies, booking details, support rules, and source pages.
codeembed scriptProstir からコピーする一行のスクリプト: <script src="https://{slug}.ai.prostir.build/widget/embed.js?channelId={id}" async></script>。
04

Prostir の最終ステップ: Web ウィジェット、保存、スクリプト

チャネル、Web ウィジェット、許可されたオリジン、保存。

Prostir Studio

サポート エージェントを公開し、AI チャットボット ウィジェットとして Web サイトに掲載したいと考えています。

Prostir でエージェントを開き、[チャネル] に移動し、[Web ウィジェット] を選択して、サイトの正確な HTTPS オリジンを追加します。

ウィジェットは右下に表示され、価格設定、予約、サポートに関する質問から始まります。

位置、ランチャーのラベル、挨拶文、クイックアクション、色を設定します。 [保存] を押して、埋め込みスクリプトをコピーします。

Prostir

Web ウィジェットを保存しました。全実行時チェック後にのみチャネルを有効化します。それ以外は、目に見えるエラーとともに無効のままです。

Live

ウェブサイトのチャットボットが接続されました · 埋め込みスクリプトがコピーされました · 会話がチャンネルに表示されます

05

Web サイトでウィジェットをテストする

  • 許可されたオリジンにリストされている実際のドメインを使用します。別のプレビュー元からテストすると、仕様によりウィジェットが失敗して閉じる可能性があります。
  • 価格、在庫状況、次のステップ、適合性、サポート、返金、実装時間など、リードが尋ねるのと同じ質問をしてください。
  • 答えが不十分な場合は、Prostir でエージェントの手順またはナレッジを更新し、再度公開すると、Web サイトを再構築せずに、埋め込みウィジェットが改善されたエージェントを選択します。

公開内容

最後に、サイトはウィジェット埋め込みスクリプトを通じて Prostir AI エージェントを読み込みます。訪問者がチャット ウィジェットを開いて質問すると、同じ公開エージェントが指示、知識、ツール、モデル、チャネル設定から回答します。

ソリューション

次の行動を案内するWebサイト向けAI接客・営業エージェント

Web上で状況に合う会話を提供し、無理に販売を約束せず、問い合わせや購入など明確な次の行動へ案内できます。

ソリューション

サイトで答えられていない質問を見つける

実際の質問と案内したい次の行動を教えてください。