Op deze pagina · 6 onderdelen
- Insluiten is één snippet plakken in een HTML- of embed-blok; geen nieuwe hosting of DNS.
- Een iframe isoleert de 3D-configurator, een klein script verzorgt de brug naar je pagina.
- Controleer dat de lead-conversie de pixels van je eigen site afvuurt.
- Een eigen-domein-storefront is het alternatief als je toch een oude site vervangt.
Een configurator insluiten in WordPress, Shopify of Webflow is één regel code plakken in een HTML- of embed-blok op de pagina waar hij moet komen. Je houdt je bestaande site, hosting en domein; de 3D-configurator verschijnt gewoon binnen je eigen vormgeving. De echte valkuil is niet het plakken maar de tracking: je advertentiepixels moeten de aanvraag ook zien. Hieronder lees je het verschil tussen iframe en script, hoe tracking over de insluiting heen werkt, de stappen per platform en wanneer een eigen domein slimmer is.
Wat “insluiten” hier betekent
Een insluiting is een stukje code dat je in een bestaande pagina plakt (een WordPress-bericht, een Shopify-productpagina, een Webflow-pagina) dat de configurator binnen die pagina laadt, passend binnen je bestaande lay-out. De klant merkt niet dat hij je site heeft verlaten, want dat is niet zo: de configurator draait binnen een frame op jouw pagina. Dit verschilt van een storefront met een eigen domein, waarbij de configurator de hele site is op een eigen domein of subdomein (hieronder behandeld).
Iframe versus script: wat het verschil echt is
Twee technische benaderingen worden allebei “insluiting” genoemd.
Een iframe laadt de configurator als een pagina-in-een-pagina: je plakt een <iframe src="...">-tag en de browser rendert een onafhankelijk document binnen die rechthoek. Het is eenvoudig, isoleert stijlconflicten (de CSS van de configurator kan niet botsen met de CSS van je thema en omgekeerd), en is de gangbaardere aanpak voor een 3D-toepassing. De afweging: standaard is een iframe een gesandboxte context, dus alles wat iets moet weten over de omliggende pagina, zoals een trackingpixel afvuren die moet lijken alsof hij van jouw site komt, heeft een expliciete brug nodig.
Een scriptinsluiting injecteert een <script>-tag die vervolgens de interface van de configurator direct in een containerelement op jouw pagina bouwt, met gebruik van de DOM van je eigen pagina. Het kan “natiever” aanvoelen voor de pagina en maakt sommige trackingintegraties eenvoudiger, omdat de code in dezelfde context draait als de scripts van je eigen site. De afweging: het heeft meer raakvlak om te botsen met de CSS of JavaScript van je thema, dus een goed gebouwde scriptinsluiting moet zijn stijlen zorgvuldig afbakenen.
De meeste configuratorplatforms, Next Configurator incluis, kiezen standaard voor een iframe voor het 3D-canvas zelf (voor isolatie en prestaties) met een klein begeleidend script (embed.js) dat de brug verzorgt. Het doorgeven van configuratiegebeurtenissen en conversiedata aan de hostpagina zodat je bestaande analytics en advertentiepixels toch correct afvuren. Je hoeft niet te kiezen tussen de twee; de insluit-snippet van de leverancier hoort beide delen voor je te regelen.
Tracking over de insluiting heen
Dit is het deel dat vaak over het hoofd wordt gezien. Als een klant een pergola configureert en een offerte aanvraagt binnen een iframe, en je Google Ads- of Meta-pixel staat op de hostpagina (je WordPress- of Shopify-site), moet die pixel weten dat de conversie heeft plaatsgevonden. Anders ziet je advertentieplatform de “lead”-gebeurtenis nooit en lijkt het alsof je campagnes niet converteren, terwijl de aanvragen wél binnenkomen.
Een goed gebouwde insluiting lost dit op met een berichtenbrug: de configurator, draaiend binnen de iframe, meldt gebeurtenissen (bekijken → aanpassen → toevoegen → lead/aanvraag → aanmelden) aan het insluitscript, dat vervolgens de eigen pixels van de hostpagina afvuurt met de attributen die je op de insluit-tag hebt gezet (bijvoorbeeld een data-google-ads="AW-.../label"-attribuut met je conversielabel). Zo vuurt de pixel van het advertentieplatform af alsof het direct op jouw pagina gebeurde. Want voor trackingdoeleinden is dat ook zo.
Controleer bij je leverancier voordat je ergens insluit: stuurt de insluit-snippet conversiegebeurtenissen door naar mijn bestaande pixels, of moet ik tracking twee keer opzetten (één keer voor mijn site, één keer binnen hun platform)? Als het dat laatste is, zal je advertentiecampagne-rapportage ondertellen.
Stappen per platform
WordPress. Voeg een Custom HTML-blok (blokeditor) of een Custom HTML-widget toe aan de pagina of het bericht waar je de configurator wilt, plak de insluit-snippet, publiceer. Als je thema ruwe HTML op sommige plekken beperkt, lost een plugin die vrije HTML/script-blokken toestaat dit op. Geen serverttoegang nodig.
Shopify. Bewerk de relevante template (meestal een productpaginatemplate of een losse pagina) in de theme-editor, voeg een “Custom Liquid”- of “Custom HTML”-sectie toe, plak de snippet. Omdat Shopify-productpagina’s hun eigen prijs- en winkelwagenlogica hebben, wijzen de meeste verkopers de configurator naar een eigen pagina in plaats van de productpagina volledig te vervangen, en linken dan vanaf hun productoverzichten.
Webflow. Voeg een Embed-element toe aan de pagina, plak de snippet in het HTML-paneel ervan, publiceer. Het embed-element van Webflow gedraagt zich als een gesandboxte container, dus dit is een rechttoe-rechtaan plak-en-klaar.
In alle drie de gevallen zijn de stappen hetzelfde van vorm: zoek de pagina, voeg een ruw-HTML/embed-blok toe, plak één snippet, publiceer. Geen codewijzigingen elders op de site, geen nieuwe hosting, geen DNS-wijzigingen.
Het alternatief: storefront op een eigen domein
In plaats van in te sluiten op een bestaande site, draaien sommige verkopers de configurator als de volledige storefront op een eigen domein of subdomein (bijvoorbeeld shop.jouwdomein.nl, of het hoofddomein zelf als het configuratorplatform een volledige storefront met pagebuilder ondersteunt, niet alleen een configurator-widget). Dit is een andere beslissing dan iframe-versus-script. Het is “wil ik een widget op mijn bestaande site, of een volledige storefront die mijn site is.”
Een eigen domein is zinvol als je toch al een verouderde site vervangt, de ingebouwde pagina’s van het platform wilt (pagebuilder, offertepagina’s, reviews, projectgalerij) in plaats van alleen de configurator-widget, of één systeem wilt dat alles afhandelt vanaf de homepage tot en met de offerte. Insluiten is zinvol als je bestaande site al werkt voor merk en inhoud en je alleen de configurator zelf wilt toevoegen.
Next Configurator ondersteunt beide: een insluit-snippet voor een bestaande WordPress-, Shopify- of Webflow-site, of een volledige storefront op je eigen domein gebouwd in de pagebuilder. Zie hoe insluiten werkt en de 3D-configurator zelf.
Wat te controleren voordat je insluit
- Het 3D-canvas laadt lazy, zodat de rest van de pagina niet vertraagt.
- De insluiting werkt goed op mobiel; daar zit het meeste configuratorverkeer.
- Trackingscripts laden pas na cookietoestemming op je site.
- De lead-conversie komt aan bij de Google Ads- en Meta-pixels van je eigen pagina.
- Meerdere insluitingen op verschillende pagina’s (één per product) worden ondersteund.
Voor de bredere koopbeslissing waar dit binnen valt, lees onze koopgids voor 3D-productconfigurators. Wil je een insluiting op een testpagina proberen? Bouw je configurator en je hebt binnen een paar minuten een snippet. Prijzen en voorwaarden staan op de prijzenpagina.
