Supply Chain Viewer

<script src="https://cdn.heychocolate.com/widgets/v1/supply-chain-viewer.js"></script>

<hc-supply-chain-viewer
  product-id="prod_abc123"
  api-key="sk_live_your_key"
></hc-supply-chain-viewer>

<hc-supply-chain-viewer product-id="prod_abc123" layout="tree"></hc-supply-chain-viewer>

<hc-supply-chain-viewer product-id="prod_abc123" layout="graph"></hc-supply-chain-viewer>

<hc-supply-chain-viewer product-id="prod_abc123" layout="map"></hc-supply-chain-viewer>

const viewer = document.querySelector('hc-supply-chain-viewer');

viewer.addEventListener('hc:supplier-selected', (e) => {
  console.log('Supplier:', e.detail.supplier.name);
  console.log('CO2 contribution:', e.detail.supplier.co2Contribution);
});

viewer.addEventListener('hc:tier-expanded', (e) => {
  console.log('Expanded tier:', e.detail.tier);
});

hc-supply-chain-viewer {
  --hc-sc-bg: #ffffff;
  --hc-sc-node-bg: #f5f5f5;
  --hc-sc-node-border: #e0e0e0;
  --hc-sc-edge-color: #bdbdbd;
  --hc-sc-highlight: #F83B00;
  --hc-sc-font: inherit;
}