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. -->
Cree su configurador usted mismo.
La guía anterior está dirigida a desarrolladores que integran un configurador creado a medida por 3DVue. Si ya dispone de los archivos 3D de sus productos y quiere crear y publicar su propio configurador sin escribir código, utilice el software 3DVue. Para cada producto, genera:
- Un enlace directo: la URL del configurador, para incluir en una página, un correo o una red social.
- Un código iframe: para pegar en un bloque HTML personalizado del editor de bloques (Gutenberg) o en un widget HTML de Elementor.
- Un widget: un script que se pega una sola vez mediante un plugin como Insert Headers and Footers, que añade un botón «Ver en 3D» en sus páginas.
Gratis durante 14 días, luego desde 49 € + IVA al mes, sin comisión sobre sus ventas.
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); });
Preguntas frecuentes
¿Hace falta un plugin para añadir el configurador 3D a WordPress?+
¿Es compatible con Elementor y Gutenberg?+
¿Se puede usar con tipos de contenido personalizados y ACF?+
¿Cuánto cuesta un configurador 3D para WordPress?+
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.