byrstViewInRoom
Version 1.0.3
The byrstViewInRoom JavaScript library empowers you to seamlessly integrate a "view in your room" feature into your website. This allows one to effortlessly visualize 3D models within their own environment using Augmented Reality (AR) on their mobile devices. For users on AR-compatible mobile devices, the AR experience launches automatically. For those on desktops or non-AR-capable devices, the library provides a QR code, which can be easily scanned with a smartphone to initiate the AR experience on a compatible device.
Function Signature:
JavaScript
<script defer src="[https://cdn.byrst.com/scripts/view-in-room@1.0.3/view-in-room.min.js](https://cdn.byrst.com/scripts/view-in-room@1.0.3/view-in-room.min.js)" type="text/javascript"
triggerElementId="YOUR_TRIGGER_ELEMENT_ID"
projectId="YOUR_PROJECT_ID"
lockScale="true"
placement="floor"
qrCodeElementId="YOUR_QRCODE_ELEMENT_ID"
triggerCallback="yourTriggerCallbackFunctionName"></script>
Parameters:
triggerElementId(required): The HTML ID of the element that will trigger the "view in room" action. When this element is clicked, the QR code will be generated (or AR experience launched on compatible devices). (Renamed fromtargetElementIdin previous versions)projectId(required): Your unique Project ID. This ID is essential to access the correct 3D model associated with your project.lockScale(optional, boolean): Determines if scaling of the 3D model in AR is restricted.true: Scaling is disabled, maintaining the model's original size.falseor not present: Scaling is enabled, allowing users to resize the model in their AR environment. (Default)
placement(optional, string): Specifies the default placement of the 3D model in the AR environment.'floor': The model will be placed on the floor. (Default)'wall': The model will be placed on a wall.
qrCodeElementId(optional, string): The HTML ID of an element on your page where you want the QR code to be inserted directly. If specified, the QR code will be embedded within this element instead of appearing in the default modal. If not specified, the default modal behavior is used.triggerCallback(optional, string): The name of a JavaScript function (without parentheses or quotes) that will be executed after the "view in room" action is triggered (i.e., when thetriggerElementIdelement is clicked), and after the library's default processing is complete. This allows you to implement custom actions, such as analytics tracking or UI updates, when the view-in-room experience is initiated.
Simple Usage:
Assign a unique id to a button or any HTML element. Use that id as the triggerElementId. Replace YOUR_PROJECT_ID with your actual Project ID to instantly enable the "View in Room" feature on your website with default settings.
<!DOCTYPE html>
<html>
<head>
<title>Simple Byrst View in Room Example</title>
</head>
<body>
<button type="button" id="view-in-room-button-button">View in your Room</button>
<script defer src="[https://cdn.byrst.com/scripts/view-in-room@1.0.3/view-in-room.min.js](https://cdn.byrst.com/scripts/view-in-room@1.0.3/view-in-room.min.js)"
type="text/javascript"
triggerElementId="view-in-room-button-button"
projectId="YOUR_PROJECT_ID">
</script>
</body>
</html>
Advanced Usage:
To integrate the byrstViewInRoom library into your website, and to have full control over the way the QR code is presented we provide this more advanced example. Below is an example demonstrating the integration, including the new qrCodeElementId and triggerCallback parameters for a custom window for launching the QR code:
<!DOCTYPE html>
<html>
<head>
<title>Byrst View in Room Example</title>
</head>
<body>
<button type="button" id="view-in-room-btn">View in your Room</button>
<div id="qrCodePlaceholder"></div>
<div id="qrcode-window" style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 1000;">
<div style="background-color: white; padding: 20px; border-radius: 8px; text-align: center;">
<div id="byrst_qr_code_src"></div>
<button id="qr-code-close-btn" style="margin-top: 10px;">Close QR Code</button>
</div>
</div>
<script>
function loadByrstScript() {
const artworkId = "01JP3GDP4R75H0BVKH59TCARRS";
const viewInRoomButton = document.getElementById("view-in-room-btn");
if (viewInRoomButton) {
viewInRoomButton.disabled = true;
}
const script = document.createElement("script");
script.src = "[https://cdn.byrst.com/scripts/view-in-room@1.0.3/view-in-room.min.js](https://cdn.byrst.com/scripts/view-in-room@1.0.3/view-in-room.min.js)";
script.type = "text/javascript";
script.defer = true;
script.setAttribute("triggerElementId", "view-in-room-btn");
script.setAttribute("projectId", artworkId);
script.setAttribute("lockScale", "true");
script.setAttribute("placement", "wall");
script.setAttribute("qrCodeElementId", "qrCodePlaceholder");
script.setAttribute("triggerCallback", "myTriggerCallback");
document.head.appendChild(script);
script.onload = () => {
console.log("Byrst script loaded successfully.");
if (viewInRoomButton) {
viewInRoomButton.disabled = false;
}
};
script.onerror = () => {
console.error("Failed to load Byrst script.");
if (viewInRoomButton) {
viewInRoomButton.disabled = false;
}
};
}
window.myTriggerCallback = () => {
const qrCodeWindow = document.getElementById("qrcode-window");
if (qrCodeWindow) {
try {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "qr_code_opened",
});
console.log("qr code opened event pushed (dataLayer)");
} catch (error) {
console.error("Error pushing qr_code_opened event:", error);
}
qrCodeWindow.style.display = "flex";
} else {
console.error("qrcode-window element not found in myTriggerCallback");
}
};
const qrCodeCloseButton = document.getElementById("qr-code-close-btn");
const qrCodeWindow = document.getElementById("qrcode-window");
if (qrCodeCloseButton && qrCodeWindow) {
qrCodeCloseButton.addEventListener("click", () => {
qrCodeWindow.style.display = "none";
});
}
loadByrstScript();
</script>
</body>
</html>