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:
}
}
});
