Vue 챗봇: Vue 3 또는 Nuxt 앱에 AI 챗봇 추가하기

Nexoply 계정과 챗봇 키가 필요해요. 무료로 가입하고(무료 플랜에는 월 대화 50건이 포함되고 카드가 필요 없어요), 비즈니스 정보를 추가하거나 웹사이트에서 가져온 다음, 대시보드에서 챗봇을 열고 설치 코드를 복사하세요. 코드는 다음과 같아요.

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

data-chatbot의 값이 내 키예요. 비밀이 아닌 공개용 키로, 위젯이 어느 비즈니스에 속하는지만 알려 주므로 클라이언트 코드나 저장소에 넣어도 괜찮아요. 위젯은 자기 스크립트 태그에서 설정을 읽으므로, 속성 이름과 widget.js가 포함된 src는 보이는 그대로 유지하세요.

src/components/Chatbot.vue를 만드세요. 이 컴포넌트는 스스로 아무것도 렌더링하지 않아요. 마운트될 때 페이지에 Nexoply 스크립트를 한 번 추가하고, 채팅 버튼과 창은 위젯이 그려요.

<!-- src/components/Chatbot.vue -->
<script setup lang="ts">
import { onMounted } from "vue";

const props = defineProps<{ chatbotKey: string }>();

onMounted(() => {
  // 키가 없거나 스크립트가 이미 페이지에 있으면 할 일이 없어요.
  if (!props.chatbotKey || document.querySelector("script[data-chatbot]")) return;
  const s = document.createElement("script");
  s.src = "https://nexoply.com/widget.js";
  s.async = true;
  s.dataset.chatbot = props.chatbotKey;
  document.body.appendChild(s);
});
</script>

<template><slot /></template>

방문 내내 마운트된 상태로 유지되는 App.vue에서 한 번만 렌더링하세요. 키는 .env에 VITE_NEXOPLY_KEY=YOUR-KEY로 넣으세요.

<!-- src/App.vue -->
<script setup lang="ts">
import Chatbot from "./components/Chatbot.vue";

const nexoplyKey = import.meta.env.VITE_NEXOPLY_KEY;
</script>

<template>
  <!-- 레이아웃과 라우트 -->
  <Chatbot :chatbot-key="nexoplyKey" />
</template>

JavaScript 프로젝트라면 lang="ts"를 빼고, 타입 인수 대신 defineProps({ chatbotKey: String })로 쓰세요. 평범한 컴포넌트이므로 v-if="hasConsent"처럼 v-if로 렌더링해서, 방문자가 동의 배너를 수락한 뒤에만 채팅을 불러올 수도 있어요.

컴포넌트가 필요 없나요? 가장 간단한 설치 방법은 프로젝트 루트의 index.html에서 </body> 바로 앞에 태그를 붙여 넣는 거예요. 비동기로 로드되므로 렌더링을 막지 않아요.

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
</body>

Nuxt에서는 컴포넌트가 필요 없어요. nuxt.config.ts에서 사이트 전체에 스크립트를 추가하세요. tagPosition: "bodyClose"를 지정하면 </body> 바로 앞에 들어가요.

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://nexoply.com/widget.js",
          async: true,
          "data-chatbot": "YOUR-KEY",
          tagPosition: "bodyClose",
        },
      ],
    },
  },
});

또는 app.vue에서 useHead로 추가하세요. 키를 환경 변수에 두고 싶다면 nuxt.config.ts에 runtimeConfig: { public: { nexoplyKey: "" } }를 선언하고 NUXT_PUBLIC_NEXOPLY_KEY를 설정하세요. 그렇지 않다면 키를 그 자리에 직접 적으면 돼요.

<script setup lang="ts">
useHead({
  script: [
    {
      src: "https://nexoply.com/widget.js",
      async: true,
      "data-chatbot": useRuntimeConfig().public.nexoplyKey,
      tagPosition: "bodyClose",
    },
  ],
});
</script>

서버 렌더링도 문제없어요. Nuxt가 HTML에 태그를 렌더링하고, 위젯은 브라우저에서만 실행돼요. 앱의 마크업을 건드리지 않으므로 하이드레이션 불일치가 생기지 않아요.

Vue 챗봇을 검색하면 두 종류의 도구가 나오는데, 해결하는 문제가 서로 달라요.

• 챗봇 UI 라이브러리는 채팅 자체를 위한 Vue 컴포넌트를 제공해요. 메시지 목록, 입력창, 말풍선, 때로는 미리 짜인 대화 단계까지요. UI 뒤의 모든 것은 직접 만들어야 해요. 고정된 시나리오나 내 API 키로 AI 모델을 호출하는 백엔드, 그리고 답변의 근거가 되는 콘텐츠, 대화 저장, 악용 방지까지요. 채팅이 제품의 일부일 때, 예를 들어 사용자 자신의 데이터를 다루는 어시스턴트라면 잘 맞아요.
• 호스팅형 AI 챗봇인 Nexoply는 UI, AI, 백엔드를 함께 제공해요. 추가하거나 가져온 비즈니스 정보(서비스와 가격, 자주 묻는 질문, 정책, 영업시간)로만 방문자의 질문에 답하고, 모르는 내용은 모른다고 말해요. AI 키도 서버 코드도 없고, 대화, 답하지 못한 질문, 스팸 방지는 대시보드에서 관리해요. 비즈니스에 관한 질문에 답해야 하는 고객용 웹사이트에 잘 맞아요.

인터페이스와 모델을 완전히 제어하고 싶다면 라이브러리로 시작하세요. 백엔드를 만들거나 운영하지 않고 방문자의 질문에 답하는 것이 목표라면 호스팅형 위젯이 훨씬 수월해요. Nexoply가 비즈니스 정보로 답하는 방식을 확인해 보세요.

• 앱 밖에 있어요. #app(또는 Nuxt의 루트) 밖의 document.body에 마운트되므로, 리렌더링, 레이아웃 변경, 라우트 변경으로 제거되지 않아요.
• Vue Router 내비게이션. 방문자가 클라이언트 측에서 페이지를 이동하는 동안 대화가 이어지고, URL이 바뀌면 페이지 규칙(예: /pricing에서만 사이드 탭 표시)을 다시 확인해요. 추가 코드는 필요 없어요.
• Shadow DOM. 내 CSS, Tailwind 클래스, UI 라이브러리가 채팅에 스며들지 않고, 채팅의 스타일도 앱에 스며들지 않아요.
• 가벼운 부담. 비동기로 로드되고, 쿠키를 설정하지 않으며, localStorage에 익명 방문자 ID를, sessionStorage에 현재 대화만 저장해요.

히어로 섹션이나 가격표에 "궁금한 점이 있나요? 물어보세요" 버튼을 두고 싶나요? 클릭 핸들러에서 nexoply:open-chat 이벤트를 발생시키세요.

<script setup lang="ts">
function openChat() {
  window.dispatchEvent(new Event("nexoply:open-chat"));
}
</script>

<template>
  <button type="button" @click="openChat">질문하기</button>
</template>

페이지가 로드되자마자 채팅을 열려면 스크립트 태그에 data-open="true"를 추가하세요(Nuxt에서는 "data-open": "true").

• 허용된 웹사이트. 챗봇 페이지에서 이 웹사이트에서만 허용을 입력했다면 개발 호스트도 포트와 함께 추가하세요. Vite는 localhost:5173, Nuxt는 localhost:3000이에요. 또는 테스트하는 동안 목록을 비워 두세요.
• Content-Security-Policy. 앱이 CSP 헤더를 보낸다면 script-src, connect-src, img-src에 https://nexoply.com을 허용하세요.
• 테스트하기. 개발 서버를 실행하고 앱을 연 다음 실제 질문을 해 보고, 대시보드의 대화에 그 대화가 나타나는지 확인하세요.

버튼이 나타나지 않는다면 다음을 확인하세요.

• 태그를 확인하세요. 브라우저 개발자 도구에서 data-chatbot 속성이 있고 src에 widget.js가 포함된 스크립트를 찾아보세요. 없다면 키가 비어 있을 수 있어요. VITE_NEXOPLY_KEY나 NUXT_PUBLIC_NEXOPLY_KEY가 설정되어 있는지 확인하고, .env를 수정한 뒤에는 개발 서버를 다시 시작하세요.
• 콘솔과 Network 탭을 확인하세요. CSP 오류가 있다면 아직 nexoply.com이 허용되지 않은 거예요. 요청 차단은 광고 차단기 때문일 수도 있으니 확장 프로그램이 없는 시크릿 창에서 시도해 보세요.
• 대시보드를 확인하세요. 챗봇 사용 스위치가 켜져 있는지, 허용 목록을 쓴다면 내 도메인(또는 포트를 포함한 localhost)이 들어 있는지 확인하세요.
• 일부러 숨겼나요? "버튼 없음"으로 설정된 페이지 규칙은 해당 페이지에서 버튼을 숨겨요.

태그를 넣고 나면 나머지는 모두 대시보드에서 해요. 바꾼 내용은 다시 배포하지 않아도 약 1분 안에 사이트에 반영돼요. 챗봇 → 맞춤 설정에서 메시지 버튼(아이콘이나 직접 올린 이미지, 라벨, 모양, 크기, 색상, 위치)을 꾸미거나, 대신 화면 가장자리의 사이드 탭을 쓸 수 있어요. 휴대폰에서는 다른 디자인을 설정하고, 페이지 규칙으로 선택한 페이지(예: /blog/*)에서 버튼을 바꾸거나 숨길 수 있어요. 채팅 창을 브랜드에 맞게 꾸미고, 시작 화면에 예약, 전화, WhatsApp 같은 버튼을 추가하세요.

어시스턴트가 비즈니스를 배우는 방식과 모든 맞춤 설정 옵션을 확인하거나 플랜과 대화 한도를 비교해 보세요. 다른 프레임워크로 개발하나요? React 챗봇 컴포넌트 가이드와 next/script로 Next.js에 챗봇을 추가하는 방법을 참고하세요.