자체 링크나 버튼으로 채팅 열기

웹사이트의 모든 링크나 버튼으로 채팅을 열 수 있으며 클릭한 요소 바로 옆에 창이 나타납니다. 미리 입력한 텍스트, 탭 선택과 채팅 말풍선 숨기기도 가능합니다.

방문자는 모서리의 채팅 말풍선 대신 웹사이트의 링크나 버튼으로도 채팅을 열 수 있습니다. 예를 들어 사이드바의 “도움말 및 지원”, 요금제 페이지의 “내 요금제 문의”입니다. 채팅 창은 해당 요소 바로 옆에 열립니다.

추가 코드는 필요하지 않습니다. 위젯 삽입의 일반 삽입 스니펫이면 됩니다. 계정의 프로젝트 → 삽입 → 자체 링크로 채팅 열기에도 복사할 예시가 있습니다.

가장 간단한 경우

#rc-open을 가리키는 링크:

<a href="#rc-open">Help & support</a>

또는 data-rc-open 속성이 있는 버튼:

<button type="button" data-rc-open>Open chat</button>

data-rc-open은 버튼뿐 아니라 모든 요소에서 작동합니다. 위젯은 #rc-open 외에 #reactive-chat도 링크 대상으로 받습니다.

위젯 로드가 끝나지 않았어도 클릭은 유효합니다. 준비되는 즉시 창이 열립니다.

창이 표시되는 위치

공간이 충분하면 요소 오른쪽, 그렇지 않으면 왼쪽입니다. 창 상단은 요소와 나란히 맞춥니다.
항상 전체가 보이도록: 창은 보이는 영역 안에 유지되며 페이지를 스크롤하거나 브라우저 크기를 바꾸면 요소를 따라갑니다.
좁은 화면(너비 480픽셀 미만, 즉 대부분의 스마트폰)에서는 평소처럼 전체 화면으로 열립니다. 요소 옆에 공간이 없기 때문입니다.
사이드 패널: 외관에서 전체 높이 사이드 패널로 설정했다면 요소 옆이 아니라 그 위치에 열립니다.
채팅이 이미 열려 있으면 마지막으로 클릭한 링크로 이동합니다.
채팅을 닫으면(Escape 포함) 연 링크나 버튼으로 키보드 포커스가 돌아갑니다.

모서리의 일반 위치에서 열려면 data-rc-open="corner"를 씁니다. data-rc-anchor="none"도 같은 기능입니다.

<button type="button" data-rc-open="corner">Open chat</button>

메시지 필드 미리 채우기

data-rc-message로 채팅이 열릴 때 메시지 필드에 문장을 미리 넣습니다. 전송되지는 않습니다. 방문자가 내용을 추가, 변경, 삭제하고 직접 전송합니다.

<button type="button" data-rc-open data-rc-message="I have a question about my plan">
  Question about my plan
</button>

최대 200자를 사용하며 이때 채팅은 대화 탭으로 전환됩니다.

탭 선택

채팅에 탭이 여러 개 있으면 data-rc-tab으로 열릴 때 앞에 표시할 탭을 정합니다.

msg – 대화,
home – 시작 페이지,
help – 도움말 문서.

<a href="#rc-open" data-rc-tab="help">Browse help articles</a>

지정한 탭이 없으면(예: 도움말 문서 없는 help) 평소처럼 채팅을 엽니다.

자체 JavaScript에서 열기

호출에도 같은 옵션이 있습니다. anchor는 창을 옆에 표시할 요소이며 message와 tab은 선택 사항입니다.

document.querySelector('#my-button').addEventListener('click', function (ev) {
  ReactiveChat('open', {
    anchor: ev.currentTarget,
    message: 'I have a question about my plan',
    tab: 'msg'
  });
});

anchor가 없으면 일반 위치에 열립니다. 옵션 없는 ReactiveChat('open')은 이전과 똑같이 작동합니다. 요소 자체에 data-rc-message나 data-rc-tab이 있으면 호출에도 적용됩니다. 호출에서 명시적으로 전달한 값이 우선합니다.

삽입 스니펫이 로드되기 전에 코드가 실행될 수 있다면 앞에 다음 줄을 넣습니다. 호출을 큐에 넣고 위젯이 준비되는 즉시 실행합니다.

window.ReactiveChat = window.ReactiveChat || function () { (window.ReactiveChat.q = window.ReactiveChat.q || []).push(arguments); };

채팅 말풍선 완전히 숨기기

사이드바의 “도움말 및 지원”처럼 자체 링크로만 채팅에 접근하게 하려면 두 방법이 있습니다.

계정: 프로젝트 → 외관 → 브랜드 설정의 표시를 자체 링크로만(채팅 아이콘 없음)으로 설정하고 저장합니다. 웹사이트를 바꾸지 않아도 적용됩니다. 그래도 이후 프로젝트 → 설치에서 삽입 스니펫을 다시 복사합니다. 새 스니펫에는 브랜드 색상이 없어 페이지 로드 중 채팅 아이콘이 잠깐 나타나지 않습니다. 연결이 없거나 첫 방문에서 쿠키를 허용하기 전처럼 위젯이 서버 설정을 받지 못한 동안에는 채팅 접근을 보장하는 안전장치로 아이콘이 표시됩니다.

스니펫: 아이콘이 절대 나타나면 안 되면 삽입 스니펫의 data-rc-hide-launcher="true"로 말풍선을 숨깁니다. 계정 설정과 관계없이 항상 적용됩니다.

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

그런 다음 방문자가 채팅에 접근해야 하는 모든 페이지에 링크가 최소 하나 있는지 확인합니다.

문제 해결

클릭하면 주소에 #rc-open만 추가됨: 이 페이지에 위젯이 없거나 아직 로드되지 않았습니다(예: 동의 없음). 삽입 스니펫이 있는지 확인합니다.
링크 옆 대신 모서리에 열림: 요소에 data-rc-open="corner"나 data-rc-anchor="none"이 있나요? 브라우저 너비가 480픽셀 미만인가요? 사이드 패널로 설정되었나요?
메시지 필드에 텍스트가 나타나지 않음: 속성 이름은 data-rc-message이며 클릭한 요소 자체에 있어야 합니다.

스니펫의 다른 설정은 위젯 삽입에 있습니다. 채팅 안에 자체 상품의 카드를 표시하는 방법은 채팅의 홍보 카드에 설명되어 있습니다.

문서에서 더 알아보기

자세한 내용: script 태그 참조와 JavaScript API. 모든 장은 문서에서 확인할 수 있습니다.

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