Guide développeur : WordPress

Un configurateur 3D
sur WordPress.
2 lignes de code.

<viewer-3dvue> est un Web Component natif. Il fonctionne dans n'importe quel contexte WordPress : widget HTML Elementor, bloc Gutenberg, shortcode, template PHP custom, CPT avec ACF. Aucun plugin dédié, aucune dépendance.

Compatible WordPress 6+

Widget HTML Elementor

Bloc Gutenberg natif

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="monViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>

<!-- C'est tout. -->

Pas de développeur ?

Créez votre configurateur vous-même.

Le guide ci-dessous s'adresse aux développeurs qui intègrent un configurateur conçu sur mesure par 3DVue. Si vous avez déjà les fichiers 3D de vos produits et voulez créer et publier votre configurateur vous-même, sans écrire de code, utilisez le logiciel 3DVue. Pour chaque produit, il génère :

Un lien direct : l'URL du configurateur, à mettre dans une page, un email ou un réseau social.
Un code iframe : à coller dans un bloc HTML personnalisé de l'éditeur de blocs (Gutenberg) ou un widget HTML Elementor.
Un widget : un script à coller une fois via un plugin comme Insert Headers and Footers, qui ajoute un bouton « Voir en 3D » sur vos pages.

Gratuit pendant 14 jours, puis dès 49 € HT par mois, sans commission sur vos ventes.

Essayer gratuitement Découvrir le logiciel

+94%

de conversions sur les fiches avec un modèle 3D

Source : Shopify

−40%

de retours après visualisation 3D du produit

Source : Shopify

66%

des acheteurs plus confiants avec un configurateur 3D

Source : Étude 2023

82%

des visiteurs activent la vue 3D quand disponible

Source : Cappasity

Charger le script : 3 façons

La méthode recommandée est wp_enqueue_script() dans functions.php. Mais vous pouvez aussi l'inclure via WPCode (snippet global), ou directement dans un widget HTML Elementor si vous ne voulez pas toucher aux fichiers.

Si vous utilisez WPCode, créez un snippet de type "HTML" avec la balise <script> et activez-le sur toutes les pages ou uniquement les pages produit.

// 1. Via functions.php (recommandé)
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. Dans un widget HTML Elementor
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
<viewer-3dvue name="monViewer" src="..."></viewer-3dvue>

2

Placer le composant

Collez la balise dans votre template PHP, dans un widget HTML Elementor, ou via un shortcode. Pour les CPT avec ACF, vous pouvez conditionner l'affichage selon la valeur d'un champ personnalisé.

Sur ce site, 3DVue utilise exactement cette méthode : widget HTML Elementor, pas de plugin, aucun code PHP. La balise est collée directement dans le widget.
template-produit.php : avec ACF
```
<?php
// Récupérer l'ID configurateur depuis un champ ACF
$viewer_id = get_field('configurateur_3d_id');
?>

<?php if ($viewer_id) : ?>
<viewer-3dvue
  name="monViewer"
  src="https://app.3dvue.fr/view?p=<?php echo esc_attr($viewer_id); ?>"
></viewer-3dvue>
<?php endif; ?>
```

Brancher vos sélecteurs de variantes

WordPress n'a pas de système de variations natif : tout se fait via vos composants HTML custom. Ajoutez les attributs viewer-3dvue sur vos boutons ou selects de configuration produit. Aucun JS à écrire.

<!-- Boutons couleur custom -->
<button
  viewer-3dvue="monViewer"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"0n","2":"1a"}'
>Chêne naturel</button>

<!-- Select de finition -->
<select
  viewer-3dvue="monViewer"
  viewer-3dvue-change="setMaterial"
  viewer-3dvue-mesh="1"
>
  <option value="0n">Laqué noir</option>
  <option value="1a">Laqué blanc</option>
  <option value="2b">Chêne</option>
</select>

Via un shortcode PHP

Enregistrez un shortcode dans functions.php pour pouvoir l'insérer n'importe où depuis l'éditeur.

// Dans 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>';
  }
);

// Dans l'éditeur :
// [configurateur3d id="AB01-CD02"]

Bloc Gutenberg HTML personnalisé

Sans aucun code PHP : collez directement dans un bloc "HTML personnalisé" Gutenberg. Le script doit être déjà chargé globalement.

<!-- Bloc HTML personnalisé Gutenberg -->
<viewer-3dvue
  name="monViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>

<!-- Boutons de variation dans le même bloc -->
<button
  viewer-3dvue="monViewer"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"0n"}'
>Noir</button>

Intégration avec wp_localize_script() Passer des données PHP (ID configurateur depuis ACF) vers le JS du viewer

// functions.php : passer les données ACF au JS
wp_localize_script('mon-script', 'ViewerConfig', [
  'viewerId' => get_field('configurateur_id'),
  'materials' => get_field('materials_map'),
]);

// mon-script.js
const viewer = document.querySelector('viewer-3dvue');
viewer.setMaterial(ViewerConfig.materials);

setMaterial() / loadModel() / addModel() Même API que sur toutes les plateformes : la référence complète est dans la documentation

const viewer = document.querySelector('viewer-3dvue[name="monViewer"]');

// Changer les matériaux
viewer.setMaterial({ "1": "0n", "3": "2b" });

// Charger un autre modèle
viewer.loadModel("AB01-CD02");

// Capturer le rendu (ex: preview de commande)
viewer.captureToBase64();
viewer.addEventListener("onCaptureBase64Complete", (e) => {
  console.log(e.detail.base64);
});

Questions fréquentes

Faut-il un plugin pour ajouter le configurateur 3D à WordPress ?+

Non. Le composant <viewer-3dvue> se charge avec wp_enqueue_script() ou se colle dans un widget HTML Elementor ou un bloc HTML Gutenberg. Pour aller plus vite, un code iframe ou un widget à coller une fois suffisent aussi.

Est-ce compatible avec Elementor et Gutenberg ?+

Oui. Collez la balise dans un widget HTML Elementor ou dans un bloc HTML personnalisé de l'éditeur de blocs. Un shortcode PHP est également possible.

Peut-on l'utiliser avec des types de contenu personnalisés et ACF ?+

Oui. Collez la balise dans votre template PHP et conditionnez son affichage avec vos champs ACF ou votre type de contenu personnalisé, produit par produit.

Combien coûte un configurateur 3D pour WordPress ?+

Le configurateur sur mesure démarre à 5 000 € HT, sur devis : modélisation, interface à votre charte, intégration, hébergement et support humain sont inclus. Pour tester par vous-même, le logiciel en libre-service est gratuit pendant 14 jours sans carte bancaire, puis dès 49 € HT par mois.

Documentation complète

Référence API, attributs HTML, exemples PHP WordPress, shortcodes. Tout est documenté et maintenu à jour.

Voir la documentation

Support technique humain

Pas de ticketing automatisé. Vous parlez directement à Matthieu, le développeur qui a conçu l'API. Réponse sous 24h.

Prendre un RDV

Démo interactive

Testez le configurateur avant d'intégrer. Voyez ce que vos clients verront sur votre site WordPress.

Voir la démo

Intégrons ensemble

Prêt à intégrer ?
On s'occupe des modèles 3D.

Vous gérez le code côté WordPress, on s'occupe de tout le reste : modélisation, matières, configuration. En 30 minutes on vous dit ce qu'on peut faire.

Script fourni à la livraison : prêt à enqueuer

Compatible Elementor, Gutenberg, Divi, Bricks

Support direct avec le développeur de l'API

Ce site tourne sur cette intégration exacte

Un configurateur 3D
sur WordPress.
2 lignes de code.

Créez votre configurateur vous-même.

Prêt en 3 étapes. Plusieurs façons de l'intégrer.

Shortcode, Gutenberg
ou widget Elementor.

Pour les cas avancés.

Questions fréquentes

Faut-il un plugin pour ajouter le configurateur 3D à WordPress ?+

Est-ce compatible avec Elementor et Gutenberg ?+

Peut-on l'utiliser avec des types de contenu personnalisés et ACF ?+

Combien coûte un configurateur 3D pour WordPress ?+

Prêt à intégrer ?
On s'occupe des modèles 3D.

Un configurateur 3D sur WordPress. 2 lignes de code.

Créez votre configurateur vous-même.

Prêt en 3 étapes. Plusieurs façons de l'intégrer.

Shortcode, Gutenbergou widget Elementor.

Pour les cas avancés.

Questions fréquentes

Faut-il un plugin pour ajouter le configurateur 3D à WordPress ?+

Est-ce compatible avec Elementor et Gutenberg ?+

Peut-on l'utiliser avec des types de contenu personnalisés et ACF ?+

Combien coûte un configurateur 3D pour WordPress ?+

Prêt à intégrer ?On s'occupe des modèles 3D.

Un configurateur 3D
sur WordPress.
2 lignes de code.

Shortcode, Gutenberg
ou widget Elementor.

Prêt à intégrer ?
On s'occupe des modèles 3D.