Guida per sviluppatori : WordPress

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.

Compatibile WordPress 6+

Widget HTML di Elementor

Blocco Gutenberg nativo

Shortcode PHP

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. -->

Niente sviluppatore?

Crea il tuo configuratore da solo.

La guida qui sopra è rivolta agli sviluppatori che integrano un configuratore realizzato su misura da 3DVue. Se hai già i file 3D dei tuoi prodotti e vuoi creare e pubblicare il tuo configuratore da solo, senza scrivere codice, usa il software 3DVue. Per ogni prodotto, genera :

Un link diretto : l'URL del configuratore, da inserire in una pagina, un'email o un social network.
Un codice iframe : da incollare in un blocco HTML personalizzato dell'editor a blocchi (Gutenberg) o in un widget HTML di Elementor.
Un widget : uno script da incollare una volta tramite un plugin come Insert Headers and Footers, che aggiunge un pulsante « Vedi in 3D » sulle tue pagine.

Gratis per 14 giorni, poi a partire da 49 € + IVA al mese, senza commissioni sulle tue vendite.

Prova gratis Scopri il software

+94%

di conversioni nelle schede con modello 3D

Fonte: Shopify

-40%

di resi dopo la visualizzazione 3D del prodotto

Fonte: Shopify

66%

degli acquirenti più sicuri con il configuratore 3D

Fonte: Studio 2023

82%

dei visitatori attivano la vista 3D quando disponibile

Fonte: Cappasity

Caricare lo script : 3 metodi

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.

Se usi WPCode, crea uno snippet di tipo "HTML" con il tag <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>

2

Posizionare il componente

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.

3DVue usa esattamente questo metodo nel proprio sito : widget HTML di Elementor, senza plugin, senza codice PHP. Il tag viene incollato direttamente nel widget.
template-prodotto.php : con ACF
```
<?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; ?>
```

Collegare i selettori di varianti

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>

Via uno shortcode PHP

Registra uno shortcode in 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 di Gutenberg

Senza codice PHP : incolla direttamente in un blocco "HTML personalizzato" di Gutenberg. Lo script deve essere già caricato globalmente.

<!-- 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>

Integrazione con wp_localize_script() Passare dati PHP (ID configuratore da ACF) verso il JS del viewer

// 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);

setMaterial() / loadModel() / addModel() La stessa API che su tutte le piattaforme : il riferimento completo è nella documentazione

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);
});

Domande frequenti

Serve un plugin per aggiungere il configuratore 3D a WordPress?+

No. Il componente <viewer-3dvue> si carica con wp_enqueue_script() oppure si incolla in un widget HTML di Elementor o in un blocco HTML di Gutenberg. Per partire più in fretta bastano anche un codice iframe o un widget da incollare una sola volta.

È compatibile con Elementor e Gutenberg?+

Sì. Incollate il tag in un widget HTML di Elementor o in un blocco HTML personalizzato dell'editor a blocchi. È possibile anche uno shortcode PHP.

Si può usare con tipi di contenuto personalizzati e ACF?+

Sì. Incollate il tag nel vostro template PHP e condizionate la visualizzazione ai campi ACF o al tipo di contenuto personalizzato, prodotto per prodotto.

Quanto costa un configuratore 3D per WordPress?+

Un configuratore su misura parte da 5.000 € + IVA, su preventivo: modellazione, interfaccia nello stile del vostro marchio, integrazione, hosting e supporto umano sono inclusi. Per provarlo in autonomia, il software self-service è gratuito per 14 giorni, senza carta di credito, poi da 49 € + IVA al mese.

Per saperne di più

FAQ Realtà Aumentata

Questo configuratore nel vostro settore

Gioielli & Lusso Arredamento & Deco Tessile & Moda Divise sportive Oggetti pubblicitari

Documentazione completa

Riferimento API, attributi HTML, esempi PHP WordPress, shortcode. Tutto documentato e aggiornato.

Vedere la documentazione

Supporto tecnico umano

Senza ticket automatici. Parli direttamente con Matthieu, lo sviluppatore che ha progettato l'API. Risposta in 24h.

Prenotare un incontro

Demo interattiva

Prova il configuratore prima di integrarlo. Vedrai quello che vedranno i tuoi clienti nel tuo sito WordPress.

Vedere la demo

Integriamo insieme

Pronti 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.

Script consegnato alla fine del progetto

Compatibile Elementor, Gutenberg, Divi, Bricks

Supporto diretto con lo sviluppatore dell'API

Questo sito funziona con questa esatta integrazione

Un configuratore 3D
su WordPress.
2 righe di codice.

Crea il tuo configuratore da solo.

Pronto in 3 passi. Diversi modi per integrarlo.

Shortcode, Gutenberg
o widget Elementor.

Per i casi avanzati.

Domande frequenti

Serve un plugin per aggiungere il configuratore 3D a WordPress?+

È compatibile con Elementor e Gutenberg?+

Si può usare con tipi di contenuto personalizzati e ACF?+

Quanto costa un configuratore 3D per WordPress?+

Pronti a integrare?
Noi ci occupiamo dei modelli 3D.

Un configuratore 3D su WordPress. 2 righe di codice.

Crea il tuo configuratore da solo.

Pronto in 3 passi. Diversi modi per integrarlo.

Shortcode, Gutenbergo widget Elementor.

Per i casi avanzati.

Domande frequenti

Serve un plugin per aggiungere il configuratore 3D a WordPress?+

È compatibile con Elementor e Gutenberg?+

Si può usare con tipi di contenuto personalizzati e ACF?+

Quanto costa un configuratore 3D per WordPress?+

Pronti a integrare?Noi ci occupiamo dei modelli 3D.

Un configuratore 3D
su WordPress.
2 righe di codice.

Shortcode, Gutenberg
o widget Elementor.

Pronti a integrare?
Noi ci occupiamo dei modelli 3D.