[React] 채널톡 이해하고 활용하기 -1: 연결 및 채팅 기능 확인, @channel.io/channel-web-sdk-loader

해당 글에서는 채널톡을 연결하고 채팅 기능을 활용하는 방법에 대해서 작성한 글입니다

1) 채널톡

---

💡 채널톡

- 올인원 AI 비즈니스 메신저로, 채팅 상담과 팀 메신저, 마케팅 메시지, 인터넷 전화(미트), 시나리오형 챗봇(서포트봇), AI 에이전트(ALF) 등의 기능을 제공합니다.
- 주로 고객과 채팅 상담을 이용하고 관리하기 위한 용도로 이용을 합니다.

고객상담의 미래는 AI 입니다 - 채널톡

 

2) 채널톡 연결 -1 : 키 조회

---

1. 공식사이트에 접근 및 채널 목록으로 가기 버튼을 누릅니다

---

 

2. 아래와 같이 출력이 됩니다

---

 
 

3. 일반 설정 > 버튼 설치 및 설정 > 채널톡 버튼 설치를 누릅니다.

---

 
 

4. Plugin Key를 확인합니다.

---

 
 

💡 참고 사이트

채널톡 버튼 설정

 
 

3) 채널톡 연결 -2 : 라이브러리 설치

---

1. @channel.io/channel-web-sdk-loader

---

💡 @channel.io/channel-web-sdk-loader

# npm 설치
$ npm i @channel.io/channel-web-sdk-loader

# or

# yarn 설치
$ yarn add @channel.io/channel-web-sdk-loader

 
 
 

2. 채널톡 로드

---

💡 채널톡 로드

- 아래와 같이 확인된 플러그인 키를 추가하고, 불러오고 성공여부를 반환받습니다.

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

export const App = () => {
	// 채널톡 플러그인 키를 불러옵니다
	const CHANNEL_TALK_PLUG_IN_KEY = import.meta.env.VITE_CHANNEL_TALK_PLUG_IN

	useEffect(() => {
		ChannelService.loadScript();
		ChannelService.boot(
			{ pluginKey: CHANNEL_TALK_PLUG_IN_KEY },
			function onBoot(error: any, user: any) {
				if (error) {
					console.error('채널톡 boot 실패:', error);
				} else {
					console.log('채널톡 boot 성공:', user);
				}
			}
		);
	}, []);
	return (
		<>
		</>
	)

 
 

3. 결과 확인 -1 : 문의하기

---

💡 결과 확인 -1 : 문의하기

- 별도의 위치를 지정하지 않더라도 아래와 같이 가장 오른쪽 하단에 모든 페이지에 들어가 있음을 확인하였습니다.

 
 

3.1. 화면상에 출력

---

 

3.2. 대화 확인

---

💡 대화 확인

- 아래와 같이 대화창이 출력이 됩니다.

 

 

3.3. 아래와 같이 문의를 합니다.

---

 

3.4. 채널톡 내에서 확인

---

💡 채널톡 내에서 확인

- 채널톡 내에 메시지가 전달됨을 확인하였습니다.

 
 

4. 결과 확인 -2 : 답변 및 답변 확인

---

4.1. 나에게 배정을 하고 답변을 했습니다

---

 

4.2. 아래와 같이 사용자에 답변이 전달됨을 확인하였습니다

---

 
 

4) 채널톡 심화 활용하기

---

 

1. 특정 페이지에서만 출력

---

💡 특정 페이지에서만 출력

- 현재 구조에서는 모든 페이지에서 채널톡 아이콘이 보이고 있습니다. 그렇기에 특정 페이지에서 안 보이도록 하는 함수를 이용합니다.
- 단, 해당 함수는 전역으로 관리되기에, hideChannelButton()를 호출 한 뒤, showChannelButton()를 호출하지 않으면 채널톡 아이콘은 보이지 않습니다.

// 특정 페이지에서 숨기기
ChannelService.hideChannelButton();

// 다시 보이기
ChannelService.showChannelButton();

 

💡 채널톡 사이트 내에서 일반 설정 > 버튼 설치 및 설정 > 고급 설정 내에서 ‘화이트 리스트’로 특정 도메인에서만 채널톡 버튼이 보이도록 할 수 있습니다.

 

2. 채널톡 아이콘 모양이나 위치를 변경

---

💡 채널톡 아이콘 모양이나 위치를 변경

- 상단으로 이동 아이콘과 같이 겹칠 수 있기에, 채널톡 위치를 변경합니다
- 채널톡 접속 > 채널 설정 > 일반 설정 > 버튼 설치 및 설정을 들어가면 아래와 같이 아이콘 모양이나 위치를 변경할 수 있습니다

 

💡 아래와 같이 위치를 변경이 되었습니다.

 

3. 버튼과 채널톡 채팅 연결

---

💡 버튼과 채널톡 채팅 연결

- 나만의 버튼을 눌렀을 때 채널톡이 열리도록 하는 방식입니다.
- 아래의 코드와 같이 ChannelService.showMessenger(); 를 이용하여서 연결을 합니다.

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

export default function Page() {
	const handleOpenChat = () => {
		ChannelService.showMessenger();
	};
	return (
	<button onClick={handleOpenChat}>솔루션 도입 문의</button>
	)
}

 
 
 
오늘도 감사합니다. 😀