ダッシュボードに戻る

ドキュメント

Asyntaiの使い方を学ぶ

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

Framerウェブサイトのためのステップバイステップガイド

埋め込みコードの取得

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

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

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

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

ステップ2:カスタムコードを使用(推奨)

Framerにはスクリプトの追加を簡単にする組み込みのカスタムコード機能があります:

  1. Framerプロジェクトを開きます
  2. 左上の歯車アイコン(サイト設定)をクリックします
  3. 「カスタムコード」セクションに移動してください
  4. 「スクリプトを追加」ボタンをクリックしてください
  5. スクリプトフィールドにAsyntaiの埋め込みコードを貼り付けます
  6. 配置を「<body>タグの末尾」に設定してください
  7. サイトを保存して公開します

ヒント: スクリプトを「<body>タグの末尾」に配置すると、ページコンテンツの後に読み込まれ、チャットウィジェットに推奨されるとともにページの読み込みを遅くしません。Framerは「<head>の先頭」と「<head>の末尾」オプションも提供していますが、bodyの末尾が推奨されます。

代替方法:コードコンポーネントを使用

コードコンポーネントを使用してチャットボットを追加する場合:

  1. Framerエディターで、チャットボットを追加したいページを開きます
  2. キャンバスにコードコンポーネントを追加します
  3. コンポーネントにAsyntaiの埋め込みコードを貼り付けます
  4. 必要に応じてレイアウト内の位置を調整します

注記: カスタムコード方式は、サイト全体のすべてのページにチャットボットを適用できるため推奨されます。コードコンポーネント方式では、コンポーネントを配置した特定のページにのみチャットボットが追加される場合があります。

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

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

ウィジェットが表示されませんか? コードを追加した後、サイトを保存して公開したことを確認してください。ブラウザのキャッシュをクリアするか、シークレットウィンドウで表示してみてください。カスタムドメインを使用している場合、変更が反映されるまで数分かかることがあります。