payload 정의

브릿지 가이드에서 case 로 추가시에 확인가능한 매계변수 객체인 payload 를 통신으로 데이터를 받을수 있습니다. case 별로 필요한 값을 addEventListener 에 추가하여 적용가능합니다.

sauceflexEnter

방송 입장 - 페이지 진입시 자동으로 호출되며 빈값을 전달합니다.

PayloadType
nullVoid

sauceflexBroadcastStatus

방송 상태가 변경될 경우 설정되어있는 값을 전달합니다. (방송 상태 변경 발생 시 자동으로 호출)

PayloadTypedescription
broadcastStateCodeBroadcastStateCode방송 상태

sauceflexMoveBanner

배너 클릭시 설정해놓은 값을 전달합니다.

PayloadTypedescription
linkUrlString배너링크정보
broadcastIdxString방송ID
bannerIdString배너ID

sauceflexMoveExit

방송 나가기를 클릭할 때 호출되며 빈값을 전달합니다.

PayloadType
nullVoid

로그인 버튼을 클릭할 때 호출되며 빈값을 전달합니다.

PayloadType
nullVoid

상품 클릭시 설정해놓은 값을 전달합니다.

PayloadTypedescription
linkUrlString상품링크 정보
broadcastIdxString방송ID
priceString | Number상품 가격
externalProductIdString | Null상품코드
isSoldoutBoolean품절상태

sauceflexOnShare

방송 공유하기 버튼 클릭시 설정해둔 값을 전달합니다.

PayloadTypedescription
linkUrlString방송 링
shortUrlString | Null방송 short 링크
broadcastIdxString방송ID
broadcastThumbnailUrlString큐레이션 썸네일
broadcastNameString방송명

sauceflexPictureInPicture

PIP 버튼 ( 웹뷰에서만 확인가능) 버튼 클릭시 방송 플레이어의 버튼 UI 를 감춤처리 해줍니다. (PIP 기능은 별도 개발 필요)

PayloadType
nullVoid

sauceflexSendPlayTime

현재 방송이 라이브 혹은 VOD 의 어느지점에서 변경되면 지속적으로 값을 전달합니다.

PayloadTypedescription
positionNumber현재의 영상 위치

리워드가 달성된 이후 노출되는 버튼 클릭시 설정해둔 값을 전달합니다.

PayloadTypedescription
broadcastIdxString방송ID
linkUrlString리워드 설정 URL

쿠폰 기능에서 노출되는 버튼 클릭시 설정해둔 값을 전달합니다.

PayloadTypedescription
broadcastIdxString방송ID
couponCodeString | Null쿠폰 코드
couponIdString | Null등록한 쿠폰 ID
couponNameString | Null등록한 쿠폰명
linkUrlString | Null링크 이동 URL
metaDataString | Null클릭이벤트 사용자 설정시의 전달데이터 값

sauceflexBannerAndroidScheme

배너 클릭 Android 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.

Payload

Type

description

url

String

Android 앱 전용 링크

broadcastIdx

String

방송 ID

bannerId

String

배너 ID

webUrl

String | Null

Web URL 링크

  • 앱 전용 링크에서 문제 발생 시 Fallback

sauceflexBannerIosScheme

배너 클릭 iOS 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.

Payload

Type

description

url

String

iOS 앱 전용 링크

broadcastIdx

String

방송 ID

bannerId

String

배너 ID

webUrl

String | Null

Web URL 링크

  • 앱 전용 링크에서 문제 발생 시 Fallback

sauceflexProductAndroidScheme

상품 클릭 Android 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.

Payload

Type

description

url

String

Android 앱 전용 링크

broadcastIdx

String

방송 ID

price

String | Number

상품 가격

externalProductId

String | null

상품코드

isSoldout

Boolean

품절상태

webUrl

String | Null

Web URL 링크

  • 앱 전용 링크에서 문제 발생 시 Fallback

sauceflexProductIosScheme

상품 클릭 iOS 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.

Payload

Type

description

url

String

iOS 앱 전용 링크

broadcastIdx

String

방송 ID

price

String | Number

상품 가격

externalProductId

String | null

상품코드

isSoldout

Boolean

품절상태

webUrl

String | Null

Web URL 링크

  • 앱 전용 링크에서 문제 발생 시 Fallback

sauceflexMoveSlotBanner

슬롯 배너 클릭시의 설정해놓은 값을 전달합니다.

PayloadTypedescription
slotBannerIdString슬롯배너 ID
broadcastIdString방송 ID
urlStringWeb URL 링크
webUrlTargetTypeCode"BLANK" | "SELF"BLANK : 새창 SELF : 현재창

sauceflexSlotBannerAndroidScheme

슬롯 배너 클릭 Android 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.

PayloadTypedescription
slotBannerIdString슬롯배너 ID
broadcastIdString방송 ID
urlStringscheme URL
webUrlTargetTypeCode"BLANK" | "SELF"BLANK : 새창 SELF : 현재창
webUrlStringWeb URL 링크

sauceflexSlotBannerIosScheme

슬롯 배너 클릭 iOS 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.

PayloadTypedescription
slotBannerIdString슬롯배너 ID
broadcastIdString방송 ID
urlStringscheme URL
webUrlTargetTypeCode"BLANK" | "SELF"BLANK : 새창 SELF : 현재창
webUrlStringWeb URL 링크

sauceflexCouponAndroidScheme

쿠폰 기능에서 노출되는 버튼 클릭시 Android 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.

PayloadTypedescription
broadcastIdxString방송ID
couponCodeString | Null쿠폰 코드
couponIdString | Null등록한 쿠폰 ID
couponNameString | Null등록한 쿠폰명
couponType'link' | 'newWindow' | 'download' | 'custom' | 'apiDownload'쿠폰타입
linkUrlString | Null링크 이동 URL
metaDataString | Null클릭이벤트 사용자 설정시의 전달데이터 값
schemeUrlString | Nullscheme URL

sauceflexCouponIosScheme

쿠폰 기능에서 노출되는 버튼 클릭시 iOS 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.

PayloadTypedescription
broadcastIdxString방송ID
couponCodeString | Null쿠폰 코드
couponIdString | Null등록한 쿠폰 ID
couponNameString | Null등록한 쿠폰명
couponType'link' | 'newWindow' | 'download' | 'custom' | 'apiDownload'쿠폰타입
linkUrlString | Null링크 이동 URL
metaDataString | Null클릭이벤트 사용자 설정시의 전달데이터 값
schemeUrlString | Nullscheme URL

sauceflexFocusBack

고객사 페이지에서 특정 UI 동작(예.공유하기 버튼 클릭 시 등) 이후, 라이브 플레이어 내부로 포커스를 복구하기 위해 사용하는 브릿지 이벤트입니다.

Payload

Type

description

elementId

'share-bottom-sheet'

플레이어 내부로 포커스를 복구할 대상의 매핑 ID 값

  • 'share-bottom-sheet' : 공유하기 버튼으로 포커스를 복구할 때 사용하는 ID 값

delayMsec

Number | Null

포커스 복구 까지 지연 시간(단위는 ms.), null 입력 시 즉시 포커스 복구

사용 예시

window.addEventListener("message", (e) => {
  if (typeof e.data !== "string") return;

  let jsonData = JSON.parse(e.data);

  switch (jsonData.key) {
    case "sauceflexEnter":
      console.log("방송 입장", jsonData.params);
      break;

    case "sauceflexBroadcastStatus":
      console.log("방송 상태", jsonData.params.broadcastStateCode);
      break;

    case "sauceflexMoveExit":
      console.log("방송 닫기");
      break;

    case "sauceflexMoveBanner":
      console.log("배너 데이터 링크 확인용", jsonData.params.linkUrl);
      console.log("배너 데이터 방송 확인용", jsonData.params.broadcastIdx);
      console.log("배너 데이터 배너 아이디", jsonData.params.bannerId);
      break;

    case "sauceflexMoveLogin":
      console.log("방송 로그인");
      break;

    case "sauceflexMoveProduct":
      console.log("상품 데이터 링크 확인용", jsonData.params.linkUrl);
      console.log("상품 데이터 방송 확인용", jsonData.params.broadcastIdx);
      break;

    case "sauceflexOnShare":
      console.log("공유 링크", jsonData.params.linkUrl);
      console.log("공유 숏링크", jsonData.params.shortUrl);
      break;

    case "sauceflexPictureInPicture":
      console.log("PIP");
      break;

    case "sauceflexSendPlayTime":
      console.log("현재 방송위치", jsonData.params.position);
      break;

    case "sauceflexMoveReward":
      console.log("리워드 달성 링크 데이터", jsonData.params.linkUrl);
      break;

    case "sauceflexMoveCoupon":
      console.log("쿠폰 링크 데이터", jsonData.params.linkUrl);
      break;
      
    case "sauceflexBannerAndroidScheme":
      console.log("배너 Android 앱스킴 링크", jsonData.params.url);
      break;
    
    case "sauceflexBannerIosScheme":
      console.log("배너 iOS 앱스킴 링크", jsonData.params.url);
      break;
      
    case "sauceflexProductAndroidScheme":
      console.log("상품 Android 앱스킴 링크", jsonData.params.url);
      break;
      
    case "sauceflexProductIosScheme":
      console.log("상품 iOS 앱스킴 링크", jsonData.params.url);
      break;
    case "sauceflexMoveSlotBanner":
      console.log("슬롯 배너 데이터", jsonData.params.url);
      break;
    case "sauceflexCouponAndroidScheme":
      console.log("쿠폰 AOS 앱스킴 데이터 ", jsonData.params.url);
      break;
    case "sauceflexCouponIosScheme":
      console.log("쿠폰 iOS 앱스킴 데이터 ", jsonData.params.url);
      break;  

  }
});