AIに質問ボタン

サイトのどこにでも、ワンクリックでチャットに質問を送信するボタンを追加できます

サイトのどこにでも — 製品の横、料金表、FAQ など — ボタンやリンクを配置でき、クリックするとチャットが開いて訪問者に代わってすぐに質問を送信します。ワンクリックでメッセージが送られ AI が回答するので、入力せずに答えが得られます。

ヒント: 料金表、FAQ、製品ページに最適です。訪問者がよく質問する項目の横に「AIに質問」ボタンを配置しましょう。

仕組み

Asyntaiウィジェットスクリプトがページにインストールされると、window.AsyntaiWidgetにグローバルJavaScript APIが公開されます。そのメソッドを呼び出してチャットウィジェットをプログラムで制御できます。

質問を送信するには、送信したいメッセージを指定して window.AsyntaiWidget.ask() を呼び出します:

// Open the chat and send a question
window.AsyntaiWidget.ask("What are your shipping times?");

基本的な例

HTML の任意の場所にボタンを追加し、送信する質問を渡します:

<button onclick="window.AsyntaiWidget.ask('What are your shipping times?')">
  Ask about shipping
</button>

訪問者がボタンをクリックすると、チャットが開き、質問が自動的に送信されます。

テキストリンクの例

クリックすると質問を送信するテキストリンクを追加します:

<a href="#" onclick="event.preventDefault(); window.AsyntaiWidget.ask('Do you offer refunds?');">
  Ask about refunds
</a>

注記: アンカーリンクにevent.preventDefault()を使用して、クリック時にページがトップにスクロールするのを防いでください。

スタイル付きボタンの例

カスタムスタイリングでより目立つCTAボタンを作成します：

<style>
  .ask-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
  }
  .ask-ai-btn:hover {
    background: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4);
  }
</style>

<button class="ask-ai-btn" onclick="window.AsyntaiWidget.ask('How does pricing work?')">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2l1.9 4.8L18.7 8l-4.8 1.9L12 14.7l-1.9-4.8L5.3 8l4.8-1.2L12 2z"/>
  </svg>
  Ask AI
</button>

自動的に読み込まれます

ask() メソッドは送信前にウィジェットの読み込み完了を待つため、ページの読み込み直後に訪問者がクリックしても機能します。ウィジェットの準備ができているか確認する必要はありません。

完全なAPIリファレンス

メソッド	説明
`AsyntaiWidget.ask("message")`	チャットを開き、訪問者が入力したかのようにメッセージを送信します
`AsyntaiWidget.open()`	チャットウィジェットを開きます
`AsyntaiWidget.close()`	チャットウィジェットを閉じます
`AsyntaiWidget.toggle()`	チャットの開閉を切り替えます