빠른 시작: 5분 안에 채팅 연결

한 줄로 위젯을 삽입하고 프로젝트에 도메인을 등록하며 Content Security Policy를 확장하고 연결을 확인합니다. 로그인 사용자, 자체 버튼과 백엔드에 관한 일반적인 다음 단계도 설명합니다.

1. 사이트 키를 가져오고 도메인 등록

계정의 프로젝트 → 설치에서 사이트 키가 포함된 삽입 스니펫을 확인합니다. 허용된 출처에 채팅을 사용할 모든 도메인을 입력합니다. 서브도메인도 포함됩니다. your-company.com은 www.your-company.com과 shop.your-company.com을 포함합니다. 채팅 서버는 이 도메인에서 오는 연결만 허용합니다.

2. 한 줄 삽입

계정의 스니펫을 </body> 앞이나 <head> 안에 넣습니다.

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-locale="en"
        async></script>

계정의 스니펫에는 브랜드 색상의 data-rc-brand도 포함되어 있어 채팅 버튼이 처음부터 올바른 색상으로 표시됩니다. 따라서 그대로 복사하는 것이 가장 좋습니다. 모든 속성: script 태그 참조.

3. Content Security Policy 확장

웹사이트에 CSP가 설정되어 있으면 다음을 추가합니다.

script-src  https://cdn.reactive.chat;
connect-src wss://ws.reactive.chat https://ws.reactive.chat;
img-src     data: https:;

connect-src 항목 두 개가 모두 필요한 이유는 보안과 CSP를 참조합니다.

4. 확인

개발자 도구를 연 상태에서 페이지를 엽니다.

요소: <body> 끝에 <reactive-chat>이 있습니다.
네트워크: loader.js가 나타나고, 늦어도 채팅 버튼 위에 마우스를 올리면 core.<hash>.js와 상태 코드 101의 wss://ws.reactive.chat/rc_wss/ WebSocket 연결이 나타납니다.
콘솔: 로드된 뒤 ReactiveChat('getSession')은 { sessionId, visitorId, tabId }를 반환합니다.

테스트 메시지를 작성하면 계정의 상담원 화면에 나타납니다. 연결되지 않으면 문제 해결을 참조합니다.

다른 적용 방식

태그 관리자를 통한 삽입: 로더는 자신의 <script> 요소에서 속성을 읽습니다. 따라서 속성이 있는 실제 <script src>를 삽입하는 태그를 만들거나 설정을 미리 지정합니다.

<script>
  window.ReactiveChatSettings = { siteKey: 'SITE_KEY', locale: 'en' };
</script>
<script src="https://cdn.reactive.chat/loader.js" async></script>

엄격한 CSP에서는 인라인 스크립트에 nonce가 필요하며 태그 관리자가 이를 설정해야 합니다.

loader.js 직접 제공: 자체 디렉터리에서 파일을 로드하는 경우 채팅 주소를 명시합니다. 그렇지 않으면 위젯이 운영자의 도메인 아래에서 채팅 서버를 찾게 되며, 오류 메시지 없이 메시지가 도착하지 않습니다.

<script src="/js/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-ws-url="wss://ws.reactive.chat/rc_wss/"
        data-rc-cdn-base="https://cdn.reactive.chat/"
        async></script>

data-rc-cdn-base를 사용하면 로더가 계속 당사에서 일치하는 코어를 가져옵니다. 주의: loader.js 복사본은 업데이트되지 않습니다. 코어가 변경되면 직접 새로 받아야 합니다. cdn.reactive.chat에서 삽입하거나 자체 도메인을 사용하는 방식이 계속 권장됩니다.

두 부분으로 된 최상위 도메인(.co.uk, .com.au 등)에서 파일을 직접 제공할 때는 항상 data-rc-ws-url을 명시합니다.

단일 페이지 앱: 앱 셸에 한 번 삽입합니다. SPA와 페이지 변경을 참조합니다.

모바일 앱: 모바일 앱.

다음 단계

로그인 사용자 인식: 서버 서명이 포함된 ReactiveChat('identify', …) – 방문자 식별.
자체 버튼과 링크: <a href="#rc-open">Help</a> – 자체 링크로 채팅 열기.
이벤트에 반응: ReactiveChat('on', 'message', …) – 이벤트.
백엔드 연결: 웹훅, 서버 API, 고객 데이터.
외관과 동작: 사용자 지정.

최종 업데이트: 2026-10-25