Overview
If you are unable to add the HTML/JavaScript code on your page directly or you do not have access to your page template, follow these instructions to implement the buttons dynamically using only JavaScript after the page has been loaded. These instructions are intended for developers.
Solution
There are 2 cases which might happen when adding HTML contents to your page dynamically
- When a parent element to which we want to add the ARitize buttons has not existed on the page or in the template, we want to wait until the parent element exists before running a JavaScript code. Once the parent element exists on the page, a new element for the ARitize buttons is created and appended to the parent element.
- When a parent element to which we want to add the ARitize buttons has already existed on the page or in the template, a new element for the ARitize buttons is created and appended to the parent element.
First Case
We will use the MutationObserver constructor available with modern browsers to wait for the parent element to appear. If the location variable exists, the render_ar_buttons JavaScript function will run, and the mutation observer is then disconnected.
arObserver.observe is used to watch for changes in the document.
- childList is set to true to watch for adding or removing of the elements.
- subtree is set true to watch for child element changes.
- attributes is set true to watch for changes to the value of attributes on the node or nodes being monitored.
- characterData is set true to monitor the specified target node (and, if subtree is true, its descendants) for changes to the character data contained with the node or nodes.
Code to Paste:
document.addEventListener("DOMContentLoaded", () => {
(function (sc, d, t, u, k, s, p) {
if (sc.QUICK_AR_INIT) return; sc['QUICK_AR_INIT'] = { key: k };
s = d.createElement(t), p = d.getElementsByTagName('head')[0]; s.src = u; p.appendChild(s);
})(window, document, 'script', '//cdn-quick-ar.threedy.ai/latest/threedy.js', 'REPLACE_CLIENT_KEY');
function render_ar_buttons(sc, d, t, sku, o, p) {
if (sc.QUICK_AR_BTN_INIT) return;
sc['QUICK_AR_BTN_INIT'] = { key: sku };
s = d.createElement(t);
if (!sku) return;
if (!p) return;
s.setAttribute('data-threedy-web-id', sku);
s.setAttribute('data-threedy-sku', o);
s.innerHTML = "<button class='threedy-3d-btn threedy-embed-btn'"
+ " style='display: none;'>View in 3D</button>"
+ "<button class='threedy-qar-btn threedy-embed-btn'"
+ " style='display: none;'>View in AR</button>";
p.appendChild(s);
return;
}
const arObserver = new MutationObserver((mutations, obs) => {
const location = document.getElementById('REPLACE_LOCATION_ID');
if (location) {
render_ar_buttons(window, document, 'div', 'REPLACE_WEB_ID', 'default', location);
obs.disconnect();
return;
}
});
arObserver.observe(document, {
childList: true,
attributes: true,
subtree: true,
characterData: true,
});
});
Note:
- Swap REPLACE_WEB_ID with the Web ID key provided by ARitize 3D.
- Swap REPLACE_LOCATION_ID with the id of the parent div.
- Swap REPLACE_CLIENT_KEY with the Client Key provided by ARitize 3D.
Second Case
Since a parent element to which we want to add HTML contents has already existed on the page or in the template. Then, ARitize buttons are created and appended to the parent element by running the render_ar_buttons JavaScript function.
Code to Paste:
document.addEventListener("DOMContentLoaded", () => {
(function (sc, d, t, u, k, s, p) {
if (sc.QUICK_AR_INIT) return; sc['QUICK_AR_INIT'] = { key: k };
s = d.createElement(t), p = d.getElementsByTagName('head')[0]; s.src = u; p.appendChild(s);
})(window, document, 'script', '//cdn-quick-ar.threedy.ai/latest/threedy.js', 'REPLACE_CLIENT_KEY');
function render_ar_buttons(sc, d, t, sku, o, p) {
if (sc.QUICK_AR_BTN_INIT) return;
sc['QUICK_AR_BTN_INIT'] = true;
s = d.createElement(t);
if (!sku) return; if (!p) return;
s.setAttribute('data-threedy-web-id', sku);
s.setAttribute('data-threedy-sku', o);
s.innerHTML = "<button class='threedy-3d-btn threedy-embed-btn'"
+ " style='display: none;'>View in 3D</button>"
+ "<button class='threedy-qar-btn threedy-embed-btn'"
+ " style='display: none;'>View in AR</button>";
p.appendChild(s); return;
}
const location = document.getElementById('REPLACE_LOCATION_ID');
render_ar_buttons(window, document, 'div', 'REPLACE_WEB_ID', 'default', location);
});
Note:
- Swap REPLACE_WEB_ID with the Web ID key provided by ARitize 3D.
- Swap REPLACE_LOCATION_ID with the id of the parent div.
- Swap REPLACE_CLIENT_KEY with the Client Key provided by ARitize 3D.
Live Experience
Once the tag is live, two user experiences for the 'View in AR' button differ depending on if the shopper is on a mobile or desktop device:
- Mobile Web - When the shopper interacts with the 'View in AR' button, the experience launches via WebAR on the mobile device. Here they can see the model in their space.
- Desktop Web - When the shopper interacts with the 'View in AR' button, a QR code is shown. If scanned with a mobile device camera it will launch the mobile WebAR experience.