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

DatoCMSで構築されたウェブサイトのためのステップバイステップガイド

プラットフォーム:

ヘッドレスCMS： DatoCMSはAPIを通じてコンテンツを配信するヘッドレスCMSです。チャットボットのコードは、DatoCMSダッシュボードではなく、フロントエンドアプリケーション（Next.js、Gatsby、Nuxtなど）に追加する必要があります。

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

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

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

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

ステップ2：Next.jsフロントエンドに追加（最も一般的）

Next.jsはDatoCMSで最も人気のあるフロントエンドフレームワークです。Scriptコンポーネントを使用してチャットボットを追加します：

App Router（app/layout.tsx）：

ルートレイアウトファイルを開きます：app/layout.tsx
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="afterInteractive" /> </body> </html> ) }
YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
ファイルを保存して開発サーバーを再起動します

Pages Router（pages/_app.tsx）：

pages/_app.tsxファイルを開きます
Scriptコンポーネントを追加します：
import Script from 'next/script' import type { AppProps } from 'next/app' export default function App({ Component, pageProps }: AppProps) { return ( <> <Component {...pageProps} /> <Script src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" strategy="afterInteractive" /> </> ) }

ヒント: strategy="afterInteractive"を使用すると、ページがインタラクティブになった直後にチャットボットが読み込まれ、パフォーマンスと可用性の良いバランスが得られます。

代替方法1：Gatsbyフロントエンド

gatsby-source-datocmsを通じてDatoCMSからコンテンツを取得する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開発サーバーを再起動します

代替方法2：Nuxt.jsフロントエンド

DatoCMSコンテンツを使用するNuxt.jsアプリケーションの場合：

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' } ] } } })
YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
Nuxt開発サーバーを再起動します

代替方法3：プレーンHTML / 静的サイト

DatoCMSのContent Delivery APIを静的HTMLサイトまたは静的サイトジェネレーターで使用している場合：

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

代替方法4：React（Vite/CRA）

DatoCMS APIを使用する標準的なReactアプリ（Create React App、Viteなど）の場合：

オプションA：public/index.htmlに追加

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>
ファイルを保存します

オプションB：ルートコンポーネントでuseEffectを使用

チャットボットコンポーネントを作成するか、ルートコンポーネントに追加します：
// 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 }
App.jsxまたはルートレイアウトでコンポーネントをインポートしてレンダリングします

ステップ3：デプロイと確認

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

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

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

ドキュメント