<viewer-3dvue> is a native Web Component. No dependencies, no additional plugin. It integrates into any WooCommerce template — single-product.php, a shortcode, or a custom Gutenberg HTML block.
add_action('wp_enqueue_scripts', function() { wp_enqueue_script( 'viewer-3dvue', 'https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js', [], null, true ); });
<viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- That's it. -->
A native Web Component — no React, Vue, or jQuery dependency. Compatible with all WordPress themes and page builders (Elementor, Divi, Bricks).
Use wp_enqueue_script() in your functions.php to load the component. The final true loads it in the footer — recommended to avoid blocking rendering.
src attribute on the component is the URL specific to your configurator, provided by 3DVue at delivery.
add_action('wp_enqueue_scripts', function() { wp_enqueue_script( 'viewer-3dvue', 'https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js', [], null, true ); }); // Or via WPCode — HTML snippet // <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
Paste the tag in your product template, in a PHP shortcode, or in a Gutenberg HTML block. Two required attributes: name (unique identifier) and src (your configurator URL provided by 3DVue).
<viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- With debug enabled --> <viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
Add the viewer-3dvue attributes on your native WooCommerce <select> variation elements or on your custom swatches. The component listens automatically — no JS to write.
<!-- On an existing WooCommerce select --> <select name="attribute_pa_colour" viewer-3dvue="monViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1,2" > <option value="0n">Black</option> <option value="1a">White</option> <option value="2b">Natural oak</option> </select> <!-- Or on a custom swatch button --> <button viewer-3dvue="monViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"2b","3":"0n"}' >Oak / Black</button>
The component automatically listens to click and change events on any element carrying the right attributes. Compatible with native WooCommerce selects and swatch plugins (Variation Swatches, etc.).
<button viewer-3dvue="monViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","3":"2b"}' > Grey velvet fabric </button> // {"meshIndex": "materialId"} // Index 0 reserved — starts at 1
<select>. The viewer syncs automatically.<select name="attribute_pa_colour" viewer-3dvue="monViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1,3" > <option value="0n">Black</option> <option value="1a">White</option> </select> // viewer-3dvue-mesh="1,3" // applies to mesh 1 AND mesh 3
Full programmatic control — useful for synchronising the viewer with WooCommerce variations via JS, or for advanced use cases like image capture or BAT export.
const viewer = document.querySelector('viewer-3dvue[name="monViewer"]'); // Sync with WooCommerce variations document.querySelector('.variations select') .addEventListener('change', (e) => { viewer.setMaterial({ "1": e.target.value }); });
// On object 0 (default) viewer.setMaterial({ "1": "0n", "3": "2b" }); // On a specific segment (multi-part product) viewer.setMaterial({ "1": "1a" }, 1); // setMaterial(materialList, objectIndex = 0)
// Load a different model (e.g. shape change) viewer.loadModel("AB01-CD02"); // Add a component to the existing model // E.g: add an armrest, a shelf, a leg viewer.addModel("EF03"); // Remove a component (index starts at 0) viewer.removeModel(1); // ⚠ Cannot remove the last remaining segment
viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { const { base64, error } = e.detail; if (error) return; // Store in a hidden field for the WC order document.querySelector('input[name="config_preview"]').value = base64; });
The SVG API lets you add text and images directly onto the 3D product via dropzones defined in the model. Used for customisable products — marking, logo upload, text engraving.
| Method | Description |
|---|---|
addSVGText(text, opts) |
Adds text to a dropzone. Options: fill, fontFamily, selectable |
addSVGImage(source, opts) |
Adds an image (File or ArrayBuffer). Zero-copy via Transferable Objects. |
setSVGElementParam(param, value, id) |
Modifies a parameter of an SVG element. id=null targets the selected element. |
exportSVG() |
Generates the SVG file of the configured product — print-ready proof. |
// 1. Upload logo from a WooCommerce file input const file = input.files[0]; await viewer.addSVGImage(file, { dropzone: "dropzone001", selectable: true }); // 2. Custom text (engraving, marking) viewer.addSVGText("My text", { fill: "#ffffff", fontFamily: "Arial" }); // 3. Export the SVG proof for production viewer.exportSVG(); viewer.addEventListener("onSVGExportComplete", (e) => { const { path } = e.detail; // path = URL of the print-ready SVG file });
API reference, HTML attributes, events, WooCommerce PHP examples. Everything is documented and kept up to date.
View documentationNo automated ticketing. You speak directly with Matthieu, the developer who designed the API. Response within 24 hours.
Book a callTest the configurator in real conditions before integrating. See exactly what your customers will see on your WooCommerce store.
View demoYou manage the code on the WooCommerce side, we handle everything else — modelling, materials, configuration. In 30 minutes, we'll show you what we can do with your catalogue.