카카오톡 채널 버튼 추가하기 (코드, 고급)

1. 카카오톡 채널의 홈 ID를 확인하고 메모합니다.
2. 카카오톡 채널 관리자센터에 접속합니다.
3. 내 채널 이름을 클릭합니다. (카카오톡 채널이 없다면 새 채널 만들기 버튼을 클릭해 채널을 만들어 주세요.)
4. 왼쪽 메뉴 열에서 [프로필 > 프로필 설정] 메뉴를 클릭해 이동합니다.

5. 채널 URL을 확인하고, 메모장에 메모해 둡니다.

   

아래의 카카오톡 채널 커스텀 채팅 버튼 코드 전체를 마우스로 드래그하여 복사합니다. (키보드 단축키: CTRL + C)

<style>
/* PC 카카오톡 채널 버튼 위치 */
.kakaoChatPc {
    position: fixed;
    z-index: 999;
    right: 20px; /* 화면 오른쪽으로부터의 거리, 숫자만 입력 */
    bottom: 20px; /* 화면 아래쪽으로부터의 거리, 숫자만 입력 */
}
/* 모바일 카카오톡 채널 버튼 위치 */
.kakaoChatMob {
    position: fixed;
    z-index: 999;
    right: 20px; /* 화면 오른쪽으로부터의 거리, 숫자만 입력 */
    bottom: 20px; /* 화면 아래쪽으로부터의 거리, 숫자만 입력 */
}
</style>

<!-- PC 카카오톡 상담 버튼 -->
<a href="javascript:void kakaoChatStart()" class="kakaoChatPc hidden-md hidden-sm hidden-xs">
    <img src="이미지주소" width="72px" height="72px">
</a>

<!-- 모바일 카카오톡 상담 버튼 -->
<a href="javascript:void kakaoChatStart()" class="kakaoChatMob hidden-lg">
    <img src="이미지주소" width="64px" height="64px">
</a>

<!-- 카카오톡 채널 스크립트 -->
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type='text/javascript'>
    Kakao.init('JavaScript키'); // 사용할 앱의 JavaScript키를 입력해 주세요.
    function kakaoChatStart() {
        Kakao.Channel.chat({
            channelPublicId: '홈ID' // 카카오톡 채널 홈 URL에 명시된 ID를 입력합니다.(1단계에서 복사한 값)
        });
    }
</script>

1. 새 브라우저 탭을 열고, 내 아임웹 사이트 관리자 페이지에 접속합니다. 접속방법
2. 왼쪽 메뉴에서 [환경설정 > SEO(검색엔진최적화)]를 클릭해 이동합니다.

3. 마우스 휠 스크롤을 움직여 Footer Code 항목으로 이동 후, 코드 입력 칸에 위 2단계에서 복사한 코드를 붙여넣습니다. (키보드 단축키: CTRL + V)

   

4. 저장 버튼을 클릭해 작업사항을 저장합니다.

1. 붙여넣은 코드에서 Javascript키 텍스트를 삭제합니다.

   

2. 위 1단계에서 발급받은 Javascript키를 붙여넣습니다.
   1. Javascript키는 [카카오디벨로퍼스 접속 > 상단 '앱' 클릭 > 앱 > 일반 > JavaScript 키]를 복사해서 사용해 주세요.
      

3. 코드에서 홈ID 텍스트를 삭제합니다.

   

4. 위 1단계, 카카오톡 채널 관리센터에서 확인한 홈ID 를 붙여넣습니다.
5. 저장 버튼을 클릭해 작업사항을 저장합니다.

1. 코드에서 이미지주소 텍스트를 삭제합니다.

2. 카카오톡 채널 채팅 버튼으로 사용할 이미지 주소(http 또는 https로 시작하는)를 입력합니다. (PC용과 모바일용 버튼 이미지를 함께 쓰거나, 따로따로 사용할 수도 있습니다.)

   참고: 채팅 버튼으로 사용할 이미지를 내 사이트에 저장하고 활용하는 방법은 빠른 이미지 주소 획득 방법 도움말에서 알아볼 수 있습니다.

   

3. (선택 사항) width 와 height 속성의 숫자를 변경해, 버튼 이미지의 크기를 수정할 수 있습니다. (숫자만 변경하세요.)
4. 저장 버튼을 클릭해 작업사항을 저장합니다.

1. 주석을 참고해 PC와 모바일 카카오톡 채널 버튼 이미지의 위치를 각각 수정합니다.

   

2. 저장 버튼을 클릭해 작업사항을 저장합니다.

1. 관리자 페이지 왼쪽 상단의 미리보기 아이콘을 클릭합니다.

2. 상담하기 버튼을 클릭해 작동여부를 확인합니다.

   참고: 스마트폰으로 내 사이트에 접속해 작동여부를 확인할 수도 있습니다.