Skip to main content
The Hey Chocolate Framer integration provides React-based components that work natively in Framer projects with full property controls.

​
Installation

Install the Hey Chocolate package in your Framer project: 
npm install @heychocolate/framer
Or add it via Framer’s package manager.

​
Components

​
Carbon Badge

import { CarbonBadge } from '@heychocolate/framer';

export default function ProductBadge() {
  return (
    <CarbonBadge
      productId="prod_abc123"
      apiKey="sk_live_your_key"
      variant="detailed"
      theme="light"
    />
  );
}

​
Impact Calculator

import { ImpactCalculator } from '@heychocolate/framer';

export default function Calculator() {
  return (
    <ImpactCalculator
      productId="prod_abc123"
      apiKey="sk_live_your_key"
      showScenarios={true}
      showBreakdown={true}
    />
  );
}

​
Comparison Table

import { ComparisonTable } from '@heychocolate/framer';

export default function Compare() {
  return (
    <ComparisonTable
      productIds={["prod_abc123", "prod_def456"]}
      apiKey="sk_live_your_key"
      metrics={["co2", "mki", "water"]}
    />
  );
}

​
Supply Chain Viewer

import { SupplyChainViewer } from '@heychocolate/framer';

export default function SupplyChain() {
  return (
    <SupplyChainViewer
      productId="prod_abc123"
      apiKey="sk_live_your_key"
      layout="graph"
      height="500px"
    />
  );
}

​
Property controls

All components expose Framer property controls for visual editing: 
import { addPropertyControls, ControlType } from 'framer';
import { CarbonBadge } from '@heychocolate/framer';

addPropertyControls(CarbonBadge, {
  productId: { type: ControlType.String, title: 'Product ID' },
  variant: {
    type: ControlType.Enum,
    title: 'Variant',
    options: ['compact', 'detailed', 'inline'],
  },
  theme: {
    type: ControlType.Enum,
    title: 'Theme',
    options: ['light', 'dark', 'auto'],
  },
});

​
Overrides

Use Framer overrides to connect sustainability data to custom designs: 
import { Override } from 'framer';
import { HeyChocolate } from '@heychocolate/sdk';

const client = new HeyChocolate({ apiKey: 'sk_live_your_key' });

export function withImpactScore(): Override {
  const [score, setScore] = useState(null);

  useEffect(() => {
    client.products.get('prod_abc123').then(product => {
      setScore(product.impactScore.co2Equivalent);
    });
  }, []);

  return {
    text: score ? `${score} kg CO2e` : 'Loading...',
  };
}