Overview
ARitize 3D's QuickAR enables online retailers to offer Augmented Reality (AR) and 3D product views to shoppers with minimal technical and operational investment. Generally, QuickAR requires the clients technical team to implement a ARitize 3D tag through their tag management system, and ARitize 3D does the rest. With QuickAR, online shoppers can view selected products in AR via their desktop or mobile devices.
Tag Details
Access to modify the product template is required to add the AR and/or 3D buttons onto the product pages.
By following these instructions, the following buttons will be added to your product page:
JavaScript Tag
The loading of the ARitize 3Ds models depends on:
- Parsing the page content for product SKU to determine if a model is available, then passing this value to the ARitize 3D tag.
- If a model is available, ARitize 3D will insert buttons to let the user view it in AR and 3D.
Insertion Process
The process of inserting the JavaScript tag is easy.
- Find your personalized code and client key by following this guide.
- Follow the guide above if you would like to include buttons for ARitize Configurator and ARitize Decorator. If you are interested in learning more, please contact us.
- Past the code below into your tag management system where you want the buttons to appear on your website.
Code to Paste
<script type="text/javascript">
(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');
</script>
<div data-threedy-web-id="replace_id" data-threedy-sku="default" >
<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>
</div>
2. In the code above, the values for data-threedy-web-id and data-threedy-sku need to be set according to the values of the SKU and Option ID in the ARitize portal (https://portal.threedy.ai/). You can find these values by selecting Products in the top navigation which then shows the listing of the products.
- The columns for SKU and Option ID are used by the data attributes data-threedy-web-id and data-threedy-sku.
3. Dynamically change the text replace_id to the products SKU. This can be done using
JavaScript and will depend on your websites platform. If the SKU matches the SKU the
client portal (https://portal.threedy.ai/), the buttons will appear for the user.
4. The data-threedy-sku="default" can be excluded if the Option ID is set to default in
the client portal. Otherwise, replace default in the code above with the Option ID for the
product.
5. The two values, replace_id and default, can be set on user action via JavaScript after
the page has been loaded.
6. Replace the value of replace_client_key in the code above with the client key provided
by ARitize 3D.
Note: The buttons should be hidden (i.e., have display:none CSS style) at page load time, and once ARitize 3D detects a product model is available, the script will toggle them to be visible. Each button is independent of the other, so you can choose to insert both or just one of the buttons.
The ARitize 3D buttons will only appear on products where the values of replace_id and default match a product in the client portal.
For the CSS class 'threedy-embed-btn' it is only needed if you want to match the default ARitize styling (the blue buttons with the icons), otherwise you can remove it and add your own CSS. The other CSS classes and styles are required.
Live Experience
Once the tag is live, two user experiences depend on if the shopper is on a mobile or desktop device:
- Mobile Web - When the shopper interacts with AR/3D controls, the experience launches via WebAR on the mobile device.
- Desktop Web - 3D views launch directly in the desktop browser. However, when the shopper selects the AR option, a QR code is shown through its mobile device camera, launching a mobile WebAR experience.