설정 가이드

위젯 설치

5분 안에 웹사이트에 Sonny 실시간 채팅 위젯을 추가하세요. 스크립트 태그 하나면 충분해요.

설치 단계

  1. 01

    설치 스니펫 복사

    채널을 열고 웹사이트에 연결된 채널을 고른 뒤 실시간 채팅을 선택하세요. 설치 스니펫 아래에서 복사를 선택하세요.

  2. 02

    스크립트 태그 추가

    복사한 스니펫을 웹사이트 HTML의 닫는 </body> 태그 바로 앞에 붙여 넣으세요. 복사한 코드에는 사이트 ID가 이미 들어 있어요. 아래 예시를 대신 쓴다면 YOUR_SITE_ID를 바꿔 주세요.

  3. 03

    Sonny에서 맞춤 설정

    같은 실시간 채팅 페이지에서 설정을 바꾼 뒤 변경 사항 저장을 선택하세요. 맞춤 설정 가이드에서 모든 옵션을 설명해요.

  4. 04

    설치 확인

    웹사이트를 방문하면 오른쪽 아래에 채팅 위젯이 나타나야 해요. 테스트 메시지를 보내 작동하는지 확인하세요.

기본 설치

웹사이트의 닫는 </body> 태그 바로 앞에 이 스크립트 태그를 추가하세요.

HTML
<script>
  (function(w,d,s,o,f,js,fjs){
    w['Sonny']=o;w[o]=w[o]||function(){
    (w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  })(window,document,'script','sonny','https://www.usesonny.com/widget.js');
  sonny('init', { siteId: 'YOUR_SITE_ID' });
</script>

자동 초기화 스니펫

위젯이 로드되기 전에 명령을 대기열에 넣을 필요가 없다면 스크립트 태그 하나만 써도 돼요.

HTML
<script
  src="https://www.usesonny.com/widget.js"
  data-site-id="YOUR_SITE_ID"
  async
></script>

방문자 식별과 사용자 지정 속성 보내기

사용자가 사이트에 로그인하면 이메일과 고객 지원 팀이 봐야 할 추가 데이터를 담아 sonny('identify')을 호출하세요. 추가 필드는 attributes 아래에 넘기세요. 새 키는 사용자 지정 필드로 자동 생성되어 대화 오른쪽에 표시돼요. 이후 호출은 이전 값을 덮어써요.

HTML
<script>
  // Identify the visitor and pass any custom attributes you want
  // surfaced in the agent sidebar. Unknown keys are auto-created
  // as Custom Fields in your workspace settings.
  sonny('identify', {
    email: 'jane@acme.com',
    name: 'Jane Doe',
    attributes: {
      plan: 'pro',
      mrr: 499,
      signedUpAt: '2025-08-01T00:00:00Z',
      website: 'https://acme.com'
    }
  });
</script>

지원되는 값 유형: 문자열, 숫자, 불리언, ISO-8601 날짜, URL. 속성을 지우려면 null을 넘기세요. 키는 문자로 시작하고, 문자·숫자·밑줄만 쓰며, 최대 64자여야 해요. email, name, id, phone, createdAt, updatedAt 키는 예약돼 있어요. 텍스트 값은 최대 1,000자예요. 제한: 호출당 속성 50개.

내 버튼으로 위젯 열기

떠 있는 말풍선 대신 내 버튼으로 채팅을 열고 싶나요? sonny('init')에 hideLauncher: true를 넘겨 기본 런처를 숨기고, 페이지의 원하는 요소에서 sonny('open')을 호출하세요.

HTML
<!-- 1. Boot Sonny with its built-in launcher hidden -->
<script>
  (function(w,d,s,o,f,js,fjs){
    w['Sonny']=o;w[o]=w[o]||function(){
    (w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  })(window,document,'script','sonny','https://www.usesonny.com/widget.js');
  sonny('init', { siteId: 'YOUR_SITE_ID', hideLauncher: true });
</script>

<!-- 2. Open the chat from your own button, anywhere on the page -->
<button onclick="sonny('open')">Chat with us</button>

다음 명령으로 페이지 어디서든 위젯을 제어할 수 있어요.

  • sonny('open') — 채팅 패널을 열어요.
  • sonny('close') — 채팅 패널을 닫아요.
  • sonny('toggle') — 열림과 닫힘을 전환해요. 토글 버튼 하나에 딱 맞아요.
  • sonny('show')와 sonny('hide') — 표시 규칙보다 우선해 위젯 전체를 표시하거나 숨겨요.
  • sonny('getUnreadCount', callback) — 현재 읽지 않은 개수를 언제든 읽어요.

스크립트 태그 하나로 설치하는 방식이 더 좋나요? 스크립트 태그에 data-hide-launcher를 추가해 런처를 숨기고, 내 버튼을 같은 명령에 연결하세요.

내 버튼에 읽지 않은 답장 표시하기

런처를 숨기면 읽지 않은 배지도 함께 숨겨지므로, 대신 Sonny가 페이지에 알려 줘요. 위젯은 window에서 detail.count와 함께 sonny:unread 이벤트를 보내요. 기본 런처가 보여 줄 숫자와 같아요. 내 모바일 내비게이션에 배지를 달 때 딱 좋아요.

HTML
<button id="chat-button" onclick="sonny('open')">
  Chat with us
  <span id="chat-unread" hidden></span>
</button>

<script>
  function showUnread(count) {
    var badge = document.getElementById('chat-unread');
    badge.textContent = count > 9 ? '9+' : count;
    badge.hidden = count === 0;
  }

  // Fires once after the widget loads, then on every change.
  window.addEventListener('sonny:unread', function (event) {
    showUnread(event.detail.count);
  });

  // Optional: read the count on demand (e.g. after your own nav re-renders).
  sonny('getUnreadCount', showUnread);
</script>

이 숫자는 방문자의 모든 대화에서 읽지 않은 상담원 답장을 세요. 위젯이 로드된 직후 한 번 발생하므로 페이지 로드 때 추가한 리스너는 항상 현재 상태를 받아요. 이후 값이 바뀔 때마다 다시 발생하며, 방문자가 채팅을 열어 0이 될 때도 발생해요.

맞춤 설정 옵션

Sonny에서 채널의 "실시간 채팅" 탭에서 위젯을 맞춤 설정하세요.

설정설명기본값
브랜드 색상위젯의 기본 색상(hex 코드)#2563eb
위치페이지에서 위젯의 위치bottom-right
인사 메시지방문자에게 보여 줄 인사 메시지안녕하세요! 무엇을 도와드릴까요?

다음 단계

위젯을 설치했으니 이메일 전달도 설정하세요.

이메일 전달 설정하기

관련 문서

Sonny가 어떻게 도움이 되는지 보기