Asyntai AIチャットボットを任意のウェブサイトに追加する方法

HTML、カスタムサイト、静的ジェネレーター向けの汎用ガイド

埋め込みコードの取得

プラットフォーム:

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

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

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

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

ステップ2：HTMLファイルへの追加

チャットボットを追加する最も簡単な方法は、HTMLファイルに埋め込みコードを直接貼り付けることです：

テキストエディターでHTMLファイルを開きます
</body>閉じタグを見つけます
</body>タグの直前にAsyntaiの埋め込みコードを貼り付けます
ファイルを保存します

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Asyntai Chatbot - Add before closing body tag -->
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

ヒント: 閉じ</body>タグの前にスクリプトを追加することで、ページコンテンツの後に読み込まれるようになります。これはパフォーマンスに最適で、ページの速度を低下させません。

複数ページのウェブサイトの場合

ウェブサイトに複数のHTMLページがある場合、いくつかの選択肢があります：

オプションA：各ページに追加

チャットボットを表示したい各HTMLファイルに埋め込みコードを追加します。

オプションB：共通フッターインクルードの使用

If you're using server-side includes (SSI), PHP includes, or similar:

footer.html（またはfooter.php）ファイルを作成します
このファイルにAsyntaiの埋め込みコードを追加します
このフッターファイルをすべてのページにインクルードします：
 <?php include 'footer.php'; ?>

オプションC：JavaScriptによる動的読み込み

Create a single JavaScript file that loads the chatbot on all pages:

asyntai-loader.jsというファイルを作成します：
(function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })();
YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
このスクリプトをすべてのページにインクルードします：
<script src="/js/asyntai-loader.js"></script>

静的サイトジェネレーターの場合

静的サイトジェネレーターを使用している場合、ベースレイアウトまたはテンプレートに埋め込みコードを追加します：

Jekyll

_includes/footer.htmlまたは_layouts/default.htmlに追加します

Hugo

layouts/partials/footer.htmlまたはlayouts/_default/baseof.htmlに追加します

Gatsby

Add to gatsby-browser.js or use gatsby-ssr.js

Next.js

pages/_document.jsに追加するか、next/scriptコンポーネントを使用します

Nuxt.js

nuxt.config.jsのhead.scriptに追加します

Eleventy (11ty)

_includes/のベースレイアウトに追加します

Astro

src/layouts/Layout.astroの</body>の前に追加します

VuePress

.vuepress/config.jsのheadに追加します

React / Vue / Angularアプリの場合

シングルページアプリケーション（SPA）の場合、index.htmlにスクリプトを追加するか、動的に読み込むことができます：

React（index.html方式）

<!-- In public/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

React（useEffect方式）

// In your App.js or a component
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.async = true;
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  document.body.appendChild(script);
  return () => document.body.removeChild(script);
}, []);

Vue（main.jsまたはApp.vue内）

// In mounted() or onMounted()
const script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.async = true;
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);

Angular（index.html内）

<!-- In src/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

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

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

ウィジェットが表示されませんか？ スクリプトが</body>タグの前に正しく配置されていることを確認してください。ブラウザのコンソール（F12キーを押して開発者ツールを開く）にJavaScriptエラーがないことを確認してください。ブラウザのキャッシュをクリアするか、シークレットウィンドウで表示してみてください。

重要: チャットボットはウェブサイトがHTTPまたはHTTPS経由で配信されている必要があります（ファイルとして直接開くことはできません）。ローカルでテストする場合は、ローカル開発サーバーを使用してください。

ドキュメント