채널톡 버튼 커스텀하기

바쁜 사람을 위한 요약:

// 채널톡 플러그인을 불러오는 코드
(function(){var w=window;if(w.ChannelIO){return w.console.error("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";var x=document.getElementsByTagName("script")[0];if(x.parentNode){x.parentNode.insertBefore(s,x);}}if(document.readyState==="complete"){l();}else{w.addEventListener("DOMContentLoaded",l);w.addEventListener("load",l);}})();

ChannelIO('boot', {
    "pluginKey": "플러그인_키를_넣어주세요",
    
    // 채널톡 버튼을 숨기는 코드 
    "hideChannelButtonOnBoot": true
});

// 버튼 클릭 이벤트로 메시지 창 컨트롤
// #channel_talk이라는 버튼을 만들어서 커스텀하시면 됩니다!
$(document).on("click", "#channel_talk", function () {
    if ($("#ch-plugin-script").hasClass("ch-messenger-hidden")) { // 메시지 창이 닫혀 있으면
        $("#ch-plugin-script").removeClass("ch-messenger-hidden");
        ChannelIO('showMessenger');
    } else{ // 메시지 창이 열려 있으면
        $("#ch-plugin-script").addClass("ch-messenger-hidden");
        ChannelIO('hideMessenger');
    }
});

플러그인 키 경로:
채널톡 > 좌측 하단 설정 > 일반 설정 > 버튼 설치 및 설정 > 채널톡 버튼 설치에서 Plugin Key 복사하기.

---

제 블로그 생활은 "혼자서 블로그를 만들어보자!" 해서 서버부터 프론트까지 모든 걸 혼자서 만드는 것을 목표로 시작하게 되었습니다.

헌데 초보 개발자가 모든 블로그의 기능을 수준 높게 구현하기는 한계가 있었습니다.
블로그 업로드, 삭제, 댓글, 관리자 페이지 등 기능을 전부 만들고 블로그 운영까지 몇 달 진행하였으나 블로그를 만들고 유지보수하느라 정작 블로그를 작성할 시간이 없다는 딜레마에 걸리게 되었습니다.

그러다 "그래 댓글이라도 채팅으로 받자." 싶어서 업무를 위해 알아본 채널톡을 블로그에 딱 두니, 아니 이게 너무 편한 것이었습니다.
그러다 결국에는 블로그 만드는 것도 너무 오래 걸리고 비효율적이어서 티스토리로 옮기게 되었지요.

이때 채널톡이라는 솔루션을 알게 되었고 지금도 업무에서 잘 사용하고 있습니다.
하지만 프로그램을 사용한 버튼 커스텀은 위치 조정, 내부 이미지 변경 정도의 한계가 있었기에 좀 더 이쁘게 만들고 싶어 커스텀 코드를 정리해 봤습니다.

채널톡은 공식 문서도 잘 정리되어 있으니 다양한 커스텀이 가능합니다.
업무에서 채널톡을 사용하시는 분들은 참고하셔도 좋을 것 같아 링크를 첨부해 드립니다.

Welcome to Channel