Embedding the Configurator

This guide explains how to embed the BCF Configurator into your website.

---

Getting Started

The configurator is available as a web component. You can embed it using the following code:

<script src="https://components.cyclingfactory.be/bcf-customizer/latest/bcf-customizer-incl.min.js"></script>
<bcf-customizer-incl model-code="FALCONRS7E7"></bcf-customizer-incl>

• Replace the value of model-code with the correct code for your model.
• You can optionally add a max-height property (in px) to control the configurator’s height:

<bcf-customizer-incl model-code="FALCONRS7E7" max-height="900"></bcf-customizer-incl>

---

Capturing Leads

If you want to receive email addresses from users who send their configuration to themselves, you can listen for the statisticsEvent.

This event contains both the email address and the configuration details.

<script>
  const customizer = document.querySelector("bcf-customizer-incl");

  customizer.addEventListener("statisticsEvent", function (event) {
    const eventType = event.detail[0];
    const eventDetails = event.detail[1];

    if (eventType === "ConfigMailed") {
      console.log("ConfigMailed", eventDetails);
      alert(
        eventDetails.configurationId +
          " - " +
          eventDetails.email +
          " - " +
          eventDetails.model
      );
    }
  });
</script>

---

Enabling Orders

To show an “Add to Cart” button inside the configurator, you need to set additional properties.

Required properties

• allow-checkout
  Enables the “Add to Cart” button.

• max-delivery-days
  Restricts orders to configurations with a delivery date within the specified number of days.

Example

<script src="https://components.cyclingfactory.be/bcf-customizer/latest/bcf-customizer-incl.min.js"></script>

<bcf-customizer-incl
  model-code="FALCONRS7E7"
  allow-checkout="true"
  max-delivery-days="700">
</bcf-customizer-incl>

<script>
  const customizer = document.querySelector("bcf-customizer-incl");

  customizer.addEventListener("add", function (event) {
    const selection = event.detail[0];
    console.log(selection);

    alert(
      selection.favorite.code +
        " - " +
        selection.title +
        " - " +
        selection.price.msrp +
        " - " +
        selection.price.currency
    );
  });
</script>

---

Property Reference

Property	Type	Required	Description
model-code	String	✅ Yes	The model code for the configurator.
max-height	Number	No	Maximum height of the configurator (in px).
allow-checkout	Boolean	No	Enables the “Add to Cart” button.
max-delivery-days	Number	No	Restricts orders to configurations deliverable within this number of days.