Learn how to add the Wall Art widget to your website — from setting up your domain to configuring element parameters for each product.
Open your Wall Art dashboard and click Get code in the Widget block. You'll get a script and element parameters to add to your site.
If you haven't gone through onboarding yet, you'll need to add your domain first — enter your site address as shop.com, no protocol, www, or path. The integration won't work otherwise.
You can update or remove your domain at any time. See the separate guide for details.
Add this to your site's <head> once — it's what makes the widget run:
<script defer src="https://cdn.neurodyn.ai/@neurodyn/room-viewer/dist/room-viewer.embed.min.js"></script>
On a CMS like WordPress, add it to your site template.
Add these to whichever element opens the Wall Art preview. Each product gets its own set of parameters.
Here's what you'll see in the code window:
<button
type="button"
data-neurodyn-room-viewer-dialog
data-neurodyn-room-viewer-type="wallart"
data-neurodyn-room-viewer-src="https://com.com/art/sunset.jpg"
data-neurodyn-room-viewer-name="Sunset Over the Hills"
data-neurodyn-room-viewer-dimension-unit="m"
data-neurodyn-room-viewer-width="1"
data-neurodyn-room-viewer-height="1.5"
data-neurodyn-room-viewer-api-key="pk_your_key">
Preview on your wall
</button>
Update these five parameters for each product:
data-neurodyn-room-viewer-src — a direct URL to the product image in JPEG or PNG. It should open the image file itself, not a webpage.data-neurodyn-room-viewer-name — your product name.data-neurodyn-room-viewer-dimension-unit — units for width and height. Defaults to meters. Options: m, cm, in.data-neurodyn-room-viewer-width — width.data-neurodyn-room-viewer-height — height.Use the image dimensions only — don't include the frame. This keeps the AR placement accurate.
Don't touch these — removing or misconfiguring them will break the widget:
data-neurodyn-room-viewer-dialogdata-neurodyn-room-viewer-type="wallart"data-neurodyn-room-viewer-api-keyOnce the widget is live, use your dashboard to track analytics and manage scenes.
If your product pages are built from a template, you can populate the Wall Art parameters with the same data — no need to edit the code by hand for every product.
Here's what it might look like in a template:
<button
type="button"
data-neurodyn-room-viewer-dialog
data-neurodyn-room-viewer-type="wallart"
data-neurodyn-room-viewer-src="{{ product.image }}"
data-neurodyn-room-viewer-name="{{ product.name }}"
data-neurodyn-room-viewer-dimension-unit="cm"
data-neurodyn-room-viewer-width="{{ product.width }}"
data-neurodyn-room-viewer-height="{{ product.height }}"
data-neurodyn-room-viewer-api-key="pk_your_key"
>
Preview on your wall
</button>In this example, product.image, product.name, product.width, and product.height are automatically replaced with the current product's data. Variable names and syntax vary by platform, so don't copy the example as is.
If you built the site yourself, swap in the variables from your product page template. If a developer set it up, pass this guide along to them.
Join our Discord to ask questions about these instructions or get technical support. If something isn’t working, open a ticket and our team will investigate.
