Guides

쇼룸 브릿지 가이드

Suggest Edits

쇼룸의 기능 중 플레이어 이동, 배너 클릭, 상품 클릭, 라이브 알림 받기/해제 등과 같은 특정 이벤트에 대한 동작을 직접 구현할 수 있습니다.

특정 이벤트에 대한 동작을 구현하고자 하는 위치에 따라 구분하여 구현할 수 있습니다.

📘

  • 쇼룸 라이브러리를 사용한 웹페이지를 iframe으로 사용하는 경우에는 필수로 구현해야 하며,

부모 페이지에서 구현하는 경우를 참고해 주세요.

  • 브릿지 이벤트 함수를 정의하지 않는 경우에는 쇼룸에서의 기본동작을 수행하므로, 필요한 기능들에만 브릿지 이벤트 함수를 구현해 주세요.

동일 페이지 내 구현하는 경우

쇼룸 라이브러리를 사용한 웹페이지에서 window.sauceShowroom객체에 함수를 정의하여 구현할 수 있습니다.

📘

  • window.sauceShowroom 객체에서 커스텀할 이벤트에 대해서만 함수를 정의해 주세요.
  • 함수 내용 없이 정의만 해놓은 경우 기능이 동작하지 않습니다.
// window.sauceShowroom 객체에서 커스텀할 이벤트에 대해서만 함수를 정의해 주세요.
window.sauceShowroom = {
    // 배너 클릭 시의 이벤트 정의
    sauceShowroomMoveBanner: (jsonStr) => {
        let bannerInfo;
      
        try {
            bannerInfo = JSON.parse(jsonStr);
        } catch (e) {
          	console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
            return;
        }
        try {
            // 원하시는 처리를 추가해 주세요.
            window.location.href = bannerInfo.linkUrl; // 예시) 링크 이동
        } catch (e) {
          	console.warn('배너 처리 중 에러가 발생했습니다.', e);
        }
  	},
    // 상품 클릭 시의 이벤트 정의
    sauceShowroomMoveProduct: (jsonStr) => {
        let productInfo;
      
        try {
            productInfo = JSON.parse(jsonStr);
        } catch (e) {
          	console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
            return;
        }
        try {
            // 원하시는 처리를 추가해 주세요.
            window.location.href = productInfo.linkUrl; // 예시) 링크 이동
        } catch (e) {
          	console.warn('상품 처리 중 에러가 발생했습니다.', e);
        }
  	},
    // 클립 플레이어 이동 이벤트 정의
    sauceShowroomMoveSauceClipPlayer: (jsonStr) => {
        let clipInfo;
      
        try {
            clipInfo = JSON.parse(jsonStr);
        } catch (e) {
          	console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
            return;
        }
        try {
            // 원하시는 처리를 추가해 주세요.
            window.location.href = clipInfo.clipUrl; // 예시) 클립 플레이어로 이동
        } catch (e) {
          	console.warn('클립 플레이어 처리 중 에러가 발생했습니다.', e);
        }
  	},
    // 라이브 플레이어 이동 이벤트 정의
    sauceShowroomMoveSauceLivePlayer: (jsonStr) => {
        let broadcastInfo;
      
        try {
            broadcastInfo = JSON.parse(jsonStr);
        } catch (e) {
          	console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
            return;
        }
        try {
            // 원하시는 처리를 추가해 주세요.
            window.location.href = broadcastInfo.broadcastUrl; // 예시) 라이브 플레이어로 이동
        } catch (e) {
          	console.warn('라이브 플레이어 처리 중 에러가 발생했습니다.', e);
        }
    },
    // 라이브 알림 받기 클릭 시의 이벤트 정의
    sauceShowroomTurnOnNotification: async (jsonStr) => {
        let notificatinoInfo;
      
        try {
            notificatinoInfo = JSON.parse(jsonStr);
        } catch (e) {
          	console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
            return;
        }
    
    		let isSuccess = false;
    
        // 요청이 온 사용자에게 알림을 신청하는 처리를 추가해 주세요.
        try {
            isSuccess = await api.postAlarm(...);
        } catch (e) {
            console.warn('고객사의 알림 신청 중 에러가 발생했습니다.');
        }
      
        // 성공한 경우, 쇼룸에 알림 신청이 완료되었다는 콜백 브릿지 이벤트를 방송ID와 함께 전달해 주세요. 
        // 해당 처리가 없을 경우, 쇼룸에서는 실패로 간주됩니다.
        if (isSuccess) {
            try {
                window.sauceShowroom.sauceShowroomTurnOnNotificationCallback({ broadcastId });
            } catch (e) {
                console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
            }
        }
    },
    // 라이브 알림 해제 클릭 시의 이벤트 정의 
    sauceShowroomTurnOffNotification: async (jsonStr) => {
        let notificatinoInfo;
      
        try {
            notificatinoInfo = JSON.parse(jsonStr);
        } catch (e) {
          	console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
            return;
        }
    
    		let isSuccess = false;
    
        // 요청이 온 사용자에게 알림을 해제하는 처리를 추가해 주세요.
        try {
          	isSuccess = await api.deleteAlarm(...);
        } catch (e) {
          	console.warn('고객사의 알림 해제 중 에러가 발생했습니다.');
        }
      
        // 성공한 경우, 쇼룸에 알림 해제가 완료되었다는 콜백 브릿지 이벤트를 방송ID와 함께 전달해 주세요.   
        // 해당 처리가 없을 경우, 쇼룸에서는 실패로 간주됩니다.
        if (isSuccess) {
            try {
              	window.sauceShowroom.sauceShowroomTurnOffNotificationCallback({ broadcastId });
            } catch (e) {
              	console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
            }
        }
    },
    // 회원 로그인 요청 시의 이벤트 정의
    sauceShowroomMemberLogin: () => {
        // 원하시는 처리를 추가해 주세요.
        window.location.href = '고객사 로그인 페이지'; // 예시) 로그인 페이지로 이동
    },
};

부모 페이지에서 구현하는 경우 (확인중)

쇼룸 라이브러리를 사용한 웹페이지를 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': {
                let bannerInfo;
              
                try {
                    bannerInfo = params;
                } catch (e) {
                    console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
                    break;
                }

                try {
                    // 원하시는 처리를 추가해 주세요.
                    window.location.href = bannerInfo.linkUrl; // 예시) 링크 이동
                } catch (e) {
                  	console.warn('배너 처리 중 에러가 발생했습니다.', e);
                }
                break;
            }
            // 상품 클릭 시의 이벤트 정의
            case 'sauceShowroomMoveProduct': {
                let productInfo;
                
              	try {
                    productInfo = params;
                } catch (e) {
                    console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
                    break;
                }
                try {
                    // 원하시는 처리를 추가해 주세요.
                    window.location.href = linkUrl; // 예시) 링크 이동
                } catch (e) {
                    console.warn('상품 처리 중 에러가 발생했습니다.', e);
                }
                break;
            }
            // 클립 플레이어 이동 이벤트 정의
            case 'sauceShowroomMoveSauceClipPlayer': {
                let clipInfo;
              
              	try {
                    clipInfo = params;
                } catch (e) {
                    console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
                    break;
                }
                try {
                    // 원하시는 처리를 추가해 주세요.
                    window.location.href = clipInfo.clipUrl; // 예시) 클립 플레이어로 이동
                } catch (e) {
                    console.warn('클립 플레이어 처리 중 에러가 발생했습니다.', e);
                }
                break;
            }
            // 라이브 플레이어 이동 이벤트 정의
            case 'sauceShowroomMoveSauceLivePlayer': {
                let broadcastInfo;
                
                try {
                    broadcastInfo = params;
                } catch (e) {
                    console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
                }
                try {
                    // 원하시는 처리를 추가해 주세요.
                    window.location.href = broadcastInfo.broadcastUrl; // 예시) 라이브 플레이어로 이동
                } catch (e) {
                    console.warn('라이브 플레이어 처리 중 에러가 발생했습니다.', e);
                }
                break;
            }
            // 라이브 알림 받기 클릭 시의 이벤트 정의
            case 'sauceShowroomTurnOnNotification': {
                let notificationInfo;
              
                try {
                    notificationInfo = params;
                } catch (e) {
                    console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
                    break;
                }

                let isSuccess = false;

                // 요청이 온 사용자에게 알림을 신청하는 처리를 추가해 주세요.
                try {
                    isSuccess = await api.postAlarm(...);
                } catch (e) {
                    console.warn('고객사의 알림 신청 중 에러가 발생했습니다.');
                }

                // 성공한 경우, 쇼룸에 알림 신청이 완료되었다는 콜백 브릿지 이벤트를 방송ID와 함께 전달해 주세요. 
                // 해당 처리가 없을 경우, 쇼룸에서는 실패로 간주됩니다.
                if (isSuccess) {
                    try {
                        window.sauceShowroom.sauceShowroomTurnOnNotificationCallback({ broadcastId });
                    } catch (e) {
                        console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
                    }
                }
                break;
            }
            // 라이브 알림 해제 클릭 시의 이벤트 정의
            case 'sauceShowroomTurnOffNotification': {
                let notificationInfo;
              
                try {
                    notificationInfo = params;
                } catch (e) {
                    console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
                    break;
                }

                let isSuccess = false;

                // 요청이 온 사용자에게 알림을 해제하는 처리를 추가해 주세요.
                try {
                    isSuccess = await api.deleteAlarm(...);
                } catch (e) {
                    console.warn('고객사의 알림 해제 중 에러가 발생했습니다.');
                }

                // 성공한 경우, 쇼룸에 알림 해제가 완료되었다는 콜백 브릿지 이벤트를 방송ID와 함께 전달해 주세요.   
                // 해당 처리가 없을 경우, 쇼룸에서는 실패로 간주됩니다.
                if (isSuccess) {
                    try {
                        window.sauceShowroom.sauceShowroomTurnOffNotificationCallback({ broadcastId });
                    } catch (e) {
                        console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
                    }
                }
                break;
            }
            case 'sauceShowroomMemberLogin': {
                // 원하시는 처리를 추가해 주세요.
        				window.location.href = '고객사 로그인 페이지'; // 예시) 로그인 페이지로 이동
                break;
            }
            default:
        }
    }
});

브릿지 목록

배너 클릭

기능이벤트페이로드페이로드 형식
배너 클릭sauceShowroomMoveBanner페이로드JSON문자열

상품 클릭

기능이벤트페이로드페이로드 형식
상품 클릭sauceShowroomMoveProduct페이로드JSON문자열

클립 플레이어 이동

기능이벤트페이로드페이로드 형식
클립 플레이어 이동sauceShowroomMoveSauceClipPlayer페이로드JSON문자열

라이브 플레이어 이동

기능이벤트페이로드페이로드 형식
라이브 플레이어 이동sauceShowroomMoveSauceLivePlayer페이로드JSON문자열

알림 받기/해제

기능이벤트페이로드페이로드 형식
알림 받기sauceShowroomTurnOnNotification페이로드JSON문자열
알림 해제sauceShowroomTurnOffNotification페이로드JSON문자열

회원 로그인

기능이벤트페이로드페이로드 형식
회원 로그인sauceShowroomMemberLogin--

콜백 브릿지 목록

알림 받기/해제 성공

기능이벤트페이로드페이로드 형식
알림 받기 성공sauceShowroomTurnOnNotificationCallback알림받기JSON객체
알림 해제 성공sauceShowroomTurnOffNotificationCallback알림 해제JSON객

Updated about 24 hours ago