For web developers

Adding the View in your garden button

Two lines in the product template. We send a ready-filled version for your shop, with each product page set to open at its own size and options. This page explains what it does, what it loads and how to take it off.

Install

On Shopify (Online Store 2.0 themes):

Duplicate your live theme, and work on the copy.
Customize > Products > Default product > Add block > Custom liquid.
Paste the snippet we sent. It renders only on the products it names, so it can go in the default template.
Drag the block to where you want it among the product information blocks (just below Add to basket works well; on phones that column sits under the photos).
Save, then send us the preview link (Share preview). We check it on an iPhone and an Android phone before it goes live.
Publish the copy when you're both happy.

On any other platform (WooCommerce, Magento, a custom site), paste the two lines into the product template or the product's content, with the product's own options:

<script type="module" src="https://ar.garden/plugin/immersi-ar.js"></script>
<immersi-ar product="https://ar.garden/plugin/your-range.json" size="m"></immersi-ar>

On WooCommerce, use a hook in the product template (for example woocommerce_after_single_product_summary) or a Custom HTML block: WordPress removes scripts from product descriptions for users who aren't administrators.

Load the script from ar.garden as it is, rather than copying it into your theme: model updates and switching off both depend on it. The script tag can appear more than once on a page; it registers only once.

To keep the page below from jumping as the button loads, reserve its room in your stylesheet. This is the 3D view's own shape; the option rows under it still appear when it loads:

immersi-ar { display: block; }
immersi-ar:not(:defined) { aspect-ratio: 4 / 3.2; max-height: 70vh; }

Attributes

`product`	The product file we give you (one per product family).
`size`, `wood`, `wall`, …	Preselect any option by its id, as listed in the snippet. Changing one later updates the model, so your variant picker can drive it: `document.querySelector('immersi-ar').setAttribute('size', '8x10')`. The option names and ids are in the product file (`options[].key`, `choices[].id`). For Shopify we send the few lines that do this from the product form.
`options="view footprint"`	Shows only these rows of buttons; the rest keep the preselected choice.
`label`	Replaces the title, for example `label="Barrel sauna {size}"`.
`motion="off"`	Stops the gentle turn the model makes until it is first touched (it also stops for visitors who ask for reduced motion).
`stats="off"`	Stops the anonymous usage counts (see Privacy).
`credit="off"`, `note="off"`	Hide the small credit and the product note under the model.
CSS	Takes your page's font. Colours and corners: `--iar-accent`, `--iar-accent-ink`, `--iar-ink`, `--iar-muted`, `--iar-line`, `--iar-surface`, `--iar-stage`, `--iar-radius`, on the element or any parent.

What it loads, and when

At once: the script (about 12 KB), the product file and the product's still picture (a few KB each), which shows straight away.
Nothing heavier until the button is within a screen of being seen and the browser is idle (at most 1.2 s after the page has loaded). A button lower down the page, or in a hidden tab, costs only those few KB until then.
Then: the 3D viewer (Google's open-source model-viewer, about 290 KB), the model (about 250 to 650 KB, depending on the product), its lighting (23 KB) and the mesh decoder (95 KB). All from ar.garden, compressed, and cached; the viewer, lighting and decoder for a year.
No requests to any other domain. (If your theme already runs Google's model-viewer, the button uses that copy and leaves its settings alone, including where it fetches its mesh decoder from.)
The phone's own AR (Quick Look on iPhone, Scene Viewer on Android) opens only when the shopper taps the button; on iPhone that tap downloads the AR file (under 2 MB).

Lab tools such as PageSpeed Insights draw 3D without a graphics chip, so they overstate the cost of the gentle turn; motion="off" removes it if you'd rather.

Privacy

No cookies, no local storage, and nothing kept about the shopper: it stores nothing on the shopper's device, and the counts it sends to ar.garden keep no IP addresses or user agents, only daily totals per product (opens, AR taps and options tried). stats="off" stops them.

What it can touch

It draws inside its own element (a shadow root) and reads nothing else on your page: no cookies, basket, forms or customer data. The only thing it changes outside itself is the address bar on a phone that opened the page from its QR code: it removes its own iar- parameters. It loads as a module, so it never blocks your page; if ar.garden can't be reached, the block stays empty. The source is readable at ar.garden/plugin/immersi-ar.js.

Content Security Policy

If your site sends one, add these sources (tested with a strict policy):

script-src  https://ar.garden 'wasm-unsafe-eval'
worker-src  blob:
connect-src https://ar.garden blob:
img-src     https://ar.garden blob: data:
style-src   'unsafe-inline'

'wasm-unsafe-eval' is for the mesh decoder, which is WebAssembly; worker-src blob: is the thread it decodes in.

Events for your analytics

The element fires two events, which bubble: immersi-ar-tap every time a shopper taps View in your garden (detail.mode is qlook on iPhone, scene on Android (webxr once Google's AR viewer has closed straight away on that phone and the block has switched to the browser's own AR), webxr on other phones, or qr when a computer shows the QR code), and immersi-change when the block first shows and each time an option or view changes. Each carries the current choices. To send them to Google Analytics 4 through Tag Manager:

<script>
  document.addEventListener('immersi-ar-tap', (e) => window.dataLayer?.push({ event: 'view_in_garden', ...e.detail }));
  document.addEventListener('immersi-change', (e) => window.dataLayer?.push({ event: 'view_in_garden_option', ...e.detail }));
</script>

Switching off and removing

If the service stops, we switch it off from our side: the button disappears and your page needs no change. You can also remove it at any time by deleting the block or the two lines.

Help

ar.garden is run by Sohus Ltd. Email Ben Huss at ben@immersi.co.uk, or ask for a 15-minute screen share while you add it.