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

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: Strapi와 Next.js (권장)

Strapi 프론트엔드로 Next.js를 사용하는 경우(가장 일반적인 설정), 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: Strapi와 Gatsby

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: Strapi와 Nuxt.js

@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: Strapi와 React

Strapi API를 사용하는 표준 React 앱(Create React App, Vite)의 경우:

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: Strapi와 SvelteKit

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를 사용하는 정적 사이트

정적 HTML 사이트에서 Strapi의 REST 또는 GraphQL API를 사용하는 경우:

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

문서