SookDev

Channelio?

돈써서 데려온 고객, 상담으로 구매까지 - 채널톡

https://channel.io/ko/user-chat

먼저, 채널톡은 고객과 실시간 채팅상담을 진행할 수 있는 서비스를 제공하는 회사의 서비스 중 하나이다.

엔코에서도 CS(Customer Service)를 위해서 사용하고 있다.

채널톡 도입 과정 소개

채널톡 도입 과정은 나름 쉽다.

SPA에서는 어떻게 implement하면되는지도 나와있기 때문이다.

항상 그렇듯이 우리는 늘 "개발자 문서"를 확인한다.

Welcome to Channel

Welcome to the Channel Developer page. Everything you need to know about Channel is here.In this section you will find: Getting authorized for Open API and SDK useInstallation guides for each platform (Web, iOS, Android, React-Native)Full SDKs and Open API references and detailed explanation. If you...

https://developers.channel.io/docs

페이지의 최상단부터 어떻게 SDK를 도입하는지에 대한 여러가지 설명들이 있다.

요약을 하자면 html 코드에, Static Page 라고 하는 부분 밑에 있는 script가 들어가면 된다는 것이다.

Next.js에서는 어떻게 도입하는가?

React 였다면 문제는 굉장히 쉽다. index.html에 저 스크립트를 복사해서 붙여넣으면 된다.

(물론, key값 같은 정보들은 밖으로 .env로 빼줘야겠다.)

Next.js에는 index.html이 없다. 그리고 SSR, SSG등 고려해줘야하는 항목들이 꽤 있다.

그리고 Channelio는 클라이언트 사이드에서만 작동하도록 되어 있다.

코드를 보면 알겠지만, window같은 객체들을 참조하고 있기 때문에 서버쪽에서 이 부분이 호출이 된다면 에러를 발생시킬 것이다.

따라서, SSR, SSG를 피해줘야한다. 하지만, 이미 SSR, SSG를 쓰고 있다면 어떻게 해야할까?

그럴때는 Next.js에서 제공하는 Script태그를 이용하면 된다. 다음은 Script 태그에 대한 Next.js의 글이다.

next/script | Next.js

Note: This is API documentation for the Script Component. For a feature overview and usage information for scripts in Next.js, please see Script Optimization. A path string specifying the URL of an external script. This can be either an absolute external URL or an internal path. The loading strategy of the script.

https://nextjs.org/docs/api-reference/next/script

Script tag

이 script 태그는 html에서 기본적으로 제공하는 script와 같다고 할 수 있다.

src 등 넣는 옵션들이 비슷하고 strategy 같은 옵션을 줘서 defer, module 같은 html 프로퍼티를 주던 것과 비슷하게 사용할 수 있다.

beforeInteractive

afterInteractive

lazyOnload

이 세 옵션들을 읽어보면 각각의 용도에 맞는 사용법을 문서에서는 알려주고 있다.

lazyOnload의 경우 가장 마지막에 로딩 되는 녀석이다.

다른 자원들이 로딩 되고 난 후에 로딩 되기 때문에 client 사이드에서 작동해야하는 채널톡 로딩에 제격이다.

따라서 우리는 다음과 같이 코드를 짜주기로 한다.


import React from "react";
import Script from "next/script";

const ChannelIO = () => {
	return (
		<Script
			strategy="lazyOnload"
			dangerouslySetInnerHTML={{
				__html: `(function () {
    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);
    }
  })();
  
  ChannelIO("boot", {
    "pluginKey": "${process.env.NEXT_PUBLIC_CHANNEL_KEY}", //please fill with your plugin key
  });`,
			}}
		/>
	);
};

export default ChannelIO;

Script 태그 안에 innerHTML 프로퍼티를 활용해서 JS코드를 삽입해주고 채널톡 KEY는 env에서 불러오도록 한다.

그리고 이렇게 Channelio 컴포넌트로 만들어준 다음 _app.tsx에서 불러와준다. 그렇다면 이제 채널톡은 모든 페이지에서 보이게 될 것이고 고객은 원할때 언제든지 우리 서비스팀에 연락을 할 수 있다.

Channel IO with Next.js

Channelio?

채널톡 도입 과정 소개

Next.js에서는 어떻게 도입하는가?

Script tag