埋め込みチャット

概要

デフォルトでは、Asyntaiチャットウィジェットはウェブサイトの角にフローティングバブルとして表示されます。埋め込みチャットを使用すると、ページ上に直接チャットを表示することもできます。例えば、ホームページの「チャットで相談」セクションなどです。

フローティングバブルは埋め込みチャットと並行して機能します。埋め込みセクションまでスクロールしない訪問者は引き続きバブルを使用できます。両方が同じ会話を共有します。

仕組み

セットアップ

チャットをページに表示したい場所にこの1行のHTMLを追加してください：

<script src="https://asyntai.com/static/js/chat-embed.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

YOUR_WIDGET_IDをウィジェットIDに置き換えてください。IDが事前入力された埋め込みコードは埋め込みチャット設定ページで確認できます。

例

ホームページでの使用例：

<section style="max-width: 500px; margin: 0 auto;">
    <h2>Chat with us</h2>
    <p>Ask us anything — our AI assistant is here to help.</p>

    <!-- The chat will appear right here -->
    <script src="https://asyntai.com/static/js/chat-embed.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</section>

詳細

サイズ設定

埋め込みチャットはフローティングウィジェットと同じサイズで表示されます：デスクトップでは幅400px、高さ650px、モバイルでは全幅、高さ550pxです。親コンテナのスタイリングで配置を制御できます。

フローティングバブルの動作

埋め込みチャットが画面に表示されている状態で訪問者がフローティングバブルをクリックすると、埋め込みチャットまでスクロールします。埋め込みチャットが表示されていない場合、バブルは通常のフローティングチャットオーバーレイを開きます。

メッセージの同期

埋め込みチャットとフローティングチャットは同じ会話を共有します。どちらから送信されたメッセージも両方に表示されます。同じセッション、AIコンテキスト、チャット履歴が使用されます。

複数ページ

一部のページで埋め込みチャットを使用し、他のページで通常のフローティングウィジェットを使用できます。インラインチャットを表示したいページに埋め込みスクリプトを含めるだけです。会話は通常どおりページ間で引き継がれます。

ライブプレビュー

こちらがライブの埋め込みチャットです。表示を確認できます：

要件