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

Contentful搭載ウェブサイト向けステップバイステップガイド

プラットフォーム:

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

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

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

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

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

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

Next.jsでContentfulコンテンツをレンダリングしている場合は、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"を使用すると、ページが完全にインタラクティブになった後にチャットボットが読み込まれ、最高のパフォーマンスが得られます。

方法2：GatsbyとContentful

Contentfulからコンテンツを取得するGatsbyサイトの場合：

gatsby-plugin-load-scriptをインストールします（任意ですが推奨）：
npm install gatsby-plugin-load-script
gatsby-config.jsに追加します：
module.exports = { plugins: [ { resolve: 'gatsby-plugin-load-script', options: { src: 'https://asyntai.com/static/js/chat-widget.js', attributes: { 'data-asyntai-id': 'YOUR_WIDGET_ID', async: true } } } ] }
または、gatsby-ssr.jsを使用します：
// 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" /> ]) }
Gatsby開発サーバーを再起動します

方法3：ReactとContentful

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

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

またはuseEffectを使用した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
}

方法4：Vue/NuxtとContentful

Contentfulを使用するVueまたは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' } ] } } })

Vue 3：

index.htmlの</body>の前に追加します：
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

方法5：静的HTMLとContentful API

ContentfulのContent Delivery APIをバニラJavaScriptで使用している場合：

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

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

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

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

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

ドキュメント