English한국어
한국어

커스터마이징

채널 버튼 커스터마이징

JavaScript SDK가 생성하는 기본 채널 버튼을 사용하는 대신, 직접 만든 HTML 요소를 채널 버튼으로 사용할 수 있습니다.

  1. 채널 버튼으로 사용할 HTML 요소를 직접 생성합니다.
<!-- 예시 1 -->
<button class="custom-button-1">채팅하기</button>

<!-- 예시 2 -->
<button id="custom-button-2">채팅하기</button>
  1. 생성한 HTML 요소에 접근할 수 있는 CSS 선택자를 customLauncherSelector에 전달합니다.

📘

쉼표(,)를 사용해 여러 개의 선택자를 전달할 수도 있습니다.

더 자세한 정보는 CSS 선택자를 참고합니다.

  1. 부트 옵션의 hideChannelButtonOnBoot를 true로 설정하여 기본 채널 버튼을 숨깁니다.

아래 예시 코드를 참고합니다.

ChannelIO('boot', {
  "pluginKey": "YOUR_PLUGIN_KEY",
  "customLauncherSelector": ".custom-button-1, #custom-button-2",
  "hideChannelButtonOnBoot": true
});

채널 버튼을 직접 구현한 경우, SDK에서 제공하는 기본 채널 버튼과는 다르게 ‘안읽은 메시지 알림’이 뜨지 않습니다. 이를 구현하기 위해서는 알림이 표시될 HTML 요소를 직접 생성한 후, onBadgeChanged 메서드를 사용해 안읽은 메시지의 수를 유저에게 보여줄 수 있습니다.