BubbleにAsyntai AIチャットボットを追加する方法

Bubbleアプリ向けステップバイステップガイド

プラットフォーム:

ステップ1：埋め込みコードを取得する

まず、Asyntaiダッシュボードに移動し、「埋め込みコード」セクションまでスクロールしてください。次のような固有の埋め込みコードをコピーしてください：

<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>

注記: 上記のコードは一例です。個人のウィジェットIDが含まれているため、ダッシュボードから固有の埋め込みコードをコピーしてください。

ステップ2：アプリ設定を使用する（推奨）

Bubbleにはアプリ設定からカスタムスクリプトを追加する機能が組み込まれています：

Bubbleアプリエディターにログインします
左サイドバーの設定に移動します
「Web App」タブをクリックします
「Advanced Settings」までスクロールします
「Custom headers and body」セクションを探してください
Asyntaiの埋め込みコードを「Script in body」フィールドに貼り付けてください
アプリをデプロイします

ヒント: ボディスクリプトフィールドにコードを追加すると、Bubbleアプリのすべてのページで読み込まれます。これはチャットウィジェットの推奨されるアプローチです。この機能は無料プランを含むすべてのBubbleプランで利用できます。

代替方法：HTML要素を使用する

特定のページにのみチャットボットを追加したい場合：

Bubbleエディターでチャットボットを追加したいページを開きます
ページにHTML要素を追加します
要素にAsyntaiの埋め込みコードを貼り付けます
アプリをデプロイします

注記: アプリ設定方式は、アプリ全体にチャットボットを適用するため推奨されます。HTML要素方式は、要素を配置した特定のページにのみチャットボットを追加します。

ステップ3：インストールの確認

アプリをデプロイした後、新しいブラウザタブまたはシークレットウィンドウでBubbleサイトにアクセスしてください。右下にチャットウィジェットボタンが表示されるはずです。クリックして正しく開いて動作することを確認してください。

ウィジェットが表示されませんか？ コードを追加した後にアプリをデプロイしたことを確認してください。ブラウザキャッシュのクリアやシークレットウィンドウでの表示をお試しください。開発モードでテストしている場合は、アプリのライブバージョンも確認してください。

ドキュメント

BubbleにAsyntai AIチャットボットを追加する方法

ステップ1：埋め込みコードを取得する

ステップ2：アプリ設定を使用する（推奨）

代替方法：HTML要素を使用する

ステップ3：インストールの確認