Guides

Showroom Bridge Guide

The Showroom Bridge allows you to implement custom behaviors for specific events such as player navigation, banner clicks, product clicks, and enabling/disabling live notifications.

You can implement event handlers depending on where you want the custom behavior to occur.

πŸ“˜

  • If you use a web page that includes the Showroom library inside an iframe, you must implement the bridge events.
  • Please refer to the section "When Implementing in the Parent Page."
  • If a bridge event function is not defined, the Showroom will execute its default behavior, so please implement bridge event functions only for features you need to customize.

When Implementing Within the Same Page

You can implement the behavior by defining functions on the window.sauceShowroom object in the web page that uses the Showroom library.

πŸ“˜

  • Only define functions for the events you wish to customize on the window.sauceShowroom object.
  • If a function is defined without any logic inside, the feature will not work properly.
// Please define functions only for the events you wish to customize on the window.sauceShowroom object.
window.sauceShowroom = {
    // Defining the Event for Banner Clicks
    sauceShowroomMoveBanner: (jsonStr) => {
        let bannerInfo;
      
        try {
            bannerInfo = JSON.parse(jsonStr);
        } catch (e) {
          	console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
            return;
        }
        try {
            // Please add your desired handling logic.
            window.location.href = bannerInfo.linkUrl; // eg.) Redirect Link
        } catch (e) {
          	console.warn('An error occurred while processing the banner.', e);
        }
  	},
    // Event definition for product click
    sauceShowroomMoveProduct: (jsonStr) => {
        let productInfo;
      
        try {
            productInfo = JSON.parse(jsonStr);
        } catch (e) {
          	console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
            return;
        }
        try {
            // Please add your desired handling logic.
            window.location.href = productInfo.linkUrl; //  e.g., redirect link
        } catch (e) {
          	console.warn('An error occurred while processing the product.', e);
        }
  	},
    // Event definition for moving to clip player
    sauceShowroomMoveSauceClipPlayer: (jsonStr) => {
        let clipInfo;
      
        try {
            clipInfo = JSON.parse(jsonStr);
        } catch (e) {
          	console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
            return;
        }
        try {
            // Please add your desired handling logic.
            window.location.href = clipInfo.clipUrl; // e.g., redirect to clip player
        } catch (e) {
          	console.warn('An error occurred while processing the clip player.', e);
        }
  	},
    // Event definition for moving to live player
    sauceShowroomMoveSauceLivePlayer: (jsonStr) => {
        let broadcastInfo;
      
        try {
            broadcastInfo = JSON.parse(jsonStr);
        } catch (e) {
          	console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
            return;
        }
        try {
            // Please add your desired handling logic.
            window.location.href = broadcastInfo.broadcastUrl; //e.g., redirect to live player
        } catch (e) {
          	console.warn(' An error occurred while processing the live player.', e);
        }
    },
    //  Event definition for turning on live notification
    sauceShowroomTurnOnNotification: async (jsonStr) => {
        let notificatinoInfo;
      
        try {
            notificatinoInfo = JSON.parse(jsonStr);
        } catch (e) {
          	console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
            return;
        }
    
    		let isSuccess = false;
    
        // dd logic to subscribe the user to notifications.
        try {
            isSuccess = await api.postAlarm(...);
        } catch (e) {
            console.warn('An error occurred while subscribing the user to notifications.');
        }
      
        // If successful, send a callback event to the showroom with the broadcastId.
        // If this is not done, the showroom will consider the request as failed.
        if (isSuccess) {
            try {
                window.sauceShowroom.sauceShowroomTurnOnNotificationCallback({ broadcastId });
            } catch (e) {
                console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
            }
        }
    },
    // Event definition for turning off live notification
    sauceShowroomTurnOffNotification: async (jsonStr) => {
        let notificatinoInfo;
      
        try {
            notificatinoInfo = JSON.parse(jsonStr);
        } catch (e) {
          	console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
            return;
        }
    
    		let isSuccess = false;
    
        // Add logic to unsubscribe the user from notifications.
        try {
          	isSuccess = await api.deleteAlarm(...);
        } catch (e) {
          	console.warn(' An error occurred while unsubscribing the user from notifications.');
        }
      
        // If successful, send a callback event to the showroom with the broadcastId.  
        // If this is not done, the showroom will consider the request as failed.
        if (isSuccess) {
            try {
              	window.sauceShowroom.sauceShowroomTurnOffNotificationCallback({ broadcastId });
            } catch (e) {
              	console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
            }
        }
    },
    // Event definition for login request
    sauceShowroomMemberLogin: () => {
        // Please add your desired handling logic.
        window.location.href = 'Your login page URL'; // e.g., redirect to login
    },
};


When Implemented in the Parent Page (Pending Confirmation)

If the webpage using the Showroom library is embedded within an iframe, it can be implemented in the parent page using a message event listener.

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) {
            // Defining the Event for Banner Clicks
            case 'sauceShowroomMoveBanner': {
                let bannerInfo;
              
                try {
                    bannerInfo = params;
                } catch (e) {
                    console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
                    break;
                }

                try {
                    // Please add your desired handling logic.
                    window.location.href = bannerInfo.linkUrl; // e.g., Redirect to link
                } catch (e) {
                  	console.warn('	An error occurred while processing the banner.', e);
                }
                break;
            }
            // Defining the Event for Product Clicks
            case 'sauceShowroomMoveProduct': {
                let productInfo;
                
              	try {
                    productInfo = params;
                } catch (e) {
                    console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
                    break;
                }
                try {
                    // Please add your desired handling logic.
                    window.location.href = linkUrl; //  e.g., Redirect to link
                } catch (e) {
                    console.warn('	An error occurred while processing the product.', e);
                }
                break;
            }
            //  Defining the Event for Clip Player Navigation
            case 'sauceShowroomMoveSauceClipPlayer': {
                let clipInfo;
              
              	try {
                    clipInfo = params;
                } catch (e) {
                    console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
                    break;
                }
                try {
                    // Please add your desired handling logic.
                    window.location.href = clipInfo.clipUrl; // e.g., Redirect to clip player
                } catch (e) {
                    console.warn('Defining the Event for Clip Player Navigation', e);
                }
                break;
            }
            // Defining the Event for Live Player Navigation
            case 'sauceShowroomMoveSauceLivePlayer': {
                let broadcastInfo;
                
                try {
                    broadcastInfo = params;
                } catch (e) {
                    console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
                }
                try {
                    // Please add your desired handling logic.
                    window.location.href = broadcastInfo.broadcastUrl; // e.g.) Live Player Navigation
                } catch (e) {
                    console.warn('An error occurred while processing the live player.', e);
                }
                break;
            }
            // Defining the Event for Turning On Notification
            case 'sauceShowroomTurnOnNotification': {
                let notificationInfo;
              
                try {
                    notificationInfo = params;
                } catch (e) {
                    console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
                    break;
                }

                let isSuccess = false;

                // Add logic to subscribe the user who triggered the request.
                try {
                    isSuccess = await api.postAlarm(...);
                } catch (e) {
                    console.warn('	An error occurred while subscribing to notifications.');
                }

                // If this process is successed, send a callback bridge event with the broadcast ID to Showroom to confirm notification cancellation.
                //If this process is omitted, Showroom will consider it a failure.
                if (isSuccess) {
                    try {
                        window.sauceShowroom.sauceShowroomTurnOnNotificationCallback({ broadcastId });
                    } catch (e) {
                        console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
                    }
                }
                break;
            }
            // Defining the Event for Turning Off Notification
            case 'sauceShowroomTurnOffNotification': {
                let notificationInfo;
              
                try {
                    notificationInfo = params;
                } catch (e) {
                    console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
                    break;
                }

                let isSuccess = false;

                // Add logic to subscribe the user who triggered the request.
                try {
                    isSuccess = await api.deleteAlarm(...);
                } catch (e) {
                    console.warn('An error occurred while unsubscribing from notifications.');
                }

                // If this process is successed, send a callback bridge event with the broadcast ID to Showroom to confirm notification cancellation.
                // If this process is omitted, Showroom will consider it a failure.
                if (isSuccess) {
                    try {
                        window.sauceShowroom.sauceShowroomTurnOffNotificationCallback({ broadcastId });
                    } catch (e) {
                        console.warn('If an error occurs in this part, please contact your Mobidoo representative with the error details.', e);
                    }
                }
                break;
            }
            case 'sauceShowroomMemberLogin': {
                // Please add your desired handling logic.
        				window.location.href = '	Client Login Page'; // e.g.) move to the log in page
                break;
            }
            default:
        }
    }
});


Bridge List

Banner Click

FeatureEventPayloadPayload Format
Banner ClicksauceShowroomMoveBannerpayloadJSON string

Product Click

FeatureEventPayloadPayload Format
Product ClicksauceShowroomMoveProductpayloadJSON string

Move to Clip Player

FeatureEventPayloadPayload Format
Move to Clip PlayersauceShowroomMoveSauceClipPlayerpayloadJSON string

Move to Live Player

FeatureEventPayloadPayload Format
Move to Live PlayersauceShowroomMoveSauceLivePlayerpayloadJSON string

Turn on/off notification

FeatureEventPayloadPayload Format
Turn On NotificationsauceShowroomTurnOnNotificationpayloadJSON string
Turn Off NotificationsauceShowroomTurnOffNotificationpayloadJSON string

Member Login

FeatureEventPayloadPayload Format
Member LoginsauceShowroomMemberLogin--

Callback bridge list

Notification subscribe/ Unsubscribe Success

FeatureEventPayloadPayload Format
Notification Subscribe SuccesssauceShowroomTurnOnNotificationCallbackTurn On NotificationsJSON object
Notification Unsubscribe SuccesssauceShowroomTurnOffNotificationCallbackTurn Off NotificationJSON object