Asyntai で AI チャットボットを追加する

Asyntai は、ウェブサイトに AI サポートエージェントを追加します。サイトのコンテンツから、80 以上の言語で訪問者に回答し、必要に応じて人間に引き継ぎます。チャットは 1 つのスクリプトタグで動作するため、インストールは 1 つの小さな編集で完了します。

ステップ 1: ウィジェット ID を取得する

インストールには、サイトのウィジェット ID が必要です。これは asyntai_ の後に 12 桁の英数字が続く形式で、例えば asyntai_1a2b3c4d5e6f のようになります。

ユーザーが既に提供している ID、またはプロジェクトに既にある ID（コード内で data-asyntai-id を検索）を探します。サイトに既にスニペットがある場合は、2 つ目を追加しないでください。
Asyntai MCP サーバーが接続されている場合は、list_websites を呼び出します。各ウェブサイトには widget_id があります。
それ以外の場合は、ユーザーに ID を尋ねます。ID の場所を伝えてください: https://asyntai.com/dashboard にサインインし、「Install」ページを開き、スニペットから data-asyntai-id の値をコピーします。
ユーザーがアカウントを持っていない場合は、https://asyntai.com/auth/ から無料でアカウントを作成できます。Free プランでチャットボットを試すことができます。

ウィジェット ID をでっち上げないでください。ID がない場合は、コード内にプレースホルダー YOUR_WIDGET_ID を入れ、ユーザーに置き換えるよう伝えてください。

ステップ 2: サイトのビルド方法を確認する

ホスト型ビルダーまたは CMS（WordPress、Shopify、Wix、Webflow、Squarespace、HubSpot、Ghost、Moodle など）: ユーザーはコードではなく、そのプラットフォームの管理画面でウィジェットをインストールします。references/platforms.md でプラットフォームを見つけ、そのガイドリンクと簡単な手順をユーザーに伝えてください。
コードベース: package.json、設定ファイル、フォルダ構成を確認し、references/frameworks.md に従ってください。各スタックの正確な編集方法と、静的サイトおよびドキュメントツール用の Asyntai パッケージが記載されています。

ステップ 3: スニペットを追加する

これが公式スニペットです。以下の通り正確に保ち、YOUR_WIDGET_ID のみを変更してください:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

これはページの load イベントを待つため、ページの読み込み速度を低下させません。すべてのページで使用される共有レイアウトに 1 回だけ配置してください（</body> の前または <head> 内）。1 つのページコンポーネントにだけ配置すると、そのページでのみチャットが表示されます。

ステップ 4: 結果を確認する

サイトを実行（またはビルド）し、ページを開きます。
チャットボタンが隅に表示されます。ウィジェットは #asyntai-widget-host-<ウィジェット ID> 要素内に描画されます。ブラウザコンソールで、document.querySelectorAll('script[data-asyntai-id]').length が 1 であることを確認します。

ボタンが表示されない場合:

ブラウザコンソールで Asyntai Widget: というエラーを確認します。

サイトが Content Security Policy を送信している場合、以下のソースを許可する必要があります:

ディレクティブ	ソース
`script-src`	`https://widget.asyntai.com https://asyntai.com`（スニペット用に `'unsafe-inline'` も、または references/frameworks.md の短縮形を使用）
`connect-src`	`https://asyntai.com`
`style-src`	`'unsafe-inline'`
`img-src`	`data: https://flagcdn.com`

ステップ 5: ユーザーに次のステップを伝える

ウィジェットは、ユーザーが Asyntai ダッシュボード（https://asyntai.com/dashboard）で追加したコンテンツに基づいて回答します。ユーザーに以下を伝えてください:

ウェブサイトのページ、ファイル、またはテキストをナレッジとして追加する,
ダッシュボードでエージェント名、色、挨拶文を設定する,
https://asyntai.com/documentation/installation/ の完全ガイドを読む。

Asyntai MCP サーバーが接続されている場合は、代わりにこの設定を行うことができます。manage-ai-support-agent スキルを参照してください。

Asyntai で AI チャットボットを追加