> ## Documentation Index
> Fetch the complete documentation index at: https://docs.heychocolate.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Webflow

> Embed Hey Chocolate sustainability widgets in your Webflow site.

Integrate Hey Chocolate sustainability data into your Webflow site using embeddable Web Components.

## Setup

Add the Hey Chocolate script to your Webflow project's custom code (Settings > Custom Code > Footer):

```html theme={null}
<script src="https://cdn.heychocolate.com/webflow/v1/heychocolate.js"></script>
<script>
  HeyChocolate.init({ apiKey: 'sk_live_your_key' });
</script>
```

## Adding widgets

Use Webflow's **Embed** element to add Hey Chocolate components to any page.

### Carbon Badge

```html theme={null}
<hc-carbon-badge
  product-id="prod_abc123"
  variant="detailed"
  theme="light"
></hc-carbon-badge>
```

### Comparison Table

```html theme={null}
<hc-comparison-table
  product-ids="prod_abc123,prod_def456,prod_ghi789"
  metrics="co2,mki,water"
  highlight-winner="true"
></hc-comparison-table>
```

### Impact Calculator

```html theme={null}
<hc-impact-calculator
  product-id="prod_abc123"
  show-equivalency="true"
  show-breakdown="true"
></hc-impact-calculator>
```

### Supply Chain Viewer

```html theme={null}
<hc-supply-chain-viewer
  product-id="prod_abc123"
  layout="tree"
  height="500px"
></hc-supply-chain-viewer>
```

## CMS integration

For Webflow CMS-driven product pages, use CMS field values as attributes:

1. Add a **Plain Text** field called "HC Product ID" to your CMS collection
2. In the Embed element, reference the field:

```html theme={null}
<hc-carbon-badge
  product-id="{{wf {"path":"hc-product-id","type":"PlainText"} }}"
  variant="detailed"
></hc-carbon-badge>
```

## Styling

Match the widgets to your Webflow design by adding custom CSS in the page's `<style>` tag or custom code:

```css theme={null}
hc-carbon-badge {
  --hc-badge-accent: #F83B00;
  --hc-badge-radius: 8px;
  --hc-badge-font: 'Inter', sans-serif;
}
```

## Interactions

Combine with Webflow Interactions by listening for widget events:

```javascript theme={null}
document.querySelector('hc-carbon-badge').addEventListener('hc:badge-loaded', (e) => {
  // Trigger a Webflow interaction
  document.querySelector('.impact-section').classList.add('loaded');
});
```