직접 개발한 사이트에 채팅 상담 위젯 설치하기 (HTML · React · Next.js)
프레임워크에 상관없이 페이지가 다 그려진 뒤 스크립트 태그 하나가 실행되면 끝입니다. 아래는 자주 쓰는 스택별 위치입니다.
시작하기 전에 — 설치 코드 받기
AssistTalk 관리자 콘솔에 로그인한 뒤 설정 → 사이트별 설정 → 위젯 설치 코드 에서 내 사이트 코드를 복사하세요. 아래 data-site 값이 사이트마다 다릅니다.
<script src="https://assisttalk.mgweb.biz/widget.js" data-site="발급받은_사이트_ID"></script>위젯은 관리자에 등록한 도메인에서만 동작합니다. 코드를 붙여넣기 전에 사이트 도메인이 정확히 등록되어 있는지 확인해 주세요.
직접 개발한 사이트 설치 단계
순수 HTML · 정적 사이트
index.html을 비롯한 각 페이지의</body>바로 위에 설치 코드를 넣습니다. 페이지가 여러 개면 공통 푸터 파일에 넣으세요.React (Vite · CRA)
public/index.html의</body>바로 위에 넣는 게 가장 간단합니다. 라우팅이 바뀌어도 위젯은 그대로 유지됩니다.Next.js (App Router)
app/layout.tsx에서next/script를 쓰고strategy="afterInteractive"로 지정합니다. Pages Router 라면pages/_document.tsx의<body>끝에 넣습니다.Vue · Nuxt
Vue 는
public/index.html, Nuxt 는nuxt.config.ts의app.head.script배열에{ src, "data-site" }를 추가합니다.
Next.js (App Router) — app/layout.tsx
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html lang="ko">
<body>
{children}
<Script
src="https://assisttalk.mgweb.biz/widget.js"
data-site="s_xxxxxxxxxxxx"
strategy="afterInteractive"
/>
</body>
</html>
);
}Nuxt 3 — nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
script: [
{ src: 'https://assisttalk.mgweb.biz/widget.js', 'data-site': 's_xxxxxxxxxxxx', defer: true },
],
},
},
});설치가 잘 됐는지 확인하기
- 실제 사이트 주소로 접속합니다 (편집기 미리보기 아님)
- 오른쪽 아래에 상담 버튼이 떠 있는지 봅니다
- 버튼을 눌러 메시지를 하나 보내 봅니다
- 관리자 콘솔 상담함에 그 문의가 들어왔는지 확인합니다
직접 개발한 사이트 설치 관련 자주 묻는 질문
SPA 라서 페이지 이동 시 위젯이 사라지지 않나요?
위젯은 body 에 한 번만 붙고 라우팅과 무관하게 살아 있습니다. 페이지를 옮겨도 대화가 끊기지 않습니다.
SSR 환경에서 window 오류가 나지 않나요?
스크립트는 브라우저에서만 실행됩니다. Next.js 는 next/script, Nuxt 는 head 설정을 쓰면 서버 렌더링과 충돌하지 않습니다.
Content-Security-Policy 를 쓰고 있어요
CSP 를 적용 중이라면 script-src 와 connect-src 에 https://assisttalk.mgweb.biz 를 허용해 주세요. 실시간 통신에 WebSocket 을 씁니다.
설치하는 데 얼마나 걸리나요?
스크립트 한 줄을 붙여넣는 게 전부라 보통 1분이면 끝납니다. 개발 지식이 없어도 복사·붙여넣기만 하면 됩니다.
설치 코드는 어디서 받나요?
AssistTalk 관리자 콘솔에 로그인한 뒤 설정 → 사이트별 설정 → 위젯 설치 코드 에서 사이트별 코드를 복사할 수 있습니다.
코드를 넣었는데 위젯이 안 보여요
① 등록한 도메인과 실제 접속 주소가 같은지, ② </body> 앞에 넣었는지, ③ 캐시를 비웠는지 세 가지를 확인해 보세요. 위젯은 관리자에 등록된 도메인에서만 동작합니다.
무료로 쓸 수 있나요?
Free 요금제로 월 문의 10건까지 무료입니다. 카드 등록 없이 바로 시작할 수 있습니다.
아직 계정이 없으신가요?
월 문의 10건까지 무료입니다. 카드 등록 없이 바로 시작할 수 있어요.
무료로 시작하기