채널톡 Channel Talk

채널톡 고객상담 채팅 서비스

채널톡은 웹사이트에 실시간 고객상담 채팅 위젯을 제공하는 서비스입니다. Plugin Key를 입력하면 실제 채팅 위젯이 페이지 우측 하단에 나타납니다.

채널톡 개발자 문서 보기 →Channel Web SDK Loader →

API 키 설정

실시간 데모

API 키를 입력하면 실시간 데모를 확인할 수 있습니다.

설정 가이드

채널톡 회원가입

채널톡 웹사이트에서 무료 계정을 생성하세요.

플러그인 설정

설정 > 메신저 설정에서 플러그인을 활성화하세요.

Plugin Key 복사

설정 > 개발자 설정에서 Plugin Key를 복사하세요.

웹사이트에 적용

위의 코드를 웹사이트에 추가하세요.

옵션 1: NPM 모듈 사용 (권장)

패키지 관리자를 통해 안정적으로 설치하고 타입스크립트 지원을 받을 수 있습니다.

NPM 모듈 설치

bash

npm install @channel.io/channel-web-sdk-loader

NPM 모듈 React 사용법

tsx

'use client';

import { useEffect } from 'react';
import * as ChannelService from '@channel.io/channel-web-sdk-loader';

export default function App() {
  useEffect(() => {
    // 스크립트 로드
    ChannelService.loadScript();
    
    // 채널톡 부팅
    ChannelService.boot({
      pluginKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
    });

    // 컴포넌트 언마운트 시 정리
    return () => {
      if (window.ChannelIO) {
        window.ChannelIO('shutdown');
      }
    };
  }, []);

  return (
    <div>
      <h1>My App</h1>
      {/* 앱 컨텐츠 - 채널톡 위젯이 자동으로 우측 하단에 표시됩니다 */}
    </div>
  );
}

옵션 2: 직접 구현

TypeScript로 직접 채널톡 서비스를 구현하는 방식입니다. 더 자세한 내용은 Channel.io 개발자 문서를 참고하세요.

TypeScript 서비스 클래스 작성

tsx

// lib/services/channeltalk-spa.ts
'use client';

// TypeScript 타입 정의
interface BootOption {
  pluginKey: string;
  language?: string;
  memberId?: string;
  memberHash?: string;
  profile?: Profile;
  hideChannelButtonOnBoot?: boolean;
}

interface Profile {
  name?: string;
  email?: string;
  mobileNumber?: string;
  [key: string]: any;
}

interface Callback {
  (error: Error | null, user: any): void;
}

declare global {
  interface Window {
    ChannelIO?: {
      (command: 'boot', option: BootOption, callback?: Callback): void;
      (command: 'shutdown'): void;
      (command: 'show'): void;
      (command: 'hide'): void;
      (command: 'open'): void;
      (command: 'track', event: string, properties?: any): void;
      (command: 'setPage', page: string): void;
    };
    ChannelIOInitialized?: boolean;
  }
}

class ChannelService {
  loadScript() {
    if (typeof window === 'undefined') return;
    
    (function(){
      var w=window as any;
      if(w.ChannelIO) return;
      var ch = function(){ch.c(arguments);};
      ch.q = []; ch.c = function(args: any){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';
        var x = document.getElementsByTagName('script')[0];
        if(x.parentNode) x.parentNode.insertBefore(s, x);
      }
      
      if(document.readyState === 'complete') l();
      else {
        window.addEventListener('DOMContentLoaded', l);
        window.addEventListener('load', l);
      }
    })();
  }

  boot(option: BootOption, callback?: Callback) {
    window.ChannelIO?.('boot', option, callback);
  }

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

  show() {
    window.ChannelIO?.('show');
  }

  hide() {
    window.ChannelIO?.('hide');
  }

  open() {
    window.ChannelIO?.('open');
  }

  track(event: string, properties?: any) {
    window.ChannelIO?.('track', event, properties);
  }

  setPage(page: string) {
    window.ChannelIO?.('setPage', page);
  }
}

export default new ChannelService();

React SPA 컴포넌트 사용법

tsx

'use client';

import { useEffect } from 'react';
import channelService from '@/lib/services/channeltalk-spa';

export default function App() {
  useEffect(() => {
    // 스크립트 로드 및 채널톡 부팅
    channelService.loadScript();
    channelService.boot({
      pluginKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
    });

    // 컴포넌트 언마운트 시 정리
    return () => {
      channelService.shutdown();
    };
  }, []);

  return (
    <div>
      <h1>My App</h1>
      {/* 앱 컨텐츠 - 채널톡 위젯이 자동으로 우측 하단에 표시됩니다 */}
    </div>
  );
}

중요 안내

위의 두 옵션 중 하나만 선택해서 사용하세요. 두 방식을 동시에 사용하면 스크립트가 중복 로드될 수 있습니다.