Перейти к содержимому
TogenarTogenar

Embed quick start

Это содержимое пока не доступно на вашем языке.

The embed is a standard web component: one script tag, one element, zero dependencies, 3.4 KB gzipped. It drops into React, Vue, Shopify Liquid or plain HTML without touching the rest of your page.

1. Drop it in

Section titled “1. Drop it in”
<script type="module" src="https://model.togenar.com/embed/togenar-embed.js"></script>


<togenar-embed
  id="tg"
  project="YOUR_PROJECT_ID"
  configurator
  aspect="1/1">
</togenar-embed>

That’s the whole install. The built-in option panel, configuration summary, share link and AR button ship with it.

YOUR_PROJECT_ID is the ID of a published project — copy it from the project’s Share drawer in the panel. Unpublished (draft) projects only render with an owner preview token (see the preview attribute).

2. Size it

Section titled “2. Size it”

Two sizing modes — pick one:

<!-- Aspect-ratio box (default 16/9): -->
<togenar-embed project="…" configurator aspect="1/1"></togenar-embed>


<!-- Fixed height: -->
<togenar-embed project="…" configurator height="520px"></togenar-embed>

The element is display: block; width: 100% — it fills whatever container you give it.

3. Common variants

Section titled “3. Common variants”
<!-- Viewer only (no option picking): drop the `configurator` attribute -->
<togenar-embed project="…"></togenar-embed>


<!-- Turkish UI -->
<togenar-embed project="…" configurator lang="tr"></togenar-embed>


<!-- Device-adaptive AR launcher page instead of the inline viewer -->
<togenar-embed project="…" mode="launcher"></togenar-embed>


<!-- Headless: hide the built-in panel, drive everything from your own UI -->
<togenar-embed project="…" configurator picker="off"></togenar-embed>

Headless mode keeps the full configuration engine and Host SDK running — see Build your own UI.

Next steps

Section titled “Next steps”