Un configurador 3D
en WordPress.
2 líneas de código.
<viewer-3dvue> es un Web Component nativo. Funciona en cualquier contexto WordPress : widget HTML de Elementor, bloque Gutenberg, shortcode, template PHP custom, CPT con ACF. Sin plugin dedicado, sin dependencias.
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="miVisor" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Eso es todo. -->
Listo en 3 pasos. Varias formas de integrarlo.
WordPress es flexible : el componente se adapta a tu stack. Via wp_enqueue_script(), un widget Elementor, un shortcode o directamente en un template PHP. Elige el que más te convenga.
-
1Cargar el script : 3 formas
El método recomendado es
wp_enqueue_script()enfunctions.php. También puedes incluirlo via WPCode (snippet global), o directamente en un widget HTML de Elementor si no quieres tocar los archivos.Si usas WPCode, crea un snippet de tipo "HTML" con la etiqueta<script>y actívalo en todas las páginas o solo en las páginas de producto.3 métodos a elegir// 1. Via functions.php (recomendado) 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 global <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script> // 3. En un widget HTML de Elementor <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script> <viewer-3dvue name="miVisor" src="..."></viewer-3dvue>
-
2Colocar el componente
Pega la etiqueta en tu template PHP, en un widget HTML de Elementor, o via un shortcode. Para CPT con ACF, puedes condicionar la visualización según el valor de un campo personalizado.
3DVue usa exactamente este método en su propio sitio : widget HTML de Elementor, sin plugin, sin código PHP. La etiqueta se pega directamente en el widget.template-producto.php : con ACF<?php // Recuperar el ID del configurador desde un campo ACF $viewer_id = get_field('configurateur_3d_id'); ?> <?php if ($viewer_id) : ?> <viewer-3dvue name="miVisor" src="https://app.3dvue.fr/view?p=<?php echo esc_attr($viewer_id); ?>" ></viewer-3dvue> <?php endif; ?>
-
3Conectar tus selectores de variantes
WordPress no tiene un sistema de variaciones nativo : todo se hace mediante tus componentes HTML custom. Añade los atributos
viewer-3dvueen tus botones o selects de configuración de producto. Sin JS que escribir.Selectores de color HTML puro<!-- Botones de color custom --> <button viewer-3dvue="miVisor" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","2":"1a"}' >Roble natural</button> <!-- Select de acabado --> <select viewer-3dvue="miVisor" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1" > <option value="0n">Lacado negro</option> <option value="1a">Lacado blanco</option> <option value="2b">Roble</option> </select>
Shortcode, Gutenberg
o widget Elementor.
El componente se integra en todos los contextos WordPress. Elige el método adaptado a tu stack.
functions.php para poder insertarlo en cualquier página o entrada desde el editor.// En 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>'; } ); // En el editor: // [configurateur3d id="AB01-CD02"]
<!-- Bloque HTML personalizado Gutenberg --> <viewer-3dvue name="miVisor" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Botones de variante en el mismo bloque --> <button viewer-3dvue="miVisor" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n"}' >Negro</button>
Para los casos avanzados.
Control programático completo desde tu JS WordPress : compatible con todos los builders y frameworks usados en WordPress.
// functions.php : pasar los datos ACF al JS wp_localize_script('mi-script', 'ViewerConfig', [ 'viewerId' => get_field('configurateur_id'), 'materials' => get_field('materials_map'), ]); // mi-script.js const viewer = document.querySelector('viewer-3dvue'); viewer.setMaterial(ViewerConfig.materials);
const viewer = document.querySelector('viewer-3dvue[name="miVisor"]'); // Cambiar los materiales viewer.setMaterial({ "1": "0n", "3": "2b" }); // Cargar otro modelo viewer.loadModel("AB01-CD02"); // Capturar el renderizado (ej: preview del pedido) viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { console.log(e.detail.base64); });
Lectura recomendada
Este configurador en su sector
Referencia API, atributos HTML, ejemplos PHP WordPress, shortcodes. Todo documentado y actualizado.
Ver la documentaciónSin tickets automáticos. Hablas directamente con Matthieu, el desarrollador que diseñó la API. Respuesta en 24h.
Reservar una reuniónPrueba el configurador antes de integrarlo. Verás lo que tus clientes verán en tu sitio WordPress.
Ver la demo¿Listo para integrar?
Nosotros nos ocupamos de los modelos 3D.
Tú gestionas el código en WordPress, nosotros nos ocupamos del resto : modelización, materiales, configuración. En 30 minutos te decimos qué podemos hacer.