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

Strapiを利用したウェブサイト向けのステップバイステップガイド

プラットフォーム:

ヘッドレスCMS： StrapiはAPIを通じてコンテンツを提供するヘッドレスCMSですが、組み込みのフロントエンドは含まれていません。チャットボットのインストールは、Strapiコンテンツのレンダリングに使用しているフロントエンドフレームワークによって異なります。お使いの環境に合った方法を以下から選択してください。

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

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

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

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

方法1：Next.jsとStrapi（推奨）

Next.jsをStrapiのフロントエンドとして使用している場合（最も一般的なセットアップ）、Scriptコンポーネントを使用してチャットボットを追加します：

メインレイアウトファイルを開きます：app/layout.tsx（App Router）またはpages/_app.tsx（Pages Router）
Scriptコンポーネントをインポートしてチャットボットを追加します：
import Script from 'next/script' export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" strategy="lazyOnload" /> </body> </html> ) }
YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
ファイルを保存して開発サーバーを再起動します

ヒント: strategy="lazyOnload"を使用すると、ページが完全にインタラクティブになった後にチャットボットが読み込まれ、Strapiを使用したサイトに最適なパフォーマンスを提供します。

方法2：GatsbyとStrapi

gatsby-source-strapiを使用するGatsbyサイトの場合：

プロジェクトルートのgatsby-ssr.jsを作成または編集します：
import React from 'react' export const onRenderBody = ({ setPostBodyComponents }) => { setPostBodyComponents([ <script key="asyntai-chatbot" async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" /> ]) }
YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
Gatsby開発サーバーを再起動します

方法3：Nuxt.jsとStrapi

@nuxtjs/strapiを使用するNuxt.jsアプリケーションの場合：

Nuxt 3：

nuxt.config.tsに追加します：
export default defineNuxtConfig({ app: { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } } })

Nuxt 2：

nuxt.config.jsに以下を追加します：
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

方法4：ReactとStrapi

For standard React apps (Create React App, Vite) consuming Strapi API:

public/index.htmlファイル（CRA）またはindex.html（Vite）を開きます
</body>閉じタグの前に埋め込みコードを追加します：
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
ファイルを保存します

またはReactコンポーネントを作成します：

// components/Chatbot.jsx
import { useEffect } from 'react'

export default function Chatbot() {
  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)
  }, [])
  return null
}

方法5：SvelteKitとStrapi

Strapiコンテンツを使用するSvelteKitアプリケーションの場合：

src/app.htmlファイルを編集します
</body>閉じタグの前に埋め込みコードを追加します：
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
ファイルを保存します

方法6：静的サイトとStrapi API

StrapiのRESTまたはGraphQL APIを静的HTMLサイトで使用している場合：

HTMLファイルの</body>閉じタグの前に埋め込みコードを追加します：
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
ファイルを保存してホスティングにアップロードします

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

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

ウィジェットが表示されませんか？ フレームワークに適したファイルにスクリプトを追加したことを確認してください。ブラウザの開発者コンソールでエラーがないか確認してください。サーバーサイドレンダリングを使用している場合は、スクリプトがクライアントサイドで実行されることを確認してください。ブラウザキャッシュのクリアやシークレットウィンドウでの表示をお試しください。

環境変数： セキュリティと柔軟性を向上させるため、ウィジェットIDをハードコーディングするのではなく、環境変数（例：Next.jsの場合はNEXT_PUBLIC_ASYNTAI_ID、Viteの場合はVITE_ASYNTAI_ID）に保存することを検討してください。

ドキュメント