Quick start

Register with hey circle

Create an account on the hey circle platform (opens in a new tab) and get your clientId from the settings page after creating a shop.

Load the hey circle UI

To quickly load the hey circle UI into your website, load the script asynchronously into your website by including this script tag into the head of the website:

<!DOCTYPE html>
  <head>
    <!-- Load the hey circle script asynchronously into the website. Always load it from the CDN, don't bundle it. -->
    <script
      async
      id="hey-circle-checkout-ui-script"
      src="https://cdn.heycircle.com/v10/hey-circle-plugin-ui.bundle.umd.js"
    ></script>
  </head>
</html>

When the script is loaded, it can be used to render the hey circle UI into your website like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Load the hey circle script asynchronously into the website. Always load it from the CDN, don't bundle it. -->
    <script
      async
      id="hey-circle-checkout-ui-script"
      src="https://cdn.heycircle.com/v10/hey-circle-plugin-ui.bundle.umd.js"
    ></script>
  </head>
 
  <body>
    <!-- The checkbox will be loaded into every container with the specified id -->
    <div class="app"></div>
    <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(callbackFunction, {
          clientId: "clientId",
          containerId: "app",
          usageFee: "0,99€",
        });
 
        // Render the checkbox into the container with id "app"
        uiComponents.render();
      };
    </script>
  </body>
</html>

There are further optional parameters that you can pass to the HeyCircleUI constructor to customize the appearance and behavior of the checkbox. For more information, please refer to the full configuration and features.

Methods

The instantiated hey circle ui class comes with some built in methods that can be used to interact with the UI and enable certain functionalities.

  • setCheckedCallBack((checked: boolean) => Promise<void>): Sets the callback function that will be called when the checkbox state changes
  • async render(): Renders the HeyCircleUI checkbox
  • updateCheckboxState(checked: boolean): Sets the HeyCircleUI checkbox to checked | unchecked
  • updateCart({}): Updates the cart state.
heyCircleUI.setCheckedCallBack((checked: boolean) => Promise<void>); // Sets the callback function that will be called when the checkbox state changes
 
heyCircleUI.render(); // Renders the HeyCircleUI checkbox to the options.containerId e.g. heyCircleContainerId
 
heyCircleUI.updateCheckboxState(true | false); // Sets the HeyCircleUI checkbox to checked | unchecked
 
heyCircleUI.updateCart({
  totalValue: 100, // number, total value of the cart
  currency: "EUR", // Currency of the cart
  items: [
    {
      id: "1", // The id of the product
      name: "Product - 1", // The name of the product
      value: 100, // The value of the product in cents
      quantity: 1, // The quantity of the product
    },
  ],
});
IntroductionShop Configuration