Developer SDK
Embarque AR 3D em 1 linha.
Web Component nativo. Funciona em qualquer site, framework ou CMS. Suporta viewer, inspeção guiada e object tracking.
Viewer
3D interativo + AR no celular. Default.
Inspect
Hotspots de checkpoints e desvios sobrepostos no modelo.
Object Tracking
Silhueta CAD alinha com peça real via câmera.
1. Viewer básico
Cole no <body>. Renderiza viewer 3D com botão AR.
<script src="https://sintar.app/widget.js" defer></script>
<sintar-viewer slug="meu-produto"></sintar-viewer>2. Modo Inspect (Twyn-style)
Mostra checkpoints e desvios como hotspots clicáveis.
<sintar-viewer
slug="motor-v8"
mode="inspect"
height="600px"
></sintar-viewer>3. Object Tracking (VisionLib-lite)
Sobreposição de silhueta CAD para alinhamento manual com a peça real.
<sintar-viewer
model-id="abc-123"
tracking="object"
theme="dark"
></sintar-viewer>4. React / Next.js
Custom element funciona em qualquer framework.
// React / Next.js
import Script from "next/script";
export default function ProductPage() {
return (
<>
<Script src="https://sintar.app/widget.js" strategy="lazyOnload" />
{/* @ts-ignore — custom element */}
<sintar-viewer slug="meu-produto" mode="inspect" />
</>
);
}Atributos
| Atributo | Valores | Descrição |
|---|---|---|
| slug | string | Identificador público do widget config. |
| model-id | uuid | Use direto sem criar widget config (modo raw). |
| mode | viewer | inspect | Renderiza hotspots de inspeção quando inspect. |
| tracking | floor | object | object ativa overlay de silhueta para alinhamento. |
| theme | auto | dark | light | Background e cores. |
| height | css length | "480px", "60vh", etc. |
Pronto para embarcar?
Crie um widget no painel, copie o slug e cole o snippet no seu site.