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

문서