GuidesAPI GuideChangelog
Log In
Guides

라이브 알림 버튼 연동

라이브 알림 버튼 연동 — 소스라이브 플레이어

라이브 알림 기능은 라이브가 시작될 때 사용자에게 알림을 보내 참여를 유도하는 기능입니다. 라이브 예고 플레이어에 노출되는 알림 버튼을 사용자가 누르면 플레이어가 sauceflexTurnOnNotification·sauceflexTurnOffNotification 이벤트를 전송합니다. 고객사는 이 이벤트를 받아 알림 신청·해제를 처리하고, 처리 결과를 콜백 이벤트로 다시 플레이어에 전달합니다.

📋 선행 조건: 브릿지 이벤트 연동 완료
⚙️ 어드민 '라이브 알림' 사용 설정 필요
📨 알림 받기/해제는 고객사 측 구현 필요
사전 준비

라이브 알림 기능을 사용하려면 아래 세 가지가 모두 준비되어야 합니다.

1
고객사 측 알림 기능 준비
사용자에게 알림 받기/해제를 제공하는 기능(푸시 구독 등)을 고객사 측에서 준비합니다.
2
알림 받기/해제 브릿지 이벤트 구현
sauceflexTurnOnNotification·sauceflexTurnOffNotification 이벤트를 수신하는 리스너를 구현합니다. 이벤트 데이터 구조는 브릿지 이벤트 레퍼런스를 참고하세요.
3
알림 받기 기능 설정 요청
고객성공팀에 파트너 설정의 '라이브 알림 기능''사용함'으로 설정 요청합니다.
📨 고객성공팀 문의
알림 버튼 노출 조건

어드민의 라이브 편성·라이브 정보 페이지에서 '라이브 알림''사용함'으로 설정한 경우, 라이브 시작 전 라이브 예고 플레이어에 알림 버튼이 노출됩니다.

알림받기 버튼 (신청 전)
① 알림받기 — 신청 전
신청 후
알림받는중 버튼 (신청 완료)
② 알림받는중 — 신청 완료
📌 알림 버튼은 라이브 예고(시작 전) 상태의 플레이어에만 표시됩니다. 라이브가 시작되면 일반 플레이어로 전환되어 알림 버튼은 사라집니다.
알림 버튼 동작 순서

사용자가 알림 버튼을 누른 시점부터 버튼 상태가 갱신되기까지의 흐름입니다.

1
알림 버튼 클릭 → 이벤트 전송 (또는 로그인 모달)
로그인 상태이면 플레이어가 sauceflexTurnOnNotification(또는 해제 시 sauceflexTurnOffNotification) 이벤트를 전송합니다. 로그인 상태가 아니면 로그인 모달을 먼저 노출합니다.
🎯 브릿지 이벤트 발생
2
고객사 측 알림 받기/해제 처리
고객사는 이벤트를 받아 직접 구현한 알림 받기/해제 기능을 처리합니다.
3
처리 성공 → 콜백 이벤트 전송
처리가 성공하면 고객사는 라이브 예고 플레이어로 sauceflexTurnOnNotificationCallback(또는 sauceflexTurnOffNotificationCallback)을 전송합니다.
↩ 콜백 필수
4
플레이어가 콜백 대기
플레이어는 이벤트 전송 직후 일정 시간 동안 콜백을 대기합니다.
5
알림 신청자 목록 갱신 · 버튼 상태 변경
콜백이 수신되면 알림 신청자 목록을 갱신하고 알림 버튼 상태를 변경한 뒤 동작을 마칩니다.
⚠️ 콜백을 보내지 않으면 버튼 상태가 갱신되지 않습니다. 알림 처리 성공 시 반드시 콜백 이벤트를 플레이어로 다시 전송하세요.
구현 예시

알림 받기/해제 이벤트를 수신하고, 처리 후 콜백을 전송하는 리스너 예시입니다. 웹·Android·iOS 모두 동일한 keyparams로 이벤트를 수신합니다.

수신 이벤트 데이터(params)sauceflexTurnOnNotification·sauceflexTurnOffNotification 공통

필드타입필수설명
broadcastIdString필수라이브 ID
broadcastUrlString필수라이브 플레이어 링크
memberIdString필수유저 식별 ID
partnerUniqueIdString필수파트너 ID
programmingStartDtString필수라이브 시작 예정 시간 (UTC, YYYY-MM-DDThh:mm:ss.sssZ)
programmingEndDtString필수라이브 종료 예정 시간 (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 등)은 연동 환경에 따라 다르므로 고객성공팀 안내를 따르세요.
알림 받기/해제 이벤트와 콜백의 전체 데이터 구조는 브릿지 이벤트 레퍼런스에서 확인하세요.


bot에 문의하기