Un configuratore 3D
su WordPress.
2 righe di codice.
<viewer-3dvue> è un Web Component nativo. Funziona in qualsiasi contesto WordPress — widget HTML di Elementor, blocco Gutenberg, shortcode, template PHP custom, CPT con ACF. Senza plugin dedicato, senza dipendenze.
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="mioViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Tutto qui. -->
Pronto in 3 passi. Diversi modi per integrarlo.
WordPress è flessibile — il componente si adatta al tuo stack. Via wp_enqueue_script(), un widget Elementor, uno shortcode o direttamente in un template PHP. Scegli quello che ti conviene di più.
Il metodo consigliato è wp_enqueue_script() in functions.php. Puoi anche includerlo via WPCode (snippet globale), o direttamente in un widget HTML di Elementor se non vuoi toccare i file.
<script> e attivalo su tutte le pagine o solo sulle pagine prodotto.
// 1. Via functions.php (consigliato) 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); }); // 2. Via WPCode — snippet HTML globale <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script> // 3. In un widget HTML di Elementor <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script> <viewer-3dvue name="mioViewer" src="..."></viewer-3dvue>
Incolla il tag nel tuo template PHP, in un widget HTML di Elementor, o via uno shortcode. Per CPT con ACF, puoi condizionare la visualizzazione in base al valore di un campo personalizzato.
<?php // Recuperare l'ID del configuratore da un campo ACF $viewer_id = get_field('configurateur_3d_id'); ?> <?php if ($viewer_id) : ?> <viewer-3dvue name="mioViewer" src="https://app.3dvue.fr/view?p=<?php echo esc_attr($viewer_id); ?>" ></viewer-3dvue> <?php endif; ?>
WordPress non ha un sistema di variazioni nativo — tutto avviene tramite i tuoi componenti HTML custom. Aggiungi gli attributi viewer-3dvue nei tuoi pulsanti o select di configurazione del prodotto. Senza JS da scrivere.
<!-- Pulsanti colore custom --> <button viewer-3dvue="mioViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","2":"1a"}' >Rovere naturale</button> <!-- Select di finitura --> <select viewer-3dvue="mioViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1" > <option value="0n">Laccato nero</option> <option value="1a">Laccato bianco</option> <option value="2b">Rovere</option> </select>
Shortcode, Gutenberg
o widget Elementor.
Il componente si integra in tutti i contesti WordPress. Scegli il metodo adatto al tuo stack.
functions.php per poterlo inserire in qualsiasi pagina o articolo dall'editor.// In functions.php add_shortcode('configurateur3d', function($atts) { $id = $atts['id'] ?? ''; return '<viewer-3dvue name="v" src="https://app.3dvue.fr/view?p=' . esc_attr($id) . '"></viewer-3dvue>'; } ); // Nell'editor: // [configurateur3d id="AB01-CD02"]
<!-- Blocco HTML personalizzato Gutenberg --> <viewer-3dvue name="mioViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Pulsanti variante nello stesso blocco --> <button viewer-3dvue="mioViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n"}' >Nero</button>
Per i casi avanzati.
Controllo programmatico completo dal tuo JS WordPress — compatibile con tutti i builder e framework usati in WordPress.
// functions.php — passare i dati ACF al JS wp_localize_script('mio-script', 'ViewerConfig', [ 'viewerId' => get_field('configurateur_id'), 'materials' => get_field('materials_map'), ]); // mio-script.js const viewer = document.querySelector('viewer-3dvue'); viewer.setMaterial(ViewerConfig.materials);
const viewer = document.querySelector('viewer-3dvue[name="mioViewer"]'); // Cambiare i materiali viewer.setMaterial({ "1": "0n", "3": "2b" }); // Caricare un altro modello viewer.loadModel("AB01-CD02"); // Catturare il rendering (es: anteprima dell'ordine) viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { console.log(e.detail.base64); });
Per saperne di più
Questo configuratore nel vostro settore
Riferimento API, attributi HTML, esempi PHP WordPress, shortcode. Tutto documentato e aggiornato.
Vedere la documentazioneSenza ticket automatici. Parli direttamente con Matthieu, lo sviluppatore che ha progettato l'API. Risposta in 24h.
Prenotare un incontroProva il configuratore prima di integrarlo. Vedrai quello che vedranno i tuoi clienti nel tuo sito WordPress.
Vedere la demoPronti a integrare?
Noi ci occupiamo dei modelli 3D.
Tu gestisci il codice in WordPress, noi ci occupiamo del resto — modellazione, materiali, configurazione. In 30 minuti ti diciamo cosa possiamo fare.