Comment intégrer un configurateur 3D sur mon site web ?

Ajoutez une balise script JavaScript dans le HTML de votre page web, incluant un attribut data-id avec votre identifiant unique de configurateur depuis le portail Zinevu. Le configurateur se charge de façon responsive dans n'importe quel conteneur. Il fonctionne avec WordPress, Webflow, Squarespace, Wix et tout autre constructeur de site prenant en charge le HTML personnalisé.

L'intégration du configurateur ralentit-elle mon site web ?

Minimalement, quand il est chargé correctement. L'intégration Zinevu utilise le chargement différé par défaut, n'initialisant le moteur 3D que lorsque le configurateur entre dans la zone visible. Pour de meilleures performances, placez l'intégration sous la ligne de flottaison sur les pages produits.

Puis-je utiliser le configurateur comme page autonome plutôt qu'intégré ?

Oui. Votre domaine marque blanche Zinevu (par ex. configurateur.monentreprise.fr) peut être partagé comme lien direct — dans des e-mails, des publicités, des messages WhatsApp ou des profils sur les réseaux sociaux. Vous n'avez pas à l'intégrer sur votre site web pour l'utiliser.

Quelles plateformes de sites web prennent en charge l'intégration du configurateur Zinevu ?

Toute plateforme de site web qui vous permet d'ajouter une balise script HTML personnalisée. Cela inclut WordPress (via un bloc HTML personnalisé), Webflow (via l'intégration de code personnalisé), Squarespace, Wix, Shopify, HubSpot CMS et tout site HTML/React/Next.js codé à la main.

Comment les leads issus du configurateur intégré me parviennent-ils ?

Les leads arrivent automatiquement dans votre CRM Zinevu dès qu'un client soumet sa configuration. Vous recevez une notification (e-mail ou dans l'application) et le lead apparaît dans votre boîte de réception CRM avec la configuration complète, les coordonnées, un rendu 3D et le prix configuré.

Puis-je suivre les conversions du configurateur dans Google Analytics ?

Oui. L'intégration Zinevu déclenche un événement JavaScript (zinevu:completed) lorsqu'un client soumet un lead. Vous pouvez écouter cet événement et le transmettre à Google Analytics 4 ou Google Tag Manager comme événement de conversion — ce qui vous permet d'attribuer les soumissions du configurateur à des campagnes publicitaires ou des sources de trafic spécifiques.

Y a-t-il une limite au nombre de pages sur lesquelles je peux intégrer le configurateur ?

Non. Vous pouvez intégrer le même configurateur (en utilisant le même data-id) sur autant de pages que vous le souhaitez. Si vous voulez différentes gammes de produits sur différentes pages, vous pouvez créer plusieurs configurations de configurateur dans votre portail revendeur, chacune avec son propre identifiant d'intégration.

Comment intégrer un configurateur 3D sur votre site web (et générer plus de leads)

Pourquoi votre site web a besoin d'un configurateur 3D

Votre site web reçoit des visiteurs qui recherchent activement des solutions d'aménagement extérieur — et la plupart d'entre eux repartent sans prendre contact. Le taux de conversion d'un site web standard d'aménagement extérieur (formulaire de contact ou appel téléphonique) se situe généralement entre 1 et 3 % des visiteurs. Pour 100 personnes qui visitent votre page véranda, 97 à 99 repartent sans vous dire qui elles sont.

Un configurateur 3D change cette équation. Plutôt que de demander aux visiteurs de vous contacter, il les invite à concevoir leur produit immédiatement. La barrière est plus faible, l'expérience est plus engageante et l'engagement est plus élevé. Les visiteurs qui interagissent avec un configurateur pendant 5 à 10 minutes sont qualitativement différents de ceux qui jettent un coup d'œil à un formulaire de contact et repartent.

Selon les recherches consommateurs de Google, les propriétaires qui recherchent des achats importants de rénovation domiciliaire passent nettement plus de temps sur des sites avec des outils interactifs que sur des sites de brochures statiques.

Intégrer un configurateur 3D sur votre site web signifie convertir votre trafic existant en leads qualifiés et spécifiés — sans augmenter vos dépenses publicitaires.

Comment l'intégration fonctionne techniquement

Le configurateur 3D Zinevu est intégré à l'aide d'un seul extrait JavaScript — une ligne de code que vous collez dans votre HTML. Aucune intégration côté serveur n'est requise, aucune étape de compilation et aucune dépendance à votre plateforme de site web existante.

Le code d'intégration charge le configurateur comme un iFrame dans votre page :

<script
  src="https://cdn.zinevu.com/embed/v1.js"
  data-id="VOTRE_CONFIG_ID"
></script>

Remplacez VOTRE_CONFIG_ID par l'identifiant affiché dans votre portail revendeur Zinevu sous Paramètres → Intégration. Le configurateur se charge dans un conteneur responsive qui s'adapte à la largeur de l'élément dans lequel il est placé.

Le script d'intégration communique avec votre page via des événements JavaScript, vous permettant de répondre aux actions des clients — configuration terminée, lead soumis — avec votre propre logique personnalisée :

window.addEventListener('zinevu:completed', function(event) {
  var lead = event.detail;
  // lead.customer.email, lead.config, lead.totalPrice
  console.log('Nouveau lead :', lead.customer.name);
});

Le configurateur se charge depuis le CDN mondial de Zinevu avec des optimisations de performance incluant le chargement différé des actifs 3D, le chargement progressif des modèles et la détection WebGL. Pour la plupart des sites web modernes, l'impact sur le temps de chargement de la page est minimal lorsque l'intégration est placée sous la ligne de flottaison.

Où placer le configurateur sur votre site web

Le placement a un effet significatif sur les taux d'engagement. Voici les positions les plus efficaces pour un configurateur 3D de véranda sur votre site web :

Pages produits (impact le plus élevé)

Intégrer le configurateur directement sur la page produit — à côté ou sous la description du produit — est le placement avec le meilleur taux de conversion. Le visiteur est déjà en mode produit ; le configurateur est l'étape naturelle suivante. Supprimez ou minimisez le formulaire de contact sur les pages produits où le configurateur est intégré — vous voulez que l'attention des visiteurs se porte sur une seule action.

Page de destination dédiée « Concevez votre véranda »

Créez une page autonome (par ex. /conception ou /configurateur) qui présente le configurateur en pleine largeur avec un contenu environnant minimal. Cette page est idéale comme destination pour le trafic publicitaire payant, où vous souhaitez que les visiteurs effectuent exactement une action.

Hero de la page d'accueil (pour les entreprises configurateur-first)

Les revendeurs qui ont construit leur marketing autour du configurateur le présentent parfois directement sur la page d'accueil. Un CTA teaser — « Concevez votre véranda en 3D → Obtenez un prix instantané » — qui renvoie à la page du configurateur fonctionne bien au-dessus de la ligne de flottaison.

Dans les suivis e-mail et WhatsApp

Le configurateur ne doit pas nécessairement vivre uniquement sur votre site web. Un lien direct vers votre configurateur — hébergé sur votre domaine marque blanche — peut être partagé dans des réponses par e-mail, des messages WhatsApp ou des publications sur les réseaux sociaux. « Évitez la visite en showroom — concevez le vôtre en ligne et je vous envoie un devis dans les 24 heures » est une proposition convaincante pour les propriétaires occupés.

Étape par étape : du portail à l'intégration en direct

Voici le processus complet pour intégrer un configurateur 3D Zinevu sur votre site web :

Configurer votre catalogue produits. Dans votre portail revendeur Zinevu, configurez les structures, options et règles tarifaires que vous souhaitez mettre à disposition des clients. C'est l'étape la plus longue — la plupart des revendeurs la finalisent en 2 à 4 heures lors de leur première journée.
Obtenir votre identifiant d'intégration. Accédez à Paramètres → Intégration dans votre portail revendeur. Copiez la valeur data-id affichée — c'est votre identifiant unique de configurateur.
Ajouter le script à votre site web. Collez l'extrait d'intégration dans le HTML de toute page où vous souhaitez que le configurateur apparaisse. Si vous utilisez un constructeur de site (WordPress, Webflow, Squarespace, Wix), collez-le dans un bloc HTML personnalisé ou la zone d'injection de code de la page.
Tester en staging. Chargez la page dans une fenêtre de navigation privée et complétez une configuration de test. Vérifiez que le lead apparaît dans votre boîte de réception CRM Zinevu.
Configurer votre domaine marque blanche (optionnel mais recommandé). Suivez le processus de configuration CNAME décrit dans notre guide du configurateur en marque blanche pour servir le configurateur depuis votre propre domaine.
Mise en ligne. Publiez la page. Le configurateur est maintenant en ligne et accepte des leads.

Le processus prend généralement moins d'une journée ouvrée de la création du compte à l'intégration en direct. Consultez notre guide de démarrage complet sur l'Académie Zinevu pour des captures d'écran étape par étape de chaque phase.

Capturer et orienter les leads issus du configurateur

Chaque configuration complétée génère automatiquement un lead dans votre CRM Zinevu. Le lead comprend :

Nom, adresse e-mail et numéro de téléphone du client
La configuration produit complète (type de structure, dimensions, matériaux, options)
Un rendu 3D de la structure configurée
Le prix total configuré
Un horodatage et l'URL source

Depuis le CRM, vous pouvez répondre aux leads avec un message personnalisé et un devis PDF formel joint, ou les convertir directement en projet dans le flux de gestion de projets Zinevu.

Pour les équipes utilisant des CRM externes (HubSpot, Salesforce, Pipedrive), le système API et webhook Zinevu permet d'envoyer automatiquement les leads vers vos outils existants. Consultez la page Développeurs & API pour les détails techniques.

Pour les équipes publicité et analytique, l'événement JavaScript zinevu:completed peut être utilisé pour déclencher des événements de suivi des conversions dans Google Analytics 4, Google Tag Manager ou Meta Pixel — attribuant les soumissions du configurateur à des campagnes publicitaires spécifiques.

Considérations de performance pour les configurateurs intégrés

Le rendu 3D dans un navigateur est intensif en calcul et l'intégration d'un configurateur ajoute du poids à votre page. Voici les meilleures pratiques pour maintenir les performances du site :

Charger sous la ligne de flottaison. Utilisez le chargement différé — le script d'intégration Zinevu le fait par défaut, n'initialisant le moteur 3D que lorsque le configurateur entre dans la zone visible.
Tester sur des appareils mobiles. Les performances WebGL varient selon le matériel mobile. Le configurateur Zinevu inclut des optimisations de performance pour les appareils mobiles d'entrée de gamme.
Éviter de charger sur la page d'accueil. Sauf si le configurateur est votre principal CTA, évitez de l'intégrer sur des pages à fort trafic comme la page d'accueil. Utilisez plutôt une page de configurateur liée.
Surveiller avec les Core Web Vitals. Les Core Web Vitals de Google (LCP, CLS, FID) mesurent l'expérience de la page et affectent les classements de recherche. Si l'intégration du configurateur cause des problèmes de CLS (décalage de mise en page), enveloppez-le dans un conteneur à hauteur fixe pour réserver l'espace avant son chargement.

Si vous avez des préoccupations spécifiques de performance, le Centre d'aide Zinevu dispose de guides sur l'optimisation du placement de l'intégration.