중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
한 줄 요약
This Plugin enables users to follow kakao channel or chat with kakao channel
유저가 카카오톡 채널을 추가하거나, 채널과 채팅하게 만드는 플러그인입니다
버블박스를 운영하는 페임리가 궁금하다면?
If you're curious about FameLee?
Intro
1. Why
I developed a plugin related to Kakao Channels because there were no existing ones on Bubble. Using Kakao Channels, (1) you can conduct marketing to users through channel additions and (2) manage customer service more conveniently by chatting with users through the channel.
카카오 채널을 사용하면 (1) 채널 추가를 통해 유저에게 마케팅을 진행할 수 있고 (2) 채널을 통해 유저와 채팅함으로써 CS 관리도 편리해집니다. 버블에서 카카오 채널과 관련된 플러그인이 없기에 개발했습니다.
2. ChangeLog
1.0.0
•
follow kakao channel
채널 추가하기
•
chat kakao channel
채널 채팅 시작하기
Core
1. Instruction
You must have kakao biz channel and kakao developer account. You can check how to get this in [Tutorial] section below.
해당 플러그인을 사용하려면, 카카오 비즈 채널과 개발자 계정이 필요합니다. 아래의 [튜토리얼] 섹션에서 확인할 수 있습니다,
2. Related Docu
플러그인 페이지
데모 링크
에디터 링크
3. Action
a. follow kakao channel
Show the popup where user follows kakao channel
카카오톡 채널 추가창을 실행합니다.
Input
field | type | Required | 설명 |
channelId | boolean | | Enter your channelId. the channel must be in biz
채널 Id를 입력합니다. 채널은 비즈 채널만 가능합니다. |
return
b. chat kakao channel
Start to chat with kakao channel
카카오 채널과 대화를 시작합니다.
Input
field | type | Required | 설명 |
channelId | boolean | | Enter your channelId. the channel must be in biz
채널 Id를 입력합니다. 채널은 비즈 채널만 가능합니다. |
Tutorial
1. Env. Setup
To use the plugin, follow the steps below:
플러그인을 사용하기 위해 아래 환경 설정이 필요합니다.
Kakao Developer Account
카카오 개발자 계정
Connect JavaScript Key
Javsscript 키 연결
Web Registration
웹 등록
Open Business Channel
비즈니스 채널 개설
Connect Kakao Developer Account with Business Channel
카카오 개발자 계정과 비즈 채널 연결
Confirm Business Channel ID
비즈 채널 Id 확인
Kakao Developer Account / 카카오 개발자 계정
Create a Kakao Developer Account at the following link:
아래 링크에서 카카오 개발자 계정을 생성합니다.
After signing up, add an application.
가입 후, 애플리케이션을 추가합니다.
Connect JavaScript Key / Javsscript 키 연결
After creating the application, go to the dashboard. Navigate to [App Settings] and then to [App Key]. Here, you'll find the JavaScript key for your current application. This key will be used in the plugin settings.
애플리케이션을 생성하고, 대시보드로 이동합니다. [앱 설정] 영역의 [앱 키]로 이동합니다. 여기서 현재 어플리케이션의 Javascript 키를 확인합니다. 해당 키는 플러그인의 설정에 사용됩니다.
In the Bubble GNB [Plugins] tab, click on the plugin. Then, paste the JavaScript key value into the javascriptKey field.
버블 GNB의 [Plugins] 탭에서 플러그인을 클릭합니다. 그리고, javascriptKey 필드에 현재 어플리케이션에 등록된 javascriptKey 값을 붙여넣기 합니다
Web Registration / 웹 등록
다시 카카오 개발자 대시보드에서 [앱 설정] 영역의 [플랫폼]으로 이동합니다. 여기서 Web을 추가하고, 내 사이트의 도메인을 등록합니다. 도메인 등록 시, 마지막에 “/”를 입력하지 말아주세요 (ex) https://bubblebox-64217.bubbleapps.io
Revisit the Kakao Developer Dashboard and navigate to the [App Settings] section. Within this area, locate and click on the [Platform] tab. Here, you'll need to add the "Web" platform and register your website's domain. When registering the domain, make sure not to include a trailing "/" at the end. (ex) https://bubblebox-64217.bubbleapps.io
Open Business Channel / 비즈니스 채널 개설
아래 링크를 들어간 후, 사업자 정보를 입력해 비즈니스 채널을 개설합니다.
Visit the link below, enter business information, and open a business channel:
Connect Kakao Developer Account with Business Channel / 카카오 개발자 계정과 비즈 채널 연결
다시 카카오 개발자 대시보드로 이동한 후, [앱 설정] 영역의 [비즈니스] 탭에서 앞서 개설한 비즈니스 채널을 연결시킵니다.
After that, go back to the Kakao Developer Dashboard, navigate to [App Settings] > [Business], and connect the previously opened business channel.
Confirm Business Channel ID / 비즈 채널 Id 확인
연결이 완료됐으면, 공개 ID를 확인할 수 있습니다. 해당 Id 값은 플러그인의 액션 이벤트에서 사용됩니다.
After the connection is complete, you can check the public ID. This ID value will be used in the plugin's action events.
2. follow channel
User can add a Kakao channel in Bubble using the [follow kakao channel] event. When this event occurs, a popup will ask whether to add the Kakao channel or not. If the user doesn't have Kakao login information, a Kakao login popup will appear first.
버블에서 [follow kakao channel] 이벤트로 카카오 채널 추가를 실행할 수 있습니다. 해당 이벤트가 일어나면 카카오 채널을 추가 유무를 묻는 팝업이 실행됩니다. 만약 유저에게 카카오 로그인 정보가 없다면, 카카오 로그인 팝업이 먼저 출력됩니다.
Enter the previously connected business channel ID in the [channelId] field.
[channelId] 필드에 앞서 카카오 개발자 계정과 연결했던 비즈 채널 id를 입력합니다.
3. chat kakao channel
User can chat with Kakao channel in Bubble using the [chat kakao channel] event. Enter the previously connected business channel ID in the [channelId] field.
버블에서 [chat kakao channel] 이벤트로 카카오 채널로 유저가 대화를 시작할 수 있습니다. [channelId] 필드에 앞서 카카오 개발자 계정과 연결했던 비즈 채널 id를 입력합니다.
When the action event begins, a channel and conversation will proceed with the user's KakaoTalk account.
액션 이벤트가 시작되면. 유저의 카카오톡 계정으로 채널과 대화가 진행됩니다.
중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요!
+ 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
필요한 플러그인이 있다면, 버블박스에게 요청해주세요
햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블 크레딧으로 더 저렴하게 시작하기
버블박스 l BubbleBox
