Next js에 채널톡 (ChannelTalk) 달기 (Custom Hook)

 

오늘은 Next.js에 채널톡 달기에 대해서 포스트 해보도록 하겠습니다. 채널톡 설치는 생각보다 간단합니다. 

 

https://developers.channel.io/docs/web-installation

Installation

여기 채널톡 개발자문서에 가서도 자세하게 확인할 수 있습니다. Static Page, Single Page Application 나눠서 가이드가 설명되어 있는데 각자 자기에 맞는 방식으로 설정해주면 될 것 같습니다. Static Page는 즉시실행함수 형식으로, SPA는 클래스로 관리해 DOM이 생성됐을 때 스크립트를 추가하는 방식입니다.

 

저는 Next.js에 달아야 하기 때문에 SPA 문서를 이용해서 채널톡을 달았습니다.

// ChannelService.js

class ChannelService {
  constructor() {
    this.loadScript();
  }

  loadScript() {
    var w = window;
    if (w.ChannelIO) {
      return (window.console.error || window.console.log || function(){})('ChannelIO script included twice.');
    }
    var ch = function() {
      ch.c(arguments);
    };
    ch.q = [];
    ch.c = function(args) {
      ch.q.push(args);
    };
    w.ChannelIO = ch;
    function l() {
      if (w.ChannelIOInitialized) {
        return;
      }
      w.ChannelIOInitialized = true;
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src = 'https://cdn.channel.io/plugin/ch-plugin-web.js';
      s.charset = 'UTF-8';
      var x = document.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
    }
    if (document.readyState === 'complete') {
      l();
    } else if (window.attachEvent) {
      window.attachEvent('onload', l);
    } else {
      window.addEventListener('DOMContentLoaded', l, false);
      window.addEventListener('load', l, false);
    }
  }

  boot(settings) {
    window.ChannelIO('boot', settings);
  }

  shutdown() {
    window.ChannelIO('shutdown');
  }
}

export default new ChannelService();

이렇게 ChannelService라는 파일에 그대로 붙여넣어주고 저는 CustomHook을 이용해서 채널톡을 달았습니다.

// useChannelTalk.ts

const useChannelTalk = () => {
  const router = useRouter();
  useEffect(() => {
    ChannelService.boot({
      pluginKey: process.env.NEXT_PUBLIC_CHANNEL_TALK_KEY,
      // 더 많은 옵션들이 있고, 각자 고유의 키를 사용하면 됩니다.
    });
  }, [router]);
};

export default useChannelTalk;

저희는 특정 페이지에만 채널톡을 뜨게 하고 싶었기 때문에 router로 의존성을 주었습니다.

특정 페이지에만 채널톡을 뜨게 하려면 채널톡 관리자 페이지 환경설정에 가서 path 설정을 할 수 있는 부분이 있습니다!!

// app.tsx

const App = (props: AppProps) => {
  const { Component, pageProps } = props;
  
  useChannelTalk();
  
  return (
    ...
  )
}

이렇게 작업을 해주면 app.tsx를 탈 때 채널톡을 렌더링 하게 됩니다. 이렇게 채널톡을 원하는 페이지에 달 수 있게 되었습니다.