payload 정의

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

sauceflexEnter

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

Payload	Type
null	Void

sauceflexBroadcastStatus

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

Payload	Type	description
broadcastStateCode	BroadcastStateCode	방송 상태

sauceflexMoveBanner

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

Payload	Type	description
linkUrl	String	배너링크정보
broadcastIdx	String	방송ID
bannerId	String	배너ID

sauceflexMoveExit

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

Payload	Type
null	Void

sauceflexMoveLogin

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

Payload	Type
null	Void

sauceflexMoveProduct

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

Payload	Type	description
linkUrl	String	상품링크 정보
broadcastIdx	String	방송ID
price	String \| Number	상품 가격
externalProductId	String \| null	상품코드
isSoldout	Boolean	품절상태

sauceflexOnShare

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

Payload	Type	description
linkUrl	String	방송 링
shortUrl	String \| Null	방송 short 링크

sauceflexPictureInPicture

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

Payload	Type
null	Void

sauceflexSendPlayTime

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

Payload	Type	description
position	Number	현재의 영상 위치

sauceflexMoveReward

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

Payload	Type	description
broadcastIdx	String	방송ID
linkUrl	String	리워드 설정 URL

sauceflexMoveCoupon

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

Payload	Type	description
broadcastIdx	String	방송ID
couponCode	String \| Null	쿠폰 코드
couponId	String \| Null	등록한 쿠폰 ID
couponName	String \| Null	등록한 쿠폰명
couponType	'link' \| 'newWindow' \| 'download' \| 'custom'	쿠폰타입
linkUrl	String \| Null	링크 이동 URL
metadata	String \| 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;

  }
});