빠른 시작

2분 안에 Respondo 채팅 위젯을 웹사이트에 추가하세요.

스크립트 추가

위젯을 표시하려는 모든 페이지에서 </body> 앞에 이 스니펫을 붙여넣으세요:

HTMLhtml

<script>
  window.Respondo = window.Respondo || {};
  Respondo.init = Respondo.init || function(c) { window.RespondoAIConfig = c; };
  Respondo.q = Respondo.q || [];
  Respondo.identify = Respondo.identify || function(d) { Respondo.q.push(['identify', d]); };
  Respondo.init({
    agentId: 'YOUR_AGENT_ID',
    channelId: 'YOUR_CHANNEL_ID'
  });
</script>
<script src="https://api.respondo.ai/widget/widget.js" async></script>

YOUR_AGENT_ID와 YOUR_CHANNEL_ID를 채널 설정에 있는 Agent ID와 Channel ID로 교체하세요(또는 값이 미리 채워진 스니펫을 채널 페이지에서 복사하세요). 위젯은 비동기로 로드되므로 페이지 성능에 영향을 주지 않습니다.

프레임워크를 사용하시나요?#

같은 위젯을 여러분의 스택에 연결합니다. 탭을 선택하세요:

이 컴포넌트를 앱의 루트 근처에서 한 번만 렌더링하세요:

Reacttsx

// respondo-widget.tsx — render once, near the root of your app
import { useEffect } from 'react';

export function RespondoWidget() {
  useEffect(() => {
    const w = window as any;
    w.Respondo = w.Respondo || {};
    w.Respondo.init = w.Respondo.init || function (c) { w.RespondoAIConfig = c; };
    w.Respondo.q = w.Respondo.q || [];
    w.Respondo.identify = w.Respondo.identify || function (d) { w.Respondo.q.push(['identify', d]); };
    if (!document.querySelector('script[data-respondo]')) {
      w.Respondo.init({
        agentId: 'YOUR_AGENT_ID',
        channelId: 'YOUR_CHANNEL_ID'
      });
      const s = document.createElement('script');
      s.src = 'https://api.respondo.ai/widget/widget.js';
      s.async = true;
      s.dataset.respondo = '1';
      document.body.appendChild(s);
    }
  }, []);

  return null;
}

YOUR_AGENT_ID / YOUR_CHANNEL_ID를 채널 설정에 있는 값으로 교체하세요 — 또는 값이 이미 채워진 준비된 스니펫을 채널 페이지에서 복사하세요.

사용자 식별(권장)

사용자가 로그인한 후 identify()를 호출하여 채팅 세션을 사용자 프로필과 연결하세요:

JavaScriptjavascript

Respondo.identify({
  email: 'user@example.com',
  name: 'John Doe',
  userId: 'usr_12345',       // 내부 사용자 ID
  metadata: {                // 임의의 커스텀 필드
    plan: 'premium',
    company: 'Acme Inc'
  },
  properties: {              // 커스텀 연락처 속성(Agent Settings에서 정의)
    account_type: 'enterprise',
    region: 'eu-west'
  }
});

완료!

위젯이 오른쪽 하단 모서리에 나타납니다. 모든 대화는 자동으로 Conversations 대시보드로 흘러들어갑니다.