숏폼 MessageCallback

    숏폼 MessageCallback


    기사 요약

    숏폼에서 발생하는 여러가지 이벤트를 직접 핸들링 할 수 있는 messageCallback 함수를 제공합니다.

    숏폼 플레이어 내에서 라이브 송출 가이드

    숏폼 플레이어 내에서 라이브 송출을 위해 사용해야 할 이벤트는 다음과 같습니다.

    DETAIL_CLICK_LIVE_CAMPAIGN_LINK를 추가하여, 해당 기능을 사용할 수 있습니다.  

    <script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
    <script>
      const messageCallback= {
        DETAIL_CLICK_LIVE_CAMPAIGN_LINK: function(payload) {
          var url = `https://YOUR_LIVE_PLAYER_PAGE_URL?campaignKey=${payload.campaignKey}`
          location.href = url;
        },
      };
      cloud.shoplive.initShortform({
        accessKey: 'YOUR ACCESS KEY HERE',
        messageCallback: messageCallback
      });
    </script>

    Messages & Payload

    DETAIL_CLICK_LIVE_CAMPAIGN_LINK

    라이브 중 숏폼 플레이어 진입 시 라이브 방송 플레이 및 라이브 랜딩 아이콘을 삽입하는 경우

    Payload

    Type

    type

    string


    추가 MeesageCallback 설정 예시

    추가로 다음과 같은 MassageCallback 이벤트들을 사용할 수 있습니다.

    페이지의 공통 레이아웃에 아래 코드를 입력합니다.

    <script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
    <script>
      const messageCallback: { 
        LOGIN_REQUIRED: function(payload) {
          alert("LOGIN_REQUIRED");
          location.href = "YOUR_LOGIN_PAGE_URL";
        },
        ON_CLICK_PRODUCT_ITEM: function(payload) {
          console.log("ON_CLICK_PRODUCT_ITEM");
          location.href = payload.product.url;      
        },
        PLAY_SHORTFORM_DETAIL: function(payload) {
          console.log("PLAY_SHORTFORM_DETAIL");
          window.open(`https://YOUR_PAGE?shortsId=${payload.shorts.shortsId}`);    
        },
      };
      
      cloud.shoplive.initShortform({ 
        accessKey: 'YOUR ACCESS KEY HERE', 
        messageCallback: messageCallback 
      });
    </script>


    Messages & Payload

    messageCallback 설정으로 직접 핸들링 할 수 있는 이벤트의 목록은 아래와 같습니다.

    LOGIN_REQUIRED

    사용자가 댓글을 작성하려고 할 때와 같이 로그인이 필요한 경우

    Payload

    Type

    type

    string

    ON_CLICK_PRODUCT_ITEM

    상품 목록에서 상품 하나를 클릭하는 경우

    Payload

    Type

    product

    Product

    shorts

    Shorts

    ON_CLICK_SHARE_BUTTON

    공유 버튼을 클릭하는 경우

    Payload

    Type

    shorts

    Shorts

    url

    string

    PLAY_SHORTFORM_DETAIL

    숏폼 디테일(숏폼피드 내의 각 비디오)을 개별적으로 플레이하는 경우

    Payload

    Type

    shorts

    Shorts

    DETAIL_ACTIVE

    숏폼 디테일(숏폼 피드 내의 각 비디오)이 표시되는 경우

    Payload

    Type

    shorts

    Shorts

    DETAIL_ON_PLAYER_DISMISS

    숏폼 디테일(숏폼 피드 내의 각 비디오)을 닫은 경우

    Payload

    Type

    N/A

    N/A

    DETAIL_VIEWING_SECONDS

    Payload

    Type

    shorts

    Shorts

    videoCurrentTime

    number