Pro · Skid-Steer Loader
Multilingual feature annotations powered by VNTANA
Live 3D · EN · FR · ES · DE
How It Works
Translations live as product attributes in VNTANA — a key-value store attached to every asset. Your product page reads them at load time and applies them to the 3D viewer. No backend changes, no CMS workflow, no per-language page variants.
One row per hotspot, one column per language. Takes about 15 minutes for a full product page.
Submit the spreadsheet and a script (or automation tool like n8n) calls the VNTANA API to write the translations as product attributes. Any language, any tool.
The product page reads translations on load. Language switching is instant with no page reload and no CMS publish step.
// 1. Fetch translations stored in VNTANA product attributes const res = await fetch(`https://api.vntana.com/products/${PRODUCT_UUID}/organizations/${ORG}/clients/${WS}`); const { response: product } = await res.json(); // 2. Attributes keyed as "hotspot_translations_fr", "hotspot_translations_de", etc. const translations = {}; for (const [key, value] of Object.entries(product.attributes ?? {})) { const match = key.match(/^hotspot_translations_(\w+)$/); if (match) translations[match[1]] = JSON.parse(value); } // 3. Apply when the visitor selects a language function setLanguage(lang) { viewer.querySelectorAll('vntana-hotspot').forEach(hs => { const t = translations[lang]?.[hs.dataset.uuid]; if (t) { hs.setAttribute('title', t.title); hs.setAttribute('body', t.description); } }); }