채널톡의 매거진

노션에 채팅 상담창 설치하기

채널톡

2020.12.15 07:18
  • 3554
  • 콘텐츠에 ‘좋아’해줘서 고마워요 -
    2
  • 0

요즘 한국에서 핫하게 떠오른 문서 서비스 노션 Notion!

채널톡 팀에서도 얼마전 노션으로 고객 가이드 페이지를 만들었어요.

 


 

 

위 사진을 보시면 다른 노션 페이지들과 다른 점 한가지가 보이실거예요. 우측 하단에 채팅상담창이 있죠!. 원래 노션페이지에는 코드 삽입이 안돼서, 채팅창을 설치할 수 없는 것으로 알고 계셨을텐데요 Super를 이용하면 노션에도 이렇게 채팅 버튼을 띄울 수 있답니다.

 

 

Super가 뭐죠?

 

super는 Notion 확장 툴이라고 생각하시면 좋아요. 노션에서 제공하지 않는 기능을 구현할 수 있도록 도와주죠. 유료이긴 하지만 월 8달러 정도로 기업에서 사용하기엔 무리없어요! super를 이용해 할 수 있는 것에는 다음과 같은 것들이 있습니다.

 

1. 자사 도메인 설정 : 원래 노션으로 페이지를 만들면 노션 도메인(notion.so)이 자동으로 생성되는데요, 수퍼를 이용하면 노션 도메인 대신 자사 도메인을 사용할 수 있습니다.

 

2.스크립트를 추가 할 수 있어요 : 강력한 장점이죠. 수퍼를 이용하면 스크립트를 추가 할 수 있습니다! 이 말은 곧 구글애널리틱스Google Analytics나 채널톡과 같은 웹 채팅 서비스도 설치할 수 있다는 의미죠!

 

3. meta태그 추가 : SEO에 중요한 meta태그를 변경 할 수 있습니다. meta title, meta description, OGP 등을 추가할 수 있습니다.

 

채널톡 팀이 만세를 외쳤던 부분은 2번 스크립트 추가 부분이었어요. ( 스크립트를 추가 할 수 있다 = 우리도 노션에 채팅상담 창을 달 수 있다)

 

 

이제 노션에 채널톡을 달아봅시다

 

자, 그럼 간단하게 수퍼Super와 채널톡을 이용해 노션페이지에 채팅상담창을 다는 법에 대해 설명 드릴게요!

 

 

1. 먼저 노션Notion 페이지를 준비해주세요

 

여기서 주의해야할 점 한 가지! 페이지를 공개로 설정하는 것을 잊지마세요.


 

2. 수퍼super에 들어가 회원가입을 해주세요

 

3. 수퍼 가입시 제출한 메일 주소로 도착한 링크를 클릭해 로그인 해주세요

 


 

4. 수퍼에서 노션 사이트 설정을 해주세요

 

- Site Name :도움말 사이트의 제목입니다! 메타meta 제목을 설정해주세요 (예 : ChannelTalk Guide)

- Custom Domain : 도메인을 설정하는 곳입니다. 채널톡에서는 channel.io의 하위도메인인 guide-kr.channel.io란 이름으로 도메인을 설정했어요. 

- Public Notion URL : 채팅창을 설치할 노션 페이지의 URL을 복사하여 여기에 입력하세요노션 페이지 연결하기 

 


 

 

5. 도메인 등록하기 / DNS 설정

 

여기서부터는 개발자의 도움이 필요합니다! Continue 버튼을 누르면 아래와 같은 그림이 뜰텐데요, 이 화면을 개발자에게 보여드리고 자사 도메인과 노션 도움말 페이지를 연결해주세요.

 


 

 

6. 이제 거의 다 왔어요

 

- 글꼴 설정 : Custom fonts란에서 원하시는 폰트로 변경 할 수 있습니다. (한글 폰트는 따로 없어서 그냥 두었어요 )

- 사이트 OG 이미지 설정 (=썸네일 설정) : Site Image 란에 OG이미지를 업로드해주세요.

- 사이트 설명 : Site Description 필드에 사이트의 설명을 입력해주세요. (메타 디스크립션meta description)

- 채팅버튼 (=채널톡 버튼) 설치하기 : 여기에 채널톡 스크립트를 넣어주시면 노션에 채팅창이 생깁니다! 참고로 채팅버튼 뿐만 아니라 구글 애널리틱스 스크립트도 마찬가지로 설치할 수 있어요 :)

 


 

 

Q.채널톡 스크립트는 어디서 확인하나요?

-채널톡 관리자 화면에 접속해 설정 > 채팅 설치 및 설정 > 채팅 버튼 설치 > Web에 설치하기 부분에 있는 스크립트를 복사해 붙여넣기 해주세요.

-아직 채널톡 가입 전이시라면, 채널톡 홈페이지에서 무료체험 버튼을 눌러 가입을 완료해주세요. (참고로 일 방문자수가 100명 이하라면 무료체험이 끝나도 쭉 - 무료로 사용하실 수 있어요!)채널톡 설치 코드 확인하기


Q. 구글 애널리틱스 GA 코드는 어디서 확인하나요?

GA 개발자 페이지를 참고해 주세요!

 

7. 진짜진짜 마지막! 결과확인

 

저장(Save) 버튼을 누르고 저장을 완료하면 채팅 상담창과 구글애널리틱스 설치가 끝납니다. 반영까지 10분~30분 정도 걸리니 조금 기다렸다가 확인해보세요.

  • #노션
  • #채널톡
  • #Super