쇼룸 브릿지 가이드

쇼룸 라이브러리를 사용한 웹페이지를 iframe에서 사용하는 경우, message 이벤트 리스너를 통해 플레이어 이동, 배너 클릭, 상품 클릭과 같이 정해진 이벤트에 대한 동작을 정의할 수 있습니다.

아래와 같은 설정으로 적용 가능합니다.

window.addEventListener('message',(e)=>{
    if (typeof e.data === 'string') {
        let event;
        let params;
        
        try {
            const data = JSON.parse(e.data);
            event = data.key ?? data.type;
            params = data.params;
        } catch (_error) {
            event = e.data;
        }
        
        switch (event) {
            // 배너 클릭 시의 이벤트 정의
            case 'sauceShowroomMoveBanner': {
                window.location.href = params.linkUrl;
                break;
            }
            // 상품 클릭 시의 이벤트 정의
            case 'sauceShowroomMoveProduct': {
                window.location.href = params.linkUrl;
                break;
            }
            // 클립 플레이어 이동 이벤트 정의
            case 'sauceShowroomMoveSauceClipPlayer': {
                window.location.href = params.clipUrl;
                break;
            }
            // 라이브 플레이어 이동 이벤트 정의
            case 'sauceShowroomMoveSauceLivePlayer': {
                window.location.href = params.broadcastUrl;
                break;
            }
            default:
        }
    }
});

이벤트 별 페이로드의 정의는 브릿지 payload 정의 를 참고해주세요.