Contentful에 Asyntai AI 챗봇을 추가하는 방법

Contentful 기반 웹사이트를 위한 단계별 가이드

플랫폼:

헤드리스 CMS: Contentful은 헤드리스 CMS로, API를 통해 콘텐츠를 제공하지만 기본 프런트엔드를 포함하지 않습니다. 챗봇 설치는 Contentful 콘텐츠를 렌더링하는 데 사용하는 프런트엔드 프레임워크에 따라 다릅니다. 아래에서 설정에 맞는 방법을 선택하세요.

1단계: 임베드 코드 가져오기

먼저 Asyntai 대시보드로 이동하여 "임베드 코드" 섹션까지 아래로 스크롤하십시오. 다음과 같은 형태의 고유 임베드 코드를 복사하십시오:

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

참고: 위의 코드는 예시일 뿐입니다. 개인 위젯 ID가 포함된 고유한 임베드 코드를 대시보드에서 복사해야 합니다.

방법 1: Contentful과 함께 Next.js 사용 (권장)

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: Contentful과 함께 Gatsby 사용

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: Contentful과 함께 React 사용

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: Contentful과 함께 Vue/Nuxt 사용

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: Contentful API와 함께 정적 HTML 사용

바닐라 JavaScript로 Contentful의 Content Delivery API를 사용하는 경우:

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)에 저장하는 것을 고려하세요.

문서