채팅 버튼: 형태, 크기, 아이콘, 레이블과 위치

방문자가 채팅을 여는 버튼의 형태, 데스크톱·휴대전화 크기, 아이콘, 두 번째 줄이 있는 레이블, 표시 방식, 템플릿 20개, 위치와 막대 피하기를 설명합니다.

채팅 버튼은 방문자가 채팅을 열 때 사용하는 하단 모서리의 버튼입니다. /app/projects/{id}의 외관 탭, 브랜드 설정 섹션에서 설정합니다. 실시간 미리보기 채팅 버튼 모습에 모든 변경이 즉시 표시됩니다. 저장으로 저장하면 1분 안에 방문자에게 적용됩니다.

채팅 버튼의 색상은 주 색상입니다. 색상, 글꼴과 테마를 참조합니다.

채팅 버튼 템플릿

“가상 어시스턴트 – 2분 안에 답변”, “궁금한 점이 있나요?”, “고객 서비스 – 월–금 오전 8시–오후 6시”, “AI 어시스턴트 – 몇 초 안에 답변” 같은 미리 준비된 조합 20개가 있습니다. 한 번 클릭하면 형태, 아이콘, 레이블, 두 번째 줄, 표시 방식과 크기를 채웁니다. 색상은 그대로 유지되며 저장을 눌러야 저장됩니다. 그 후 텍스트를 조정합니다.

필드

형태 – 원(기본값), 둥근 모서리, 사각형, 말풍선, 잎입니다. 말풍선에서는 뾰족한 모서리가 화면 모서리를 향합니다. 잎에서는 서로 마주 보는 두 모서리가 작습니다.
크기(px) – 44–72이며 기본값은 56입니다. 44는 안정적으로 누를 수 있는 최소 영역입니다.
휴대전화 크기(px) – 40–72입니다. 비워 두면 48 px이며 위의 크기가 더 작으면 그 크기를 사용합니다.
아이콘 – 말풍선(기본값), 물음표, 헤드셋, 반짝임, 아이콘 없음(텍스트만)입니다. 아이콘이 없으면 레이블과 항상 표시가 필요합니다. 그렇지 않으면 말풍선이 표시됩니다.
레이블 – 아이콘 옆에 보이는 텍스트이며 최대 40자입니다. 비워 두면 아이콘만 표시합니다.
두 번째 줄 – 레이블 아래의 더 작은 두 번째 줄로 최대 60자입니다. 레이블이 없으면 표시되지 않습니다.
표시 – 레이블을 표시할 시점입니다.
항상(기본값),
마우스를 올릴 때만 – 기본적으로 아이콘만 표시하며 마우스를 올리거나 키보드 포커스를 받으면 레이블이 펼쳐집니다. 터치 기기에서는 아이콘만 유지합니다.
큰 화면에서만 – 너비 481 px부터 레이블을 표시하고 그보다 작으면 아이콘만 표시합니다.
자체 링크로만(채팅 아이콘 없음) – 채팅 버튼을 전혀 표시하지 않습니다. 아래를 참조합니다.

언어별 레이블

양식의 레이블과 두 번째 줄은 모든 언어에 적용됩니다. 언어마다 다르게 표시하려면 텍스트와 양식 → 자체 문구에서 launcher.text와 launcher.subtext 키로 입력합니다. 여기에 입력한 내용은 이 필드보다 우선합니다. 자세한 내용은 텍스트와 언어에 있습니다.

채팅 버튼 없는 채팅

자체 링크로만(채팅 아이콘 없음) 표시를 선택하면 채팅 버튼이 나타나지 않습니다. 방문자는 운영자의 자체 링크나 버튼으로 채팅을 엽니다.

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

채팅에 접근할 수 있어야 하는 모든 페이지에 이런 링크를 최소 하나 넣습니다. 그 후 설치에서 삽입 스니펫을 다시 복사합니다. 새 스니펫에는 브랜드 색상이 없어 페이지 로드 중 채팅 버튼이 잠깐 나타나지 않습니다.

연결이 없거나 첫 방문에서 쿠키 동의를 받기 전처럼 위젯이 아직 서버 설정을 가져오지 못한 동안에는 안전장치로 채팅 버튼이 표시됩니다. 절대 표시되면 안 된다면 스니펫에 다음도 추가합니다.

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

data-rc-hide-launcher는 계정 설정에 관계없이 항상 적용됩니다. 채팅 버튼이 없으면 버튼의 툴팁 말풍선도 없습니다. 미리 입력한 텍스트와 탭 선택을 포함해 자체 요소에서 채팅을 여는 모든 방법은 자체 링크나 버튼으로 채팅 열기에 설명되어 있습니다.

링크 대신 페이지의 기존 요소를 트리거로 만들 수도 있습니다. data-rc-launcher-selector는 CSS 선택자를 받습니다.

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

위치와 간격

방향, 간격과 쌓임 순서는 스니펫에서 설정합니다. 계정에는 해당 필드가 없습니다.

data-rc-position – right(기본값) 또는 left입니다.
data-rc-offset – 가장자리까지의 거리를 픽셀 단위 JSON으로 지정합니다. 기본값은 {"x":20,"y":20}입니다. 위젯은 iPhone의 노치 같은 안전 영역을 추가합니다.
data-rc-z-index – 쌓임 순서이며 기본값은 2147483000입니다. 자체 요소가 채팅 위에 있어야 하면 낮춥니다.

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-position="left"
        data-rc-offset='{"x":24,"y":96}'
        async></script>

같은 필드는 window.ReactiveChatSettings 또는 ReactiveChat('boot', …)를 통해 position, offset, zIndex로도 사용할 수 있습니다. 기술 연동을 참조합니다.

막대 피하기

페이지 하단 가장자리에 쿠키 배너, 장바구니 막대, 휴대전화 내비게이션 막대 같은 고정 막대가 있으면 채팅 버튼이 자동으로 그 위로 이동하고 12 px 간격을 둡니다. 페이지가 변경되면 다시 측정합니다. 창 높이의 40%를 넘는 요소는 오버레이로 간주하며 피하지 않습니다.

스니펫에서 이 기능을 끌 수 있습니다.

data-rc-avoid-overlap="false"

자체 아이콘을 사용한 채팅 버튼

완전히 자체 제작한 아이콘은 코드의 브랜드 설정을 통해 적용합니다. launcher.icon은 인라인 SVG 또는 data: 주소를 받으며 선택한 아이콘보다 우선합니다.

ReactiveChat('setBrand', {
  launcher: { shape: 'bubble', label: 'Ask us', icon: 'data:image/svg+xml,…' }
});

주의: 스니펫의 브랜드 설정(data-rc-brand)에 이런 필드가 있으면 해당 페이지에서는 계정 설정보다 우선합니다. 색상, 글꼴과 테마를 참조합니다.

휴대전화

너비 481 px 미만에서는 휴대전화용 크기를 적용합니다. 휴대전화를 가로로 놓은 경우 높이 480 px까지도 적용됩니다. 큰 화면에서만 표시를 선택하면 이때 채팅 버튼에 아이콘만 나타납니다. 방문자가 채팅을 열면 창이 전체 화면을 채우고 채팅 버튼은 물러납니다.

채팅 버튼이 예상과 다르게 보이는 경우

채팅 버튼이 보이지 않는 경우: 표시가 자체 링크로만으로 설정되었나요? 스니펫에 data-rc-hide-launcher="true"가 있나요? 프로젝트가 일시 중지되었나요?
“자체 링크로만”을 설정했는데도 채팅 버튼이 나타나는 경우: 아직 서버 설정을 받지 못한 상태입니다(대체 처리). data-rc-hide-launcher="true"도 추가합니다.
아이콘이 없어도 말풍선이 나타나는 경우: 아이콘이 없으면 레이블과 항상 표시가 필요합니다.
변경이 반영되지 않는 경우: 스니펫의 data-rc-brand에 레이블, 아이콘이나 다른 추가 필드가 있나요? 그러면 스니펫이 우선합니다.

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