라이브 알림 버튼 연동
라이브 알림 기능은 라이브가 시작될 때 사용자에게 알림을 보내 참여를 유도하는 기능입니다. 라이브 예고 플레이어에 노출되는 알림 버튼을 사용자가 누르면 플레이어가 sauceflexTurnOnNotification·sauceflexTurnOffNotification 이벤트를 전송합니다. 고객사는 이 이벤트를 받아 알림 신청·해제를 처리하고, 처리 결과를 콜백 이벤트로 다시 플레이어에 전달합니다.
사전 준비
라이브 알림 기능을 사용하려면 아래 세 가지가 모두 준비되어야 합니다.
1
고객사 측 알림 기능 준비
사용자에게 알림 받기/해제를 제공하는 기능(푸시 구독 등)을 고객사 측에서 준비합니다.
2
알림 받기/해제 브릿지 이벤트 구현
sauceflexTurnOnNotification·sauceflexTurnOffNotification 이벤트를 수신하는 리스너를 구현합니다. 이벤트 데이터 구조는 브릿지 이벤트 레퍼런스를 참고하세요.3
알림 받기 기능 설정 요청
고객성공팀에 파트너 설정의 '라이브 알림 기능'을 '사용함'으로 설정 요청합니다.
📨 고객성공팀 문의
알림 버튼 노출 조건
어드민의 라이브 편성·라이브 정보 페이지에서 '라이브 알림'을 '사용함'으로 설정한 경우, 라이브 시작 전 라이브 예고 플레이어에 알림 버튼이 노출됩니다.
→
신청 후
📌 알림 버튼은 라이브 예고(시작 전) 상태의 플레이어에만 표시됩니다. 라이브가 시작되면 일반 플레이어로 전환되어 알림 버튼은 사라집니다.
알림 버튼 동작 순서
사용자가 알림 버튼을 누른 시점부터 버튼 상태가 갱신되기까지의 흐름입니다.
1
알림 버튼 클릭 → 이벤트 전송 (또는 로그인 모달)
로그인 상태이면 플레이어가
sauceflexTurnOnNotification(또는 해제 시 sauceflexTurnOffNotification) 이벤트를 전송합니다. 로그인 상태가 아니면 로그인 모달을 먼저 노출합니다.🎯 브릿지 이벤트 발생
2
고객사 측 알림 받기/해제 처리
고객사는 이벤트를 받아 직접 구현한 알림 받기/해제 기능을 처리합니다.
3
처리 성공 → 콜백 이벤트 전송
처리가 성공하면 고객사는 라이브 예고 플레이어로
sauceflexTurnOnNotificationCallback(또는 sauceflexTurnOffNotificationCallback)을 전송합니다.↩ 콜백 필수
4
플레이어가 콜백 대기
플레이어는 이벤트 전송 직후 일정 시간 동안 콜백을 대기합니다.
5
알림 신청자 목록 갱신 · 버튼 상태 변경
콜백이 수신되면 알림 신청자 목록을 갱신하고 알림 버튼 상태를 변경한 뒤 동작을 마칩니다.
⚠️ 콜백을 보내지 않으면 버튼 상태가 갱신되지 않습니다. 알림 처리 성공 시 반드시 콜백 이벤트를 플레이어로 다시 전송하세요.
구현 예시
알림 받기/해제 이벤트를 수신하고, 처리 후 콜백을 전송하는 리스너 예시입니다. 웹·Android·iOS 모두 동일한 key와 params로 이벤트를 수신합니다.
수신 이벤트 데이터(params) — sauceflexTurnOnNotification·sauceflexTurnOffNotification 공통
| 필드 | 타입 | 필수 | 설명 |
|---|---|---|---|
| broadcastId | String | 필수 | 라이브 ID |
| broadcastUrl | String | 필수 | 라이브 플레이어 링크 |
| memberId | String | 필수 | 유저 식별 ID |
| partnerUniqueId | String | 필수 | 파트너 ID |
| programmingStartDt | String | 필수 | 라이브 시작 예정 시간 (UTC, YYYY-MM-DDThh:mm:ss.sssZ) |
| programmingEndDt | String | 필수 | 라이브 종료 예정 시간 (UTC, YYYY-MM-DDThh:mm:ss.sssZ) |
↩ 처리 성공 후 전송하는 콜백(
sauceflexTurnOnNotificationCallback·sauceflexTurnOffNotificationCallback)의 params는 { broadcastId } 하나입니다. 전체 구조는 브릿지 이벤트 레퍼런스를 참고하세요.
JavaScript — 알림 받기/해제 이벤트 수신
window.addEventListener('message', (e) => { if (typeof e.data !== 'string') return const { key, params } = JSON.parse(e.data) switch (key) { case 'sauceflexTurnOnNotification': { // 1) 고객사 측 알림 받기(구독) 처리 // params.broadcastId / memberId / programmingStartDt 등 활용 subscribeLiveAlarm(params).then(() => { // 2) 처리 성공 시 콜백을 플레이어로 다시 전송 sendCallbackToPlayer('sauceflexTurnOnNotificationCallback', { broadcastId: params.broadcastId }) }) break } case 'sauceflexTurnOffNotification': { unsubscribeLiveAlarm(params).then(() => { sendCallbackToPlayer('sauceflexTurnOffNotificationCallback', { broadcastId: params.broadcastId }) }) break } } })
Kotlin — SauceflexBridge.kt
@JavascriptInterface fun sauceflexTurnOnNotification(payload: String?) { val params = JSONObject(payload ?: "{}") val broadcastId = params.optString("broadcastId", "") activity?.runOnUiThread { // 1) 고객사 측 알림 받기(구독) 처리 subscribeLiveAlarm(params) // 2) 처리 성공 시 콜백 전송 (전송 방식은 고객성공팀 안내) // sauceflexTurnOnNotificationCallback → { broadcastId } } } @JavascriptInterface fun sauceflexTurnOffNotification(payload: String?) { val params = JSONObject(payload ?: "{}") val broadcastId = params.optString("broadcastId", "") activity?.runOnUiThread { unsubscribeLiveAlarm(params) // 콜백: sauceflexTurnOffNotificationCallback → { broadcastId } } }
Kotlin — WebView 등록
webView.addJavascriptInterface(SauceflexBridge(context, activity), "sauceflex")
Swift — WKWebView 등록
contentController.add(self, name: "sauceflexTurnOnNotification") contentController.add(self, name: "sauceflexTurnOffNotification")
Swift — ViewController.swift
func userContentController( _ userContentController: WKUserContentController, didReceive message: WKScriptMessage ) { guard let body = message.body as? String, let data = body.data(using: .utf8), let params = try? JSONSerialization.jsonObject(with: data) as? [String: Any] else { return } let broadcastId = params["broadcastId"] as? String ?? "" switch message.name { case "sauceflexTurnOnNotification": // 고객사 알림 받기 처리 → 성공 시 콜백 전송 (방식은 고객성공팀 안내) subscribeLiveAlarm(params) case "sauceflexTurnOffNotification": unsubscribeLiveAlarm(params) default: break } }
📌
subscribeLiveAlarm·unsubscribeLiveAlarm은 고객사가 구현하는 알림 처리 함수의 예시입니다. 콜백 전송 방식(웹의 sendCallbackToPlayer 등)은 연동 환경에 따라 다르므로 고객성공팀 안내를 따르세요.
✅ 알림 받기/해제 이벤트와 콜백의 전체 데이터 구조는 브릿지 이벤트 레퍼런스에서 확인하세요.
Updated about 24 hours ago