Home
home
버블박스
home

카카오톡 공유하기 Share KakaoTalk

중요 공지

“버블박스”가 “노코더스”라는 이름으로 변경됐어요

현재 사이트는 더 이상 운영하지 않으니 노코더스 사이트로 이동해주세요

한 줄 요약
카카오톡 친구에게 메시지를 공유할 수 있게 도와주는 플러그인입니다
컨택 및 제안
bubbleboxerofficial@gmail.com
노코드 마스터로 거듭나기

기본 정보

1. Reference

플러그인 페이지
데모 링크
에디터 링크

2. ChangeLog

1.0.0
사용자 정의 템플릿 공유 기능 구현
기본 스크랩 공유 기능 구현
기본 텍스트 공유 기능 구현

3. Actons

a. 텍스트 공유하기

카카오톡 친구에게 특정 텍스트를 공유할 수 있습니다. 해당 공유 메시지는 텍스트와 버튼 1개로 조합됩니다.
플러그인 실사용 시, 해당 문서의 [튜토리얼]을 참고해 환경 세팅을 완료해야 합니다.
Input
필드
타입
설명
text
String
공유할 텍스트입니다. 전송할 내용을 최대 200자까지 적어주세요
mobileWebUrl
String
모바일 카톡에서 버튼 클릭 시, 이동되는 링크입니다. https://를 모두 입력해주세요. (ex) https://bubble.kr
WebUrl
String
PC 카톡에서 버튼 클릭 시, 이동되는 링크입니다. https://를 모두 입력해주세요. (ex) https://bubble.kr
return_success

b. 스크랩 공유하기

카카오톡 친구에게 특정 URL을 공유할 수 있습니다. 해당 URL의 메타 태그에 맞춰서 자동으로 값이 입력됩니다.
플러그인 실사용 시, 해당 문서의 [튜토리얼]을 참고해 환경 세팅을 완료해야 합니다.
Input
필드
타입
설명
requestUrl
String
공유할 링크를 https:// 형식으로 입력해주세요. (ex) https://bubble.kr 해당 링크의 메타 태그를 기반으로 메시지가 자동 구성됩니다. 이때, 링크는 카카오 개발자에서 등록한 도메인에 한정됩니다.
return_success

c. 템플릿 공유하기

카카오 개발자 계정에서 등록한 템플릿을 활용해 카카오 메시지를 공유할 수 있습니다. 변수를 활용해 내용을 변경할 수 있기에 앞선 텍스트, 스크랩 공유하기보다 맞춤형 메시지를 구성할 수 있습니다
플러그인 실사용 시, 해당 문서의 [튜토리얼]을 참고해 환경 세팅을 완료해야 합니다.
Input
필드
타입
설명
templateId
Number
등록한 템플릿 Id를 입력해주세요. 이때, 데이터 타입은 “문자”가 아닌, "숫자"가 되야 합니다.
templateArgs
Object
템플릿에 사용하는 변수들을 입력해주세요. 변수명은 별도 형식 없이 그대로 입력하시면 됩니다. (ex. name : FameLee, url : https://bubblebox.kr )
return_success

튜토리얼

카카오톡 메시지 공유하기를 위해서 카카오 개발자가 필요합니다.

1. 텍스트 공유하기

a. 환경 설정

텍스트를 공유하기 위해 아래 부분을 준비해야 합니다.
카카오 개발자 계정
애플리케이션 등록
Javsscript 키 준비
웹 등록하기
카카오 개발자 생성
아래 링크에서 카카오 개발자 계정을 생성합니다.
애플리케이션 등록
가입 후, 애플리케이션을 추가합니다.
Javsscript 키 준비
애플리케이션을 생성하고, 대시보드로 이동합니다. [앱 설정] 영역의 [앱 키]로 이동합니다. 여기서 현재 어플리케이션의 Javascript 키를 확인합니다. 해당 키는 플러그인의 설정에 사용됩니다.
웹 등록하기
이후, [앱 설정] 영역의 [플랫폼]으로 이동합니다. 여기서 Web을 추가하고, 내 사이트의 도메인을 등록합니다. 도메인 등록 시, 마지막에 “/”를 입력하지 말아주세요

b. 플러그인에 Javascript 키 설정하기

버블 GNB의 [Plugins] 탭에서 플러그인을 클릭합니다. 그리고, javascriptKey 필드에 현재 어플리케이션에 등록된 javascriptKey 값을 붙여넣기 합니다

c. Frontend에서 텍스트 공유하기

[Workflow] 탭에서 워크플로우를 생성하고, Action Event로 플러그인의 [텍스트 공유하기] 액션을 추가합니다. 각 필드 입력란에 관련 값을 입력합니다.
필드
타입
설명
text
String
공유할 텍스트입니다. 전송할 내용을 최대 200자까지 적어주세요
mobileWebUrl
String
모바일 카톡에서 버튼 클릭 시, 이동되는 링크입니다. https://를 모두 입력해야 하며, 카카오 개발자에서 등록된 도메인이어야 합니다. (ex) https://bubble.kr
WebUrl
String
PC 카톡에서 버튼 클릭 시, 이동되는 링크입니다. https://를 모두 입력해야 하며, 카카오 개발자에서 등록된 도메인이어야 합니다. (ex) https://bubble.kr
그러면 해당 액션이 일어날 때마다, 카카오톡으로 리다이렉션되고 현재 내 친구 목록에서 공유 대상을 선택할 수 있습니다. 대상을 선택하면, 아래처럼 공유가 됩니다.
텍스트 부분 → text 필드 값
모바일에서 버튼 연결 링크 → mobileWebUrl 필드 값
PC에서 버튼 연결 링크 → WebUrl 필드 값
하단 로고 → 카카오 개발자에서 생성한 애플리케이션 로고
하단 이름 → 카카오 개발자에서 생성한 애플리케이션 이름

2. 스크랩 공유하기

a. 환경 설정

스크랩 공유를 위해 아래 부분을 준비해야 합니다.
카카오 개발자 계정
애플리케이션 등록
Javsscript 키 준비
웹 등록하기
카카오 개발자 생성
아래 링크에서 카카오 개발자 계정을 생성합니다.
애플리케이션 등록
가입 후, 애플리케이션을 추가합니다.
Javsscript 키 준비
애플리케이션을 생성하고, 대시보드로 이동합니다. [앱 설정] 영역의 [앱 키]로 이동합니다. 여기서 현재 어플리케이션의 Javascript 키를 확인합니다. 해당 키는 플러그인의 설정에 사용됩니다.
웹 등록하기
이후, [앱 설정] 영역의 [플랫폼]으로 이동합니다. 여기서 Web을 추가하고, 내 사이트의 도메인을 등록합니다. 도메인 등록 시, 마지막에 “/”를 입력하지 말아주세요

b. 플러그인에 Javascript 키 설정하기

버블 GNB의 [Plugins] 탭에서 플러그인을 클릭합니다. 그리고, javascriptKey 필드에 현재 어플리케이션에 등록된 javascriptKey 값을 붙여넣기 합니다

c. Frontend에서 스크랩 공유하기

[Workflow] 탭에서 워크플로우를 생성하고, Action Event로 플러그인의 [스크랩 공유하기] 액션을 추가합니다. 각 필드 입력란에 관련 값을 입력합니다.
필드
타입
설명
requestUrl
String
공유할 링크를 https:// 형식으로 입력해주세요. 해당 링크의 메타 태그를 기반으로 메시지가 자동 구성됩니다. (ex) https://bubble.kr 이때, 해당 링크는 카카오 개발자에서 등록된 도메인이어야 합니다.
그러면 해당 액션이 일어날 때마다, 카카오톡으로 리다이렉션되고 현재 내 친구 목록에서 공유 대상을 선택할 수 있습니다. 관련 정보는 request URL에 입력한 링크의 메타 태그에 기반합니다
제목 부분 → title tag
설명 부분 → description tag
버튼 연결 링크 → requestUrl 필드 값
하단 로고 → 카카오 개발자에서 생성한 애플리케이션 로고
하단 이름 → 카카오 개발자에서 생성한 애플리케이션 이름

3. 템플릿 공유하기

a. 환경 설정

템플릿 공유를 위해 아래 부분을 준비해야 합니다.
카카오 개발자 계정
애플리케이션 등록
Javsscript 키 준비
웹 등록하기
템플릿 ID 값 준비
카카오 개발자 생성
아래 링크에서 카카오 개발자 계정을 생성합니다.
애플리케이션 등록
가입 후, 애플리케이션을 추가합니다.
Javsscript 키 준비
애플리케이션을 생성하고, 대시보드로 이동합니다. [앱 설정] 영역의 [앱 키]로 이동합니다. 여기서 현재 어플리케이션의 Javascript 키를 확인합니다. 해당 키는 플러그인의 설정에 사용됩니다.
웹 등록하기
이후, [앱 설정] 영역의 [플랫폼]으로 이동합니다. 여기서 Web을 추가하고, 내 사이트의 도메인을 등록합니다. 도메인 등록 시, 마지막에 “/”를 입력하지 말아주세요
템플릿 ID 값 준비
카카오에서 특정 메시지 템플릿을 등록하고, 여러 변수를 활용해 맞춤형 메시지를 보낼 수 있습니다. [메시지] 영역을 클릭하고, 메시지 템플릿 빌더로 이동합니다. 이후, 새로운 템플릿을 생성합니다.
생성된 템플릿의 상단에서 템플릿 ID를 확인할 수 있습니다. 이때, 계정 ID와 혼동하지 않도록 주의합니다.

b. 템플릿 등록하기

[공통 설정] 영역에서 [전달 가능] 값을 “허용(true)”로 변경합니다.
템플릿 내용을 구성합니다. 템플릿은 고정 값과 변수 값을 설정할 수 있습니다.
고정 값 사용 시, 문자로 그냥 입력
변수 값 사용 시, “${변수명}”으로 입력
설정한 변수는 최하단의 우측에 있는 [User Arugment] 영역에서 확인할 수 있습니다.

c. 플러그인에 Javascript 키 설정하기

버블 GNB의 [Plugins] 탭에서 플러그인을 클릭합니다. 그리고, javascriptKey 필드에 현재 어플리케이션에 등록된 javascriptKey 값을 붙여넣기 합니다

d. Frontend에서 템플릿 공유하기

[Workflow] 탭에서 워크플로우를 생성하고, Action Event로 플러그인의 [템플릿 공유하기] 액션을 추가합니다. 각 필드 입력란에 관련 값을 입력합니다.
필드
타입
설명
templateId
Number
등록한 템플릿 Id를 입력해주세요. 이때, 데이터 타입은 “문자”가 아닌, "숫자"가 되야 합니다.
templateArgs
Object
템플릿에 사용하는 변수들을 입력해주세요. 변수명은 별도 형식 없이 그대로 입력하시면 됩니다. (ex. name : FameLee, url : https://bubblebox.kr )
그러면 해당 액션이 일어날 때마다, 카카오톡으로 리다이렉션되고 현재 내 친구 목록에서 공유 대상을 선택할 수 있습니다. 메시지 내용은 변수 값에 기반합니다.
메시지 내용 → 템플릿 빌더에서 설정한 고정 값 + 버블에서 전달한 변수 값
하단 로고 → 카카오 개발자에서 생성한 애플리케이션 로고
하단 이름 → 카카오 개발자에서 생성한 애플리케이션 이름
중요 공지

“버블박스”가 “노코더스”라는 이름으로 변경됐어요

현재 사이트는 더 이상 운영하지 않으니 노코더스 사이트로 이동해주세요

버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요! + 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
필요한 플러그인이 있다면, 버블박스에게 요청해주세요
햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블 크레딧으로 더 저렴하게 시작하기
버블박스 l BubbleBox
Enterprise