스티비 플러그인 Stibee Plugin

중요 공지

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

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

노코더스 ㅣ 노코드 툴, 버블 시작하기

개발 없이 나만의 서비스를 만드는 방법! 노코드 툴, 버블을 노코더스에서 차근차근 시작하세요.

https://nocoders.kr/

한 줄 요약

뉴스레터 서비스인 스티비와 연동할 수 있는 버블 플러그인입니다.

컨택 및 제안

bubbleboxerofficial@gmail.com

노코드 마스터로 거듭나기

아래 목차를 클릭해 필요한 부분으로 바로 이동할 수 있습니다.

4. 구독자의 수신 거부 및 완전 삭제

5. 백엔드 API 활용하기

버블박스를 운영하는 페임리가 궁금하다면? If you're curious about FameLee?

페임리 알아보기 (Who is Famelee?)

인스타 팔로우하기 (Follow Instagram)

Intro

1. Why

고객과 지속적인 관계를 형성하기 위해 뉴스레터 서비스를 많이 이용합니다. 뉴스레터를 통해 구독자에게 서비스의 업데이트나 신규 프로모션 등을 알릴 수 있습니다. 스티비는 자체 연동 기능을 통해 카페24, 고도몰 등 다양한 노코드 서비스에서 뉴스레터 구독자를 모을 수 있도록 합니다. 하지만, 아직까지 버블 연동과 관련된 기능이 없기에 개발을 진행했습니다.

2. ChangeLog

1.0.0

•

구독하기

•

그룹 할당하기

•

그룹 해제하기

•

수신 거부하기

•

완전 삭제하기

Core

1. Instruction

해당 플러그인을 사용하려면, API 기능을 제공하는 스티비 유료 플랜이이 필요합니다. 아래의 [튜토리얼] 섹션에서 확인할 수 있습니다,

2. Related Docu

플러그인 페이지

stibee (스티비) Plugin for Bubble, by famelee's bubblebox

stibee (스티비) Plugin page on Bubble, by famelee's bubblebox. Add stibee (스티비) in one click to your app. Bubble lets you build web apps without any code.

https://bubble.io/plugin/stibee-스티비-1713274461507x175008983077093380

데모 링크

Bubble - Visual Programming

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

https://bubblebox-64217.bubbleapps.io/version-test/plugin_stibee/#s0

에디터 링크

Bubble Editor - bubblebox

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

https://bubble.io/page?type=page&name=plugin_stibee&id=bubblebox-64217&tab=tabs-1

3. Action

a. 구독하기

뉴스레터 구독자를 추가합니다.

Input

field	type	Required	설명
listId	string		주소록에 할당된 고유의 아이디를 입력합니다.
eventOccuredBy	string		구독자를 추가한 방법을 구분합니다. - MANUAL : 관리자에 의한 추가 - SUBSCRIBER : 구독자가 직접 구독
confirmEmailYN	string		구독 확인 이메일 발송 여부를 구분합니다. - Y : 구독 확인 이메일을 발송하고, 구독자가 이 메일을 통해 구독 확인을 해야 구독자로 추가 - N : 확인 과정 없이 바로 구독자로 추가
groupId	string		그룹에 할당된 고유의 아이디(groupId)입니다. 해당 그룹에 구독자를 할당하여 추가합니다. 만약 그룹 할당이 필요 없다면, 빈 값으로 입력합니다.
email	string		구독자의 이메일을 입력합니다.
adAgreed	string		광고성 정보 수신동의 여부를 구분합니다. - Y : 동의함 - N : 동의하지 않음
moreField	array of Key/value		구독자의 추가 정보를 담고 있습니다. 주소록 사용자 정의 필드에 정의된 내용을 따릅니다. Key에는 필드명을, value에는 필드 값을 입력해주세요. 단, 필드 타입은 text로 들어갑니다.

return

field	type	설명
requestStatus	boolean	요청 결과 값을 보여줍니다. 성공 시 True를, 실패 시 False를 반환합니다.
errorMessage	string	에러 발생 시, 관련 메시지를 반환합니다.
errorCode	string	에러 발생 시, 에러 코드를 반환합니다.
subscriberStatus	string	요청 성공 시, 구독자의 구독 상태를 반환합니다. 상태에 따라 아래 테이블 값을 반환합니다.

subscriberStatus	When?
success	구독자 추가를 성공했을 때
update	정보가 업데이트 됐을 때 (ex. 수신 거부 후, 재구독 )
failUnknown	알 수 없는 오류로 구독 실패
failDuplicatedEmail	이메일 중복 요청으로 인해 실패
failDuplicatedPhone	연락처 중복 요청으로 인해 실패
failWrongEmail	이메일 주소 형식 오류로 인해 실패
failWrongPhone	전화번호 형식 오류로 인해 실패
failExistEmail	이미 구독 중인 이메일이라 실패
failNoEmail	이메일 주소가 없어서 실패

example

///요청 성공 시 (구독 추가)
{
    "requestStatus": true,
    "errorMessage": null,
    "errorCode" : null,
    "subscriberStatus" : "success"
}

///요청 성공 시 (구독 실패)
{
    "requestStatus": true,
    "errorMessage": null,
    "errorCode" : null,
    "subscriberStatus" : "failDuplicatedEmail"
}


///요청 실패 시
{
    "requestStatus": false,
    "errorMessage": "sql: no rows in result set",
    "errorCode" : "UNKNOWN",
    "subscriberStatus" : null
}
JSON
복사

b. 그룹 할당하기

기존 구독자를 특정 그룹으로 할당합니다.

Input

field	type	Required	설명
listId	string		주소록에 할당된 고유의 아이디를 입력합니다.
groupId	string		그룹에 할당된 고유의 아이디(groupId)입니다. 해당 그룹에 기존의 구독자를 할당시킵니다.
email	string		기존 구독자의 이메일을 입력합니다.

return

field	type	설명
requestStatus	boolean	요청 결과 값을 보여줍니다. 성공 시 True를, 실패 시 False를 반환합니다.
errorMessage	string	에러 발생 시, 관련 메시지를 반환합니다.
errorCode	string	에러 발생 시, 에러 코드를 반환합니다.

example

///요청 성공 시
{
    "requestStatus": true,
    "errorMessage": null,
    "errorCode" : null
}

///요청 실패 시
{
    "requestStatus": false,
    "errorMessage": "sql: no rows in result set",
    "errorCode" : "UNKNOWN"
}
JSON
복사

c. 그룹 해제하기

특정 그룹에서 구독자를 제외합니다.

Input

field	type	Required	설명
listId	string		주소록에 할당된 고유의 아이디를 입력합니다.
groupId	string		그룹에 할당된 고유의 아이디(groupId)입니다. 해당 그룹에 속한 구독자를 해제시킵니다.
email	string		그룹에 속한 구독자의 이메일을 입력합니다.

return

field	type	설명
requestStatus	boolean	요청 결과 값을 보여줍니다. 성공 시 True를, 실패 시 False를 반환합니다.
errorMessage	string	에러 발생 시, 관련 메시지를 반환합니다.
errorCode	string	에러 발생 시, 에러 코드를 반환합니다.

example

///요청 성공 시
{
    "requestStatus": true,
    "errorMessage": null,
    "errorCode" : null
}

///요청 실패 시
{
    "requestStatus": false,
    "errorMessage": "sql: no rows in result set",
    "errorCode" : "UNKNOWN"
}
JSON
복사

d. 수신 거부하기

기존 구독자를 수신 거부 상태로 만듭니다.

Input

field	type	Required	설명
listId	string		주소록에 할당된 고유의 아이디를 입력합니다.
email	string		기존 구독자의 이메일을 입력합니다.

return

field	type	설명
requestStatus	boolean	요청 결과 값을 보여줍니다. 성공 시 True를, 실패 시 False를 반환합니다.
errorMessage	string	에러 발생 시, 관련 메시지를 반환합니다.
errorCode	string	에러 발생 시, 에러 코드를 반환합니다.
subscriberStatus	string	요청 성공 시, 구독자의 구독 상태를 반환합니다. 상태에 따라 아래 테이블 값을 반환합니다.

subscriberStatus	When?
success	구독자 수신 거부 성공했을 때
failOrAlreadyUnsubscribe	구독자 실패 또는 이미 수신 거부 중이었을 때

example

///요청 성공 시 (수신 거부 성공)
{
    "requestStatus": true,
    "errorMessage": null,
    "errorCode" : null,
    "subscriberStatus" : "success"
}

///요청 성공 시 (수신 거부 실패)
{
    "requestStatus": true,
    "errorMessage": null,
    "errorCode" : null,
    "subscriberStatus" : "failOrAlreadyUnsubscribe"
}

///요청 실패 시
{
    "requestStatus": false,
    "errorMessage": "sql: no rows in result set",
    "errorCode" : "UNKNOWN"
}
JSON
복사

e. 완전 삭제하기

기존 구독자를 완전 삭제합니다.

Input

field	type	Required	설명
listId	string		주소록에 할당된 고유의 아이디를 입력합니다.
email	string		기존 구독자의 이메일을 입력합니다.

return

field	type	설명
requestStatus	boolean	요청 결과 값을 보여줍니다. 성공 시 True를, 실패 시 False를 반환합니다.
errorMessage	string	에러 발생 시, 관련 메시지를 반환합니다.
errorCode	string	에러 발생 시, 에러 코드를 반환합니다.
subscriberStatus	string	요청 성공 시, 구독자의 구독 상태를 반환합니다. 상태에 따라 아래 테이블 값을 반환합니다.

subscriberStatus	When?
success	구독자 완전 삭제 성공했을 때
fail	구독자 완전 삭제 실패했을 때

example

///요청 성공 시 (완전 삭제 성공)
{
    "requestStatus": true,
    "errorMessage": null,
    "errorCode" : null,
    "subscriberStatus" : "success"
}

///요청 성공 시 (완전 삭제 실패)
{
    "requestStatus": true,
    "errorMessage": null,
    "errorCode" : null,
    "subscriberStatus" : "fail"
}

///요청 실패 시
{
    "requestStatus": false,
    "errorMessage": "sql: no rows in result set",
    "errorCode" : "UNKNOWN"
}
JSON
복사

Tutorial

1. Env. Setup

스티비 플러그인을 사용하기 위해서 스티비 API가 필요합니다. 스티비 API는 스티비 유료 플랜을 사용해야 합니다. 아래 요금제 정책은 24.04.19 기준입니다.

스티비에 접속하고, 유료 플랜을 결제합니다.

스티비 | 고객이 좋아하는 이메일 스티비로 보내세요

쉽고 빠른 이메일 제작부터 자동화, 데이터 분석, 성과 개선까지 고객과 가까워지는 이메일 마케팅을 스티비로 시작하세요.

https://stibee.com/dashboard

그리고 [기본 워크스페이스]를 클릭하고 [워크스페이스 설정]으로 이동합니다.

워크스페이스 설정 페이지에서 [API 키] 탭으로 이동합니다. 여기서 API 키를 발급하고, [복사하기]를 눌러 복사합니다.

버블 에디터에서 플러그인 설정 페이지로 접속한 후, 앞서 복사한 API 키를 붙여넣기 합니다.

2. 뉴스레터 구독시키기

a. 주소록 추가하기

스티비 대시보드에서 [주소록] 탭으로 이동하면, 현재 계정이 보유한 주소록을 확인할 수 있습니다.

주소록 상세 페이지로 이동하면, URL에 해당 주소록의 Id 값을 확인할 수 있습니다. 예를 들어, 아래 주소록의 id 값은 329887 입니다.

•

URL : https://stibee.com/lists/329887/subscribers/S/all

워크플로우에서 [스티비_구독하기] 액션을 생성하고, [listId] 값에 앞서 확인한 주소록 id를 입력합니다. 그러면, 해당 주소록으로 유저를 구독시킬 수 있습니다.

b. 그룹 추가하기

구독자를 생성할 때, 해당 구독자를 특정 그룹에 속하게 만들 수 있습니다. 그룹은 특정 주소록에 속하며, 1개의 주수록은 다수의 그룹을 보유할 수 있습니다. 또한, 1명의 유저는 다수의 그룹에 속할 수 있습니다.

flowchart LR
    A[구독자]
    B[(주소록)]
    C[(그룹 A)]
    D[(그룹 B)]
    A-->B
    B-->C
    B-->D
Mermaid
복사

주소록 상세 페이지에서 [그룹] 탭으로 이동하고, 그룹을 새로 생성합니다.

생성한 그룹을 클릭해 그룹 상세 페이지로 이동하면, 해당 그룹의 Id를 URL에서 확인할 수 있습니다. 예를 들어, 아래 이미지의 그룹 Id는 332638 입니다.

•

URL : https://stibee.com/lists/329887/subscribers/S/332638

[스티비_구독하기] 액션에서 [groupId] 값에 앞서 확인한 그룹 id를 입력합니다. 그러면, 해당 주소록에 유저를 추가할 때, 설정한 그룹에도 유저를 추가시킬 수 있습니다. 만약 그룹을 추가할 필요가 없다면, 빈 값으로 둡니다.

c. 고객 필드 추가하기

구독자를 추가할 때, 구독자에 대한 정보를 추가 필드로 스티비에서 받을 수 있습니다. 주소록 대시보드에서 [사용자 정의 필드]로 이동하면, 해당 주소록이 보유한 데이터 필드를 확인할 수 있습니다. 만약 유저의 전화번호도 추가적으로 수집하고 싶다면, [필드 추가하기] 버튼을 클릭하고 전화번호 필드를 추가합니다.

이때, 데이터 유형은 [텍스트]로 설정해야 합니다.

이후 [스티비_구독하기] 액션에서 [moreField]에 앞서 생성한 사용자 정의 필드에 값을 전달할 수 있습니다. 예를 들어, “phone”이라는 사용자 정의 필드를 스티비에서 만들었다면, 액션 설정 창에서 Key는 “phone”을 입력하고, Value에는 해당 필드의 값을 입력합니다.

3. 그룹 관리하기

[스티비_그룹 할당하기], [스티비_그룹 해제하기] 액션을 활용해 현재 주소록에 등록된 구독자를 다양한 그룹에 포함시키거나 제외시킬 수 있습니다. 해당 액션을 사용할 때, listId와 groupId를 입력해야 합니다. 각 Id는 주소록 상세 페이지와 그룹 상세 페이지의 URL에서 확인할 수 있습니다.

listId groupId

•

주소록 상세 페이지 URL : https://stibee.com/lists/329887/subscribers/S/all

•

그룹 상세 페이지 URL : https://stibee.com/lists/329887/subscribers/S/332638

4. 구독자의 수신 거부 및 완전 삭제

스티비에서는 구독자의 상태를 크게 (1) 구독 중, (2) 수신 거부와 (3) 완전 삭제로 구분합니다. [스티비_수신 거부하기]와 [스티비_완전 삭제하기] 액션을 활용해 기존 구독자의 상태를 자유롭게 변경할 수 있습니다.

수신 거부 및 완전 삭제한 유저의 이메일을 [스티비_구독하기] 액션에 전달하면, 다시 구독을 진행할 수 있습니다.

5. 백엔드 API 활용하기

본 플러그인은 스티비 API를 활용하며, 통신 과정 중에 시간이 다소 소요될 수 있습니다. 페이지 단(a.k.a 클라이언트)에서 작동하는 워크플로우는 유저가 현재 페이지에 있을 때만 동작을 합니다. 바꿔 말해, 구독 액션 워크플로우가 다 완료되기 전에 유저가 현재 페이지를 이탈한다면, 구독 처리가 멈출 수도 있습니다.

이를 방지하기 위해 백엔드 API를 활용해야 합니다. 백엔드 API는 페이지가 아닌 서버에서 작동이 되며, 유저가 페이지를 이탈해도 워크플로우가 돌아갑니다. 버블 에디터에서 [설정] 탭으로 이동하고, [API] 탭으로 들어갑니다. 여기서 [Enable workflow API and backend workflows]를 활성화 합니다.

그러면 페이지 네비게이션에서 [Backend workflows]가 보이게 됩니다. 여기로 이동해서 백엔드 API를 생성할 수 있습니ㅏㄷ.

새로운 백엔드 API를 생성하고, [Add a new paramter]를 클릭해 클라이언트단에서 전달 받을 데이터 필드를 설정합니다. 예를 들어, 구독을 진행하기 위해 유저 이메일이 필요하므로, 파라미터로 이메일 필드를 생성합니다. 그리고 해당 API 안에 액션을 추가하면, 앞서 생성한 파라미터의 값을 활용할 수 있습니다.

다시 페이지로 이동하고, 워크플로우의 트리거로 [schedule API Workflow]를 생성합니다. 그리고 앞서 생성한 백엔드 API를 선택합니다.

그러면 앞서 백엔드 API에서 설정한 파라미터를 입력할 수 있습니다. 관련 데이터를 입력하면 되며, [Scheduled date]는 current date/time으로 설정합니다. 참고로 [Ignore privacy rules when running the workflow]를 고려해야 합니다. privacy rule을 고려하지 않으면, 보안 정책으로 데이터가 전달되지 않을 수 있습니다. 해당 설정은 [데이터] 탭의 [Privacy] 탭에서 관리할 수 있습니다.