本文へスキップ
Namiru.ai
新規登録

ウェブサイトにAIチャットを追加

scriptタグ1つ、またはnpmパッケージ。どのフレームワークでも動作します。

HTML / JS
React / Angular / Vue
WordPress
ステップ 1

エージェントを作成

登録し、エージェントを作成し、サイトをクロールまたはファイルをアップロードしてビジネスについて教えます。

ステップ 2

ウィジェットコードをコピー

エージェントダッシュボードから2行の埋め込みスニペットを取得します。

ステップ 3

ページに追加

HTMLの</body>の前にscriptタグを貼り付けます。どのウェブサイトでも動作します。

ステップ 4

ライブ開始

リード収集と会話分析付きAIカスタマーサポート。

AIにNamiruを実装してもらう

コーディングアシスタントに1つの指示をコピーすると、適切な共通ファイルにウィジェットを配置します。

  • Codex
  • Claude
  • Kimi
  • Muse
ボットを確認しています...

クイックスタート

ステップ 1: scriptタグを追加

scriptタグを追加
<!-- Add before closing </body> tag -->
<script src="https://namiru.ai/widget.js" data-agent-id="YOUR_AGENT_ID"></script>

ステップ 2: ウィジェットを初期化

ウィジェットを初期化
<!-- Optional: use this instead of the one-line tag when you need options -->
<script src="https://namiru.ai/widget.js"></script>
<script>
  NamiruChat.init({
    agentId: "YOUR_AGENT_ID",
    position: "bottom-left",
  });
</script>

設定

の全ての設定オプション NamiruChat.init().

プロパティ型デフォルト説明
agentId*string-Agent Builderダッシュボードから取得したエージェントID。
mode"button" | "inline""button"表示モード。"button"はフローティングチャットバブルを表示、"inline"はコンテナ内に直接レンダリング。
containerHTMLElement-インラインモード用のターゲットコンテナ要素。モードが"inline"の場合に必須。
以上です - その他は全て Namiru.AI ダッシュボードで直接設定可能です。

イベント

検証済みページへのナビゲーション

ウィジェットが検証済みのウェブサイトページを開く前に、window でキャンセル可能な namiru:navigate イベントを送出します。アプリ内でルーティングする場合はイベントをキャンセルしてください。キャンセルしない場合、同一サイトのリンクは現在のトップレベルページで遷移し、外部サイトや埋め込みのリンクは新しいタブで開きます。

namiru:navigate
window.addEventListener("namiru:navigate", (event) => {
  // Optional: keep verified page links inside your single-page app.
  event.preventDefault();
  const target = new URL(event.detail.url);
  yourRouter.navigate(target.pathname + target.search + target.hash);
});

カスタマイズ

Agent Builderダッシュボードの外観設定でブランディングをカスタマイズできます。ウィジェットは設定を自動的に取得します。

ボタンモード

ページの角にあるフローティングチャットバブル。訪問者がクリックするとチャットウィンドウが開きます。

ボタンモード
<script>
  NamiruChat.init({
    agentId: "YOUR_AGENT_ID",
    mode: "button",
    position: "bottom-right",
  });
</script>

インラインモード

ページ上の任意のコンテナ要素内にチャットを直接埋め込みます。

インラインモード
<div id="namiru-container" style="width: 400px; height: 600px;"></div>
<script>
  NamiruChat.init({
    agentId: "YOUR_AGENT_ID",
    mode: "inline",
    container: document.getElementById("namiru-container"),
  });
</script>

FAQ

サイトにAIチャットを追加する準備はできましたか？

Agent Builderでエージェントを作成し、カスタマイズして、数分でウェブサイトに埋め込みましょう。