ダッシュボードに戻る

ドキュメント

Asyntaiの使い方を学ぶ

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

Webflowウェブサイト向けのステップバイステップガイド

埋め込みコードの取得

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

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

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

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

ステップ2:サイト設定からコードを追加する(全ページ)

Webflowサイトのすべてのページに一括でチャットボットを追加するには:

  1. Log in to your Webflow account and select your project
  2. 左サイドバーの歯車アイコン(サイト設定)をクリックします
  3. 設定メニューで「Custom Code」をクリックします
  4. 「Footer Code」セクション(</body>タグの前)までスクロールします
  5. Asyntaiの埋め込みコードを貼り付けます
  6. 「Save Changes」をクリックします
  7. 変更を反映するためにサイトを公開します

ヒント: フッターセクションにコードを追加すると、閉じタグ</body>の直前に配置されます。これはチャットウィジェットに推奨される方法であり、ページの読み込みを遅くすることはありません。

代替方法:ページ固有のカスタムコード

特定のページにのみチャットボットを表示したい場合:

  1. Webflowデザイナーでプロジェクトを開きます
  2. 左サイドバーのページパネル(フォルダアイコン)をクリックします
  3. 編集したいページにカーソルを合わせ、歯車アイコンをクリックします
  4. 「Custom Code」までスクロールします
  5. Asyntaiの埋め込みコードを「Before </body> tag」セクションに貼り付けます
  6. 「保存」をクリックしてください
  7. サイトを公開します

代替方法:埋め込み要素を使用する

ページ上の任意の場所に埋め込み要素を使用してチャットボットを追加することもできます:

  1. Webflowデザイナーでプロジェクトを開きます
  2. 「+」ボタンをクリックして追加パネルを開きます
  3. 「Embed」を検索するか、コンポーネントから見つけます
  4. 埋め込み要素をページにドラッグします
  5. コードエディタにAsyntai埋め込みコードを貼り付けてください
  6. 「保存して閉じる」をクリックしてください
  7. サイトを公開します

重要: 埋め込み要素を使用する場合、チャットボットを表示したい各ページに追加する必要があります。サイト全体にインストールするには、上記のサイト設定の方法を使用してください。

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

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

ウィジェットが表示されませんか? コードを追加した後にサイトを公開したことを確認してください。カスタムコードはライブサイトにのみ表示され、デザイナープレビューには表示されません。ブラウザのキャッシュをクリアするか、シークレットウィンドウで表示してみてください。