본문으로 건너뛰기
Namiru.ai

웹사이트에 AI 채팅 추가

script 태그 하나 또는 npm 패키지. 어떤 프레임워크에서도 작동합니다.

HTML / JS
React / Angular / Vue
WordPress
단계 1

에이전트 생성

등록하고, 에이전트를 만들고, 사이트 크롤링 또는 파일 업로드로 비즈니스를 가르치세요.

단계 2

위젯 코드 복사

에이전트 대시보드에서 2줄 임베드 스니펫을 가져오세요.

단계 3

페이지에 추가

HTML의 </body> 앞에 script 태그를 붙여넣으세요. 모든 웹사이트에서 작동합니다.

단계 4

라이브 시작

리드 수집 및 대화 분석 기능을 갖춤 AI 고객 지원.

AI가 Namiru를 설치하도록 하세요

코딩 어시스턴트에 명령 하나를 복사하면 올바른 전역 파일에 위젯을 배치합니다.

  • Codex
  • Claude
  • Kimi
  • Muse
봇을 찾는 중...

빠른 시작

단계 1: script 태그 추가

script 태그 추가
<!-- Add before closing </body> tag -->
<script src="https://namiru.ai/widget.js" data-agent-id="YOUR_AGENT_ID"></script>

단계 2: 위젯 초기화

위젯 초기화
<!-- Optional: use this instead of the one-line tag when you need options -->
<script src="https://namiru.ai/widget.js"></script>
<script>
  NamiruChat.init({
    agentId: "YOUR_AGENT_ID",
    position: "bottom-left",
  });
</script>

설정

의 모든 설정 옵션 NamiruChat.init().

속성타입기본값설명
agentId*string-Agent Builder 대시보드에서 가져온 에이전트 ID.
mode"button" | "inline""button"표시 모드. "button"은 플로팅 채팅 버블을 표시하고, "inline"은 컨테이너에 직접 렌더링합니다.
containerHTMLElement-인라인 모드용 대상 컨테이너 요소. 모드가 "inline"일 때 필수.
이게 전부입니다 - 나머지는 모두 Namiru.AI 대시보드에서 직접 설정할 수 있습니다.

이벤트

확인된 페이지 이동

위젯이 확인된 웹사이트 페이지를 열기 전에 window에서 취소 가능한 namiru:navigate 이벤트를 전달합니다. 앱 내부에서 라우팅하려면 이벤트를 취소하세요. 취소하지 않으면 같은 사이트의 링크는 현재 최상위 페이지에서 이동하고, 다른 사이트나 임베드된 링크는 새 탭에서 열립니다.

namiru:navigate
window.addEventListener("namiru:navigate", (event) => {
  // Optional: keep verified page links inside your single-page app.
  event.preventDefault();
  const target = new URL(event.detail.url);
  yourRouter.navigate(target.pathname + target.search + target.hash);
});

커스터마이징

Agent Builder 대시보드의 외관 설정에서 브랜딩을 커스터마이징하세요. 위젯이 설정을 자동으로 가져옵니다.

버튼 모드

페이지 모서리에 있는 플로팅 채팅 버블. 방문자가 클릭하면 채팅 창이 열립니다.

버튼 모드
<script>
  NamiruChat.init({
    agentId: "YOUR_AGENT_ID",
    mode: "button",
    position: "bottom-right",
  });
</script>

인라인 모드

페이지의 모든 컨테이너 요소 안에 채팅을 직접 임베드합니다.

인라인 모드
<div id="namiru-container" style="width: 400px; height: 600px;"></div>
<script>
  NamiruChat.init({
    agentId: "YOUR_AGENT_ID",
    mode: "inline",
    container: document.getElementById("namiru-container"),
  });
</script>

FAQ

사이트에 AI 채팅을 추가할 준비가 되셨나요?

Agent Builder에서 에이전트를 생성하고, 사용자 정의하고, 변 분 만에 웹사이트에 삽입하세요.