GuidesAPI GuideChangelog
Log In
Guides

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 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.

PayloadTypedescription
urlStringAndroid 앱 전용 링크
broadcastIdxString방송 ID
bannerIdString배너 ID
webUrlString | NullWeb URL 링크
  • 앱 전용 링크에서 문제 발생 시 Fallback

sauceflexBannerIosScheme

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

PayloadTypedescription
urlStringiOS 앱 전용 링크
broadcastIdxString방송 ID
bannerIdString배너 ID
webUrlString | NullWeb URL 링크
  • 앱 전용 링크에서 문제 발생 시 Fallback

sauceflexProductAndroidScheme

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

PayloadTypedescription
urlStringAndroid 앱 전용 링크
broadcastIdxString방송 ID
priceString | Number상품 가격
externalProductIdString | null상품코드
isSoldoutBoolean품절상태
webUrlString | NullWeb URL 링크
  • 앱 전용 링크에서 문제 발생 시 Fallback

sauceflexProductIosScheme

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

PayloadTypedescription
urlStringiOS 앱 전용 링크
broadcastIdxString방송 ID
priceString | Number상품 가격
externalProductIdString | null상품코드
isSoldoutBoolean품절상태
webUrlString | NullWeb 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 동작(예.공유하기 버튼 클릭 시 등) 이후, 라이브 플레이어 내부로 포커스를 복구하기 위해 사용하는 브릿지 이벤트입니다.

PayloadTypedescription
elementId'share-bottom-sheet'플레이어 내부로 포커스를 복구할 대상의 매핑 ID 값
  • 'share-bottom-sheet' : 공유하기 버튼으로 포커스를 복구할 때 사용하는 ID 값
delayMsecNumber | Null포커스 복구 까지 지연 시간(단위는 ms.), null 입력 시 즉시 포커스 복구

sauceflexTurnOnNotification

알림 받기 클릭 시 관련된 값을 전달합니다.

PropertyTypeDescription
broadcastIdStringLIVE ID
broadcastUrlString라이브 플레이어 링크
memberIdString유저 식별 ID
partnerUniqueIdString파트너ID
programmingStartDtString라이브 시작 예정시간, 형식: YYYY-MM-DDThh:mm:ss.sssZ (UTC)
programmingEndDtString라이브 종료 예정시간, 형식: YYYY-MM-DDThh:mm:ss.sssZ (UTC)

sauceflexTurnOffNotification

알림 해제 클릭 시 관련된 값을 전달합니다.

PropertyTypeDescription
broadcastIdStringLIVE ID
broadcastUrlString라이브 플레이어 링크
memberIdString유저 식별 ID
partnerUniqueIdString파트너ID
programmingStartDtString라이브 시작 예정시간, 형식: YYYY-MM-DDThh:mm:ss.sssZ (UTC)
programmingEndDtString라이브 종료 예정시간, 형식: YYYY-MM-DDThh:mm:ss.sssZ (UTC)

sauceflexTurnOnNotificationCallback

알림 받기 처리 성공시 설정해 놓은 값을 전달합니다.

PropertyTypeDescription
broadcastIdString라이브ID

sauceflexTurnOffNotificationCallback

알림 해제 처리 성공시 설정해 놓은 값을 전달합니다.

PropertyTypeDescription
broadcastIdString라이브ID

사용 예시

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;  

  }
});

bot에 문의하기