아무도 안써줘서 내가 쓰는 채널톡 리액트에서 쉽게 커스텀하기

물론 이게 맞는 법인지는 모르겠지만 야매로...

 

developers.channel.io/docs/web-installation

Installation

여기에서 채널톡을 삽입할 수 있는 스크립트를 준비해 주었다..!

 

1. 리액트는 single-page-application이기 때문에 해당 class 스크립트를 ChannelService.js로 저장해준다

2. 페이지를 구성하는 파일에서 저 ChannelService.js 파일을 "ChannelService"이름으로 import 해준다

 

여기에서 function component를 사용한다면 useEffect, class 컴포넌트를 사용한다면 componentDidMount를 사용해서 채널톡을 삽입해준다.

 

기본적인 구조로는

ChannelService.boot({

  "pluginKey":  "본인의 플러그인 키"

});

이다. 저 플러그인 키는 설정>채팅 설치 및 설정>채널톡 버튼 설치에서 확인 가능하다

 

 그 후에 기본으로 지원하는 버튼이 아닌 본인이 원하는 버튼을 사용하고 싶을 경우,

      "customLauncherSelector": ".nav-channeltalk-button",
      "hideChannelButtonOnBoot": true

를 저 ChannelService.boot({}) 안에 추가해주면 된다.

 

첫번째 줄은 자신이 지정한 버튼의 클래스나 아이디를 추가해준다.

나는 class="nav-channeltalk-button"에 지정해줄거기 때문에 저렇게 넣어주었고

아이디로 지정할 경우 "customLauncherSelector": "#nav-channeltalk-button"로 해줄 수 있다.

 

두번째 줄은 기존의 채널톡 버튼을 가려주는 버튼이다. 저게 없을 경우에는 기존의 버튼과 내가 원하는 버튼이 둘다 보이는 경우가...

 

이렇게 해서 

ChannelService.boot({

  "pluginKey":  "본인의 플러그인 키",
  "customLauncherSelector": ".nav-channeltalk-button",
  "hideChannelButtonOnBoot": true

});

이렇게 된다..!

 

 

 

채널톡(특히 리액트)의 정보가 많이 없어 이렇게 끄적끄적 작성을 해 보았다...

오롯이 나를 위한 설명이기도 하기 때문에 부디 미래의 내가 잘 이해해주길...