API Configurateur 3D – Intégration WordPress, Shopify & CMS
Intégrez notre configurateur 3D interactif en quelques lignes de code sur votre site WordPress, Shopify, WooCommerce ou tout CMS. Visualisation temps réel, personnalisation produit, compatibilité responsive, documentation complète.
Comment fonctionne l’API ?
L’intégration repose sur l’insertion d’un conteneur HTML <div> et d’un script JavaScript que vous pouvez paramétrer facilement :
<div id="my-configurator"></div>
<script src="https://cdn.3dvue.fr/configurator.js"></script>
<script>
window.onload = function () {
Configurator3D.init({
lang: 'fr',
defaultModel: 'chaise-velours',
env: 'prod',
ui: true,
targetDomElement: '#my-configurator'
});
};
</script>
Voir l’exemple complet ici : https://github.com/macarron/3dvue-documentation/blob/main/example.php
Intégration sur WordPress (Beaver Builder, Elementor…)
Ajoutez un module HTML dans votre page produit ou landing page
Collez le code ci-dessus dans l’éditeur
Le configurateur s’affichera automatiquement à l’endroit souhaité
Bonnes pratiques :
Évitez les conflits JavaScript avec d'autres plugins
Utilisez un thème responsive
Testez sur mobile et tablette
Intégration Shopify (Dawn, Prestige…)
Allez dans Online Store > Themes > Edit Code
Dans
product-template.liquid, insérez le code avant{{ product.description }}Testez sur vos fiches produit et ajustez si besoin
✔️ Compatible Shopify 2.0 – Fonctionne avec tous les thèmes modernes
Intégration sur Webflow, Joomla, PrestaShop...
Le configurateur fonctionne sur tout site web acceptant du JavaScript client. Utilisez un bloc HTML, collez le script et paramétrez votre modèle 3D.
Optimisation SEO & Accessibilité
- Lazy loading recommandé pour ne pas ralentir la page
- Balise
<noscript>en fallback visuel :
<noscript>
<img src="/img/fallback-configurateur.jpg" alt="Aperçu du configurateur 3D">
</noscript>
Documentation technique
Support technique : matthieu@3dvue.fr
