위젯 삽입

페이지의 head에 두 줄을 넣습니다. 인라인 스크립트가 없어 엄격한 CSP에서도 실행됩니다.

간단한 방법

페이지의 head에 다음 줄을 넣고 SITE_KEY를 자신의 키로 바꿉니다.

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

이것으로 끝입니다. 로더 크기는 3.48 kB이며 브라우저에 여유가 생기거나 방문자가 채팅 버튼을 건드려야 코어를 가져옵니다.

`loader.js`를 직접 제공하면 한 줄 더 필요합니다

정책, 스테이징 환경 또는 단순한 관습 때문에 당사의 배포 네트워크 대신 자체 디렉터리에서 스크립트를 로드하려는 경우도 있습니다. 가능하지만 이때는 채팅 연결 주소를 명시해야 합니다.

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

이유: 주소를 지정하지 않으면 위젯이 스크립트를 가져온 위치에서 주소를 도출합니다. 자체 도메인이면 채팅도 그곳에서 찾으므로 아무것도 찾지 못합니다.

실패가 눈에 잘 띄지 않습니다. 채팅 버튼이 보이고 창이 열리며 색상과 언어도 올바르게 표시되어 완성된 것처럼 보입니다. 메시지만 전혀 도착하지 않습니다. 연결이 백그라운드에서 계속 재시도되므로 오류도 없으며 바로 이 점이 문제를 감춥니다. 브라우저 콘솔에서만 찾지 못하는 호스트 이름이 표시됩니다.

위 값은 당사의 모든 계정에서 동일합니다. 서버를 직접 운영할 때만 자체 값을 넣습니다.

웹사이트의 자체 서브도메인으로 제공

채팅을 자체 서브도메인으로 퍼스트 파티 방식으로 운영하려면(예: cdn.reactive.chat 대신 chat.your-company.com) 자체 도메인 가이드의 프록시 설정을 참조합니다. 그러면 계정에 맞는 스니펫이 표시됩니다.

WebSocket이 차단되는 경우

기업 프록시 뒤처럼 네트워크가 WebSocket을 통과시키지 않으면 채팅이 일반 HTTPS로 자동으로 계속됩니다. 이를 위해 Content Security Policy에 wss:// 주소 외에 아래의 https:// 주소도 필요합니다. 대체 연결이 적용되는 시점과 테스트용 강제 적용 방법은 HTTP 대체 연결에 설명되어 있습니다.

자체 링크로 채팅 열기, 홍보 카드 표시

페이지의 모든 링크나 버튼으로 채팅을 열 수 있으며 창은 바로 옆에 표시됩니다. 자체 링크나 버튼으로 채팅 열기를 참조합니다. 유료 요금제 같은 자체 상품의 카드를 채팅에 표시하는 방법은 채팅의 홍보 카드에 설명되어 있습니다.

개인정보 보호 안내 자동 삽입

개인정보 처리방침 페이지의 작은 요소에 프로젝트 설정과 항상 일치하고 페이지 언어에 맞는 채팅 안내 문구가 표시됩니다. 개인정보 보호 안내 자동 삽입을 참조합니다.

인라인 스크립트가 없는 이유

경쟁업체가 일반적으로 제공하는 형태는 인라인 <script>입니다. unsafe-inline이 없는 엄격한 Content Security Policy에서는 한 줄도 실행되기 전에 차단됩니다. 위의 속성 방식에는 인라인 스크립트가 필요하지 않습니다.

정책에서 추가로 허용해야 하는 항목:

script-src: 배포 호스트. 여기서는 cdn.reactive.chat입니다.
connect-src: WebSocket 주소. 여기서는 wss://ws.reactive.chat입니다.
connect-src: 같은 주소의 https:// 형식도 허용합니다. 여기서는 https://ws.reactive.chat 입니다. 기업 프록시가 WebSocket을 차단하면 오프라인 양식과 HTTP 대체 연결이 이를 사용합니다.

script 태그 설정

data-rc-site-key — 필수입니다. 없으면 의도적으로 아무것도 시작하지 않습니다.
data-rc-locale — de, en 또는 pl입니다. 없으면 브라우저가 결정합니다.
data-rc-brand — 브랜드 색상입니다. 읽을 수 있을 때까지 텍스트를 다시 계산합니다.
data-rc-ws-url — cdn.reactive.chat에서 loader.js를 로드하지 않으면 필수입니다. 위 섹션을 참조합니다.

그 밖의 내용은 기능 개요와 요금제 페이지에 있습니다.

문서에서 자세히 알아보기

단계별 안내: 빠른 시작. 모든 script 태그 속성의 유형과 기본값: script 태그 참조. 모든 장은 문서에서 확인할 수 있습니다.

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