Marendijkpoldersingel 15, Goudainfo@rvktimmer.nl06 547 712 35
RVK Timmer & Bouwbedrijf Bel 06 547 712 35
Voor de webbouwer van rvktimmer.nl

Configurator inbouwen

De configurator is een losstaand onderdeel. Het werkt naast de bestaande WordPress-site en heeft geen plug-in, thema-aanpassing of database nodig. Kies een van de drie manieren hieronder.

1. Webcomponent

Twee regels HTML. Past zich aan de breedte van de pagina aan. Aanbevolen.

2. Iframe

Volledig geïsoleerd van de site. Handig als de site strikte scripts-regels heeft.

3. Elementor

Plak optie 1 in een HTML-widget op bijvoorbeeld de pagina Dakkapellen.

1. Webcomponent (aanbevolen)

<script type="module" src="https://rvk-configurator.pages.dev/embed/rvk-configurator.js"></script>
<rvk-configurator product="dakkapel"></rvk-configurator>

Gebruik product="aanbouw" voor de aanbouw, of product="beide" voor één configurator met tabbladen. De stijl staat volledig los van het thema (shadow DOM), dus de site en de configurator beïnvloeden elkaar niet.

2. Iframe

<iframe src="https://rvk-configurator.pages.dev/iframe?product=dakkapel"
  style="width:100%;height:800px;border:0" allow="fullscreen" title="Dakkapel configurator"></iframe>

Op smalle schermen wordt de configurator hoger. De iframe stuurt zijn hoogte door met postMessage (type: "rvk-configurator:height"), zodat de site de hoogte kan meeschalen.

3. WordPress met Elementor

  1. Open de pagina Dakkapellen in Elementor.
  2. Sleep een widget HTML naar de plek waar de configurator moet komen, bijvoorbeeld boven het aanvraagformulier.
  3. Plak de code van optie 1 en publiceer.

Instellingen

AttribuutWaardeUitleg
productdakkapel, aanbouw, beideWelke configurator wordt getoond.
endpointURLAdres waar aanvragen als JSON naartoe worden gestuurd (POST). Zonder endpoint draait de configurator in demo-modus.
brandtekstNaam linksboven in de 3D-weergave. Standaard: RVK Timmer.

Aanvragen ontvangen

Een aanvraag bevat de contactgegevens, de volledige configuratie, een leesbare samenvatting, een momentopname van het 3D-ontwerp (JPEG) en een link waarmee het ontwerp opnieuw te openen is. Er zijn drie manieren om die op te vangen:

document.addEventListener('rvk-aanvraag', (e) => {
  const { product, samenvatting, contact, afbeelding, ontwerpLink } = e.detail;
  console.log(product, samenvatting, contact.email);
});

Techniek