Embed on any storefront

How images attach to pages (no guessing)

Niorera does not run PHP or Shopify inside our servers. Your store already knows which product each page is. The template (Liquid, PHP, or theme JSON) inserts that product’s image URL into the embed — you are not matching URLs to pages by hand.

• Recommended: one product template + dynamic image (featured image or metafield).
• Easier install: our loader script + data-license + data-img filled by the theme.
• Backup: one query param images with a base64 payload of many URLs (testing / special cases) — builder below.

Themes: will the embed work on WordPress (and others)?

Other platforms use the same idea as WordPress themes, just under different names: Shopify themes (Liquid), Wix templates, Webflow sites, Squarespace templates, etc. They control layout and styling — not whether Niorera’s iframe or script can run.

WordPress + WooCommerce: the embed code is not tied to one theme brand (Astra, Divi, Storefront, etc.). You add the same iframe or loader in a place your theme allows: child theme template (e.g. single-product.php), a shortcode, a Custom HTML block, or your page builder’s “HTML / code” widget. Any theme that lets you output that HTML/PHP and load an external script will work.

What can block a theme? Strict sanitization that strips <iframe> or <script>, or hosts that forbid third-party embeds — not “wrong theme,” but where you paste the code or host policy.

Product images on another domain (WebGL / sticker): the viewer loads your art through Niorera’s image proxy. The standard approach is to register hostnames on the license (admin API POST /api/addon/license-image-hosts with the customer’s NIOR-… key) — no Hostinger env change per customer, no redeploy. Optional env ADDON_EMBED_IMAGE_HOSTS remains a global fallback.

Platforms that support this pattern

You do not need an account on every platform. Niorera does not host fake Shopify/Wix/Webflow sites. The viewer and iframe behave the same everywhere; only the template that prints the image URL changes.

• Test Niorera itself: open /3d-viewer with ?img= / ?license= and use the URL builder below — that is the real embed surface.
• Test “any platform” without signing up: save a local .html file with the same iframe src or loader markup and a static image URL. If the iframe loads and the art appears, the integration is fine; Shopify would only swap that URL for product.featured_image, etc.
• Your WordPress/WooCommerce site is enough for a full end-to-end test (PHP/theme → real product image → viewer).
• Optional — real Shopify: a Shopify Partners development store is free for building themes and does not require you to run a live paid shop; use it only if you specifically need to validate Liquid in a real theme.

Option A — Loader script (one script, data attributes)

Add the script once, then any container with .niorera-3d-root and data-license. Optional data-img = that page’s product image URL (from your theme).

<script src="https://niorera.com/niorera-embed.js" defer></script>

<div
  class="niorera-3d-root"
  data-license="NIOR-STU-…"
  data-device="phone"
  data-img="PASTE_OR_REPLACE_WITH_LIQUID_PHP"
></div>

Multiple URLs on one line: data-imgs="url1|url2|url3" (pipe-separated, no base64) or data-images="BASE64_FROM_BUILDER_BELOW" (single base64 payload for complex URLs).

Option B — Shopify (Liquid) iframe

{% assign sticker = product.featured_image | image_url: width: 1200 %}
<iframe
  title="Niorera 3D"
  src="https://niorera.com/3d-viewer?license=YOUR_KEY&img={{ sticker | url_encode }}&device=phone"
  style="width:100%;min-height:min(70vh,640px);border:0;border-radius:16px;background:#0a0a12"
  loading="lazy"
  allow="fullscreen"
></iframe>

Option C — WooCommerce (PHP) in theme

Runs on your WordPress server — not on Niorera. Place in single-product.php or a snippet hook.

<?php
$img = wp_get_attachment_image_url( get_post_thumbnail_id(), 'full' );
if ( ! $img ) { return; }
$src = 'https://niorera.com/3d-viewer?license=YOUR_KEY&device=phone&img=' . rawurlencode( $img );
?>
<iframe title="Niorera 3D" src="<?php echo esc_url( $src ); ?>"
  style="width:100%;min-height:min(70vh,640px);border:0;border-radius:16px;background:#0a0a12"
  loading="lazy" allow="fullscreen"></iframe>

One line for all image URLs

Option 1 — query string: ?imgs=URL1|URL2|URL3 (pipe = delimiter; commas work if URLs have no commas). Option 2 — base64 backup: paste one URL per line below; we encode JSON as base64url into a single images= param (best when URLs contain commas or odd characters). The viewer uses the first URL for the current 3D sticker unless the scene is extended for multi-slot. With a valid ?license= key, the server only keeps the first N URLs for your tier (e.g. Studio = 20); the rest are ignored.

WyJodHRwczovL2V4YW1wbGUuY29tL2Eud2VicCIsImh0dHBzOi8vZXhhbXBsZS5jb20vYi5qcGVnIl0

https://niorera.com/3d-viewer?license=YOUR_LICENSE_KEY&device=phone&images=WyJodHRwczovL2V4YW1wbGUuY29tL2Eud2VicCIsImh0dHBzOi8vZXhhbXBsZS5jb20vYi5qcGVnIl0

Test locally (before production is updated)

From the repo root run npm run dev (default http://localhost:3000). Use the same iframe as above but swap the origin for your dev server.

<!-- Local Next.js — replace license + img with yours -->
<iframe
  title="Niorera 3D preview"
  src="http://localhost:3000/3d-viewer?license=NIOR-STU-YOUR-KEY&img=https%3A%2F%2Fexample.com%2Fart.webp&device=phone"
  style="width:100%;min-height:min(70vh,640px);border:0;border-radius:16px;background:#0a0a12"
  loading="lazy"
  allow="fullscreen"
></iframe>

HTTPS WordPress + HTTP localhost: browsers block that (mixed content). A page on https://checkout.niorera.com cannot embed http://localhost:3000. To test the embed inside WordPress, use a local WordPress on http://…, or expose your dev server with an HTTPS tunnel (e.g. ngrok) and use that URL in src. To only verify the viewer, open the /3d-viewer?… URL directly in your browser on the same machine.

Ensure NEXT_PUBLIC_COMING_SOON=false in .env.local so local builds are not redirected to Coming Soon.

Blank iframe in WordPress?

The markup is usually fine. Open your src URL in a new browser tab. If you see the Coming Soon page or a redirect, the storefront host must serve /3d-viewer without sitewide redirects and must not send X-Frame-Options: SAMEORIGIN on that route (cross-origin embeds need frame-ancestors * — see next.config.ts). On WordPress, use the Custom HTML block (not a paragraph), and disable “strip iframes” in security plugins if the editor saves but the front shows empty.