Shop Configuration

Default settings and borrow agreement

After you have registered with hey circle (opens in a new tab), sensible defaults are set for you. These can be edited anytime through your account (opens in a new tab).

<!DOCTYPE html>
 
<script type="text/javascript">
  // Wait for the asynchronously loaded script to be loaded
  var script = document.querySelector("#hey-circle-checkout-ui-script");
  script.onload = function () {
    // This function will be called when the checkbox is clicked and should add or remove the hey circle box from the cart.
    function callbackFunction(checked) {
      if (checked) {
        // TODO: Add the hey circle box to the cart
      } else {
        // TODO: Remove the hey circle box from the cart
      }
    }
 
    const uiComponents = new HeyCircleUI(
      {
        // Mandatory Configuration
        containerId: "app",
        clientId: "1234",
        usageFee: "2,00 €",
 
        // Optional UI Library Configuration
        checked: false,
        activeChoiceUrls: ["/checkout"],
        activeChoiceOnCheckout: true,
        mandatory: true,
        textOverrides: {
          prefix: "Test",
          suffix: "Test",
        },
        cart: {
          totalValue: 200,
          currency: "EUR",
          items: [
            {
              id: "1",
              name: "Product - 1",
              value: 100,
              quantity: 1,
            },
            {
              id: "1",
              name: "Product - 2",
              value: 100,
              quantity: 1,
            },
          ],
        },
 
        // Optional - if these values are not provided, the values from the platform are used
        lendingTime: 10,
        depositAmount: "20,00 €",
        termsAndConditionsURL: "https://heycircle.com/agb",
        cartConfig: {
          cartValueThreshold: 300,
          cartItemQuantityThreshold: 5,
          returnProbabilityThreshold: 1,
          uniqueSharedVariantProperty: UniqueSharedVariantProperty.NAME,
          uniqueSharedVariantPropertySeparator: "-",
        },
      },
      callbackFunction
    );
 
    // Render the checkbox into the container with id "app"
    uiComponents.render();
  };
</script>

The required parameters that you need to pass to the HeyCircleUI constructor are:

  • callbackFunction: The asynchronous callback function that will be called when the checkbox state changes. It should add or remove the hey circle box from the cart.

  • options: The configuration options for the HeyCircleUI checkbox

    • containerId: The id of the container where the HeyCircleUI checkbox will be rendered
    • clientId: The client id associated with your shop.
    • usageFee: The fully formatted price string for reusable shipping.

The optional parameters that you can pass to the HeyCircleUI constructor are:

  • checked: Optional, default is false. The initial state of the checkbox.

  • activeChoiceUrls: Optional, default is []. An array of URLs where the active choice popup should be triggered. e.g. ["/cart"].

  • activeChoiceOnCheckout: Optional, default is false. If set to true, the active choice popup will be active on the checkout page.

  • mandatory: Optional, default is false. If set to true, the reusable packaging will be mandatory.

  • textOverrides: Optional. An object containing the text overrides for the popup.

    • prefix: Optional, the prefix text for the checkbox.
    • suffix: Optional, the suffix text for the checkbox.

  • cart: Optional, default is []. The cart configuration object containing the total value, currency, and items in the cart.

    • totalValue: The total value of the cart.
    • currency: The currency of the cart.
    • items: An array of items in the cart.
      • id: The id of the product.
      • name: The name of the product.
      • value: The value of the product in cents.
      • quantity: The quantity of the product.

The Optional parameters that are set in the hey circle platform that you can overwrite:

  • termsAndConditionsURL: The URL to the terms and conditions.

  • lendingTime: The lending time in days.

  • depositAmount: The fully formatted price string for the deposit amount.

  • cartConfig: The cart configuration object containing the total value, currency, and items in the cart.

    • cartValueThreshold: The cart value threshold.
    • returnProbabilityThreshold: The return probability threshold.
    • returnProbabilityThreshold: The return probability threshold.
    • uniqueSharedVariantProperty: The unique shared variant property.
    • uniqueSharedVariantPropertySeparator: The unique shared variant property separator.
Quick startBasics