Skip to main content

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></bcf-customizer-incl>

The model-code property is optional. When no model is specified, the configurator shows a model selection screen so users can choose a model.

You can optionally add a max-height property (in px) to control the configurator’s height:

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

Opening a Specific Model​

To open the configurator with a specific model, add the model-code property:

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

Replace FALCONRS7E7 with the code for your model.

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
  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​

PropertyTypeRequiredDescription
model-codeStringNoOpens a specific model. If omitted, the configurator shows a model selection screen.
max-heightNumberNoMaximum height of the configurator (in px).
allow-checkoutBooleanNoEnables the “Add to Cart” button.
max-delivery-daysNumberNoRestricts orders to configurations deliverable within this number of days.
languageStringNoSets the locale of the customizer. Allowed values: default, FR, NL, DE, ES, IT, RU
currencyStringNoSets the currency of the customizer. Accepts ISO 4217 currency codes
euro-rateNumberNoeuro-rate sets the EUR conversion factor for price calculations (default: 1)