Skip to content

Embeddable viewer

One script tag and a custom element renders your dish in 3D, with a one-tap AR button on phones. No build step, no framework, no data leaves your page except to TruePlate.

See it live

This is the stock viewer, rendered right here with a bundled sample dish. It is exactly what the snippet below produces before you touch anything, and it adapts to the device on its own: web visitors get an inline 3D view, phones go straight to AR.

On the web

Tap to load the interactive 3D view: orbit, zoom, inspect. The 3D runtime only downloads after the tap.

On phones

The same embed on a phone is AR-first: one tap opens the dish in the visitor's space, true to size, via AR Quick Look (iOS) or Scene Viewer (Android). Reading this on your phone? The viewer on the left already behaves this way.

The demo ships with the script: it needs no key, makes no API call, and never counts against anyone's embed quota. You can drop <trueplate-viewer demo> on your own page to try the look before creating a key.

Install

Copy the default embed, swap in your item id and publishable key, and it renders the same viewer for your real dish:

html
<script src="https://www.trueplate.ai/embed/v1.js" async></script>

<trueplate-viewer
  item-id="ITEM_ID"
  publishable-key="tp_pk_live_YOUR_PUBLISHABLE_KEY">
</trueplate-viewer>
React / Vue: use publishable-key (or data-key). The bare key attribute is reserved by both frameworks and never reaches the DOM.

The default look is intentionally neutral so it sits well on any menu page. Everything beyond that is yours to change on your end:

  • Size and placement: it's a plain block element. Set a width/height (or grid/flex constraints) on <trueplate-viewer> and it fills the box; unstyled it renders a square.
  • Corners and framing: wrap it in your own card, override border-radius on the element, add your shadow.
  • Skip the poster step: add the autoload attribute and desktop visitors get the rotating 3D view immediately instead of a poster + button.

Get a publishable key

In your dashboard: Developers → API keys → New key → Publishable. Add every website origin that embeds the viewer to the key's allow-list:

  • Exact origin: https://www.example.com
  • Wildcard subdomain: https://*.example.com
Publishable keys are safe to ship in your page's HTML: they can only reach the embed endpoint, and only from the origins you list. They can't read your full menu. They do receive short-lived signed model URLs for the specific items you embed (that is what the viewer renders), so embedding an item makes its 3D model viewable to that page's visitors while the page is open.

Building on a staging site? Create the key in the Test environment instead: a tp_pk_test_…key behaves identically but is never billed, and the viewer shows a visible "Test mode" badge. See Test mode.

How it behaves

  • Shows a poster image first; loads the 3D runtime only when the visitor taps it.
  • Desktop: an orbit-controls 3D viewer. iOS: AR Quick Look. Android: Scene Viewer.
  • Inside an in-app browser (Instagram, Facebook…), where AR can't launch, it prompts the visitor to open in their real browser.
  • Refetches signed model URLs automatically when they expire.

Every load counts as one embed view against your plan's included quota. See the limits.