Now that you have your repository of 3D objects, it’s time to publish them on your website.
There are 2 main ways of integrating 3D models into web pages.
For integrating multiple 3D models on various product pages based on a unique identifier.
<aside> 💡 Ensure your 3D model SKU/UUID matches the SKU on your website page from the 3D editor
</aside>
Copy your JS snippet from the Integration section in the Imersian Portal
Add copied JS snippet to your website at the end of the <body> tag.
...
<script type="text/javascript">
var ImersianWebClient;
(function() {
function asyncLoad() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = "<https://static.imersian.com/bundled.js>";
s.async = true;
s.onload = function() {
ImersianWebClient = window.ImersianWebClient.default;
ImersianWebClient.config('asdadp-sdwer-e45df-344345', 'viewer.imersian.com');
ImersianWebClient.init();
};
s.onerror = function() { alert("Loading failed!"); }
document.head.appendChild(s);
};
if(window.onload) {
window.attachEvent('onload', asyncLoad);
} else {
window.addEventListener('load', asyncLoad, false);
}
})();
</script>
</body>
Imersian JS library needs to know which SKU should be displayed on the current page. Therefore, add the following input hidden field anywhere on your web page. current sku is the value of the SKU or UUID. DO NOT change its class.
<input type="hidden" class="imersian-variant-sku" value="{{current sku}}" />
Imersian JS Client library provides a range of functions to provide 3D and AR features to your website. Map these functions to custom buttons on your website. For example, you can add onClick events to your custom buttons.
Here is the full list of functions,