Créer un simulateur de devis, c'est une chose. L'intégrer proprement sur le site de votre client (ou le vôtre) en est une autre. La bonne nouvelle : que vous travailliez sur WordPress, Webflow ou un site codé sur-mesure, la méthode d'intégration reste la même, et ne prend que quelques minutes une fois qu'on connaît les bons emplacements.
Le principe : une seule ligne de code
Chaque simulateur Prizyx génère automatiquement un extrait de code iframe, disponible directement depuis la page d'édition de votre simulateur. Ce code ressemble à ceci :
<iframe src="https://votredomaine.fr/s/votre-token" width="100%" height="600" frameborder="0"></iframe>
C'est ce même extrait, sans aucune adaptation, que vous allez coller sur WordPress, sur Webflow ou sur n'importe quel autre site. Aucune installation de plugin, aucune dépendance technique supplémentaire.
Intégrer le simulateur sur WordPress
Sur WordPress, la méthode dépend de l'éditeur que vous utilisez, mais le principe reste identique : coller le code dans un bloc capable d'afficher du HTML brut.
- Éditeur Gutenberg (par défaut) — ajoutez un bloc HTML personnalisé à l'endroit souhaité de votre page, puis collez l'extrait iframe tel quel.
- Elementor — utilisez le widget HTML (dans la catégorie "Général"), glissez-le sur votre page, et collez le code dans son champ de contenu.
- Divi — ajoutez un module Code à votre mise en page et collez l'extrait dans le champ prévu.
Dans les trois cas, enregistrez et prévisualisez la page : le simulateur doit apparaître immédiatement, sans rechargement supplémentaire ni configuration de plugin.
Intégrer le simulateur sur Webflow
Sur Webflow, ajoutez un élément Embed (disponible dans la section "Components" du panneau d'ajout d'éléments) à l'endroit de votre page où le simulateur doit apparaître, puis collez le même extrait de code iframe dans la fenêtre qui s'ouvre. Publiez votre site pour voir le résultat : Webflow n'affiche pas le rendu final de l'élément Embed en mode édition, seulement une fois le site publié ou en aperçu.
Astuce hauteur d'affichage
La hauteur de l'iframe (l'attribut height dans le code) est fixe : elle ne s'ajuste pas automatiquement au nombre de questions de votre simulateur. Un simulateur avec 2 ou 3 questions tient généralement dans 500 à 600 pixels, tandis qu'un simulateur plus long avec 5 questions ou plus sera plus confortable autour de 700 à 800 pixels. Si vous constatez une barre de défilement interne gênante, augmentez simplement cette valeur.
Vérifier l'affichage sur mobile
Le simulateur est conçu pour être responsive par défaut : sur WordPress comme sur Webflow, l'attribut width="100%" suffit à ce qu'il s'adapte à la largeur de son conteneur, y compris sur smartphone. Vérifiez simplement, sur les thèmes ou sections très étroites, que le conteneur qui héberge l'iframe dispose d'assez d'espace pour ne pas compresser inutilement le formulaire.
Restreindre l'affichage à votre domaine
Une fois votre simulateur intégré et testé, pensez à activer la restriction de domaine depuis les paramètres du simulateur, dans la section sécurité. En renseignant votre nom de domaine (par exemple votresite.fr), seul ce site pourra afficher le simulateur via son lien d'intégration, ce qui évite qu'un tiers réutilise votre configuration sur un autre site sans votre accord.
Si vous n'avez pas encore créé de simulateur, notre guide détaille chaque étape de la création, de la première question à la mise en ligne : comment créer un simulateur de devis en 15 minutes. Et si vous hésitez encore entre simulateur et formulaire de contact classique, notre comparatif détaillé peut vous aider à trancher : simulateur de devis vs formulaire de contact.