Zieny 3D & AR — Integration Guide

Add our script once, then choose the AR button style that fits your store.

Option 1: Standard AR Button

Add the script below in your site’s <head> with defer. This automatically displays our standard AR button on every product page where AR is available. 

<script src="https://ar-view-zieny.com/v2-widget.js" defer id="zienyScript"></script>
Heads up: The standard button is plug-and-play. Customization is limited (position, icon, text).

Option 2: Create Your Own AR Button

Want full control over the button’s text, colors, and placement? Use a custom button. The built-in button from Option 1 will be hidden automatically when a custom button is present.

1) Script in the <head>

<script src="https://ar-view-zieny.com/v2-widget.js" defer id="zienyScript"></script>

2) Button on the product page

Place a button with the class zieny-ar-btn. Keep display: none; — Zieny will reveal it automatically when AR is available for that product. 

<button class="zieny-ar-btn" style="display: none; cursor: pointer;">
  View in your space
</button>
Tip: Style your button freely in your theme or CSS file. Target .zieny-ar-btn to match your brand.

Quick Checklist

  • Add the script once in the global <head> (with defer).
  • Use Option 1 for fastest setup, or Option 2 for full control.
  • For custom buttons, keep display: none; so Zieny can show it when AR is available.
  • Test on desktop (3D popup) and mobile (AR view) before publishing.