> ## 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.

# Apps & Integrations

> Pre-built SDKs, widgets, and integrations for rapid sustainability integration.

Hey Chocolate provides a suite of ready-to-use tools that let you integrate sustainability data into your applications without building everything from scratch.

## SDKs

Client libraries for popular platforms:

<CardGroup cols={3}>
  <Card title="JavaScript SDK" icon="js" href="/apps/sdks/javascript">
    Universal JavaScript/TypeScript client for Node.js and browsers.
  </Card>

  <Card title="React SDK" icon="react" href="/apps/sdks/react">
    React components and hooks for sustainability data.
  </Card>

  <Card title="Shopify SDK" icon="shopify" href="/apps/sdks/shopify">
    Shopify Liquid snippets and app bridge integration.
  </Card>
</CardGroup>

## Widgets

Drop-in Web Components for common sustainability features:

<CardGroup cols={2}>
  <Card title="Carbon Badge" icon="certificate" href="/apps/widgets/carbon-badge">
    Embeddable sustainability score badge for product pages.
  </Card>

  <Card title="Comparison Table" icon="table-columns" href="/apps/widgets/comparison-table">
    Side-by-side product comparison widget.
  </Card>

  <Card title="Impact Calculator" icon="calculator" href="/apps/widgets/impact-calculator">
    Interactive calculator widget for customers.
  </Card>

  <Card title="Supply Chain Viewer" icon="sitemap" href="/apps/widgets/supply-chain-viewer">
    Interactive supply chain visualization component.
  </Card>
</CardGroup>

## Visualisation

Tools for rendering sustainability data as rich visual assets:

<CardGroup cols={2}>
  <Card title="Lottie & Rive" icon="play" href="/apps/visualisation/lottie-rive">
    Dynamic animations driven by impact data.
  </Card>

  <Card title="Three.js & Spline" icon="cube" href="/apps/visualisation/threejs-spline">
    3D scenes and configurators.
  </Card>

  <Card title="Video & Motion" icon="film" href="/apps/visualisation/video-motion">
    MP4 video and After Effects rendering.
  </Card>

  <Card title="Unicorn Studio" icon="wand-magic-sparkles" href="/apps/visualisation/unicorn-studio">
    WebGL visual effects.
  </Card>
</CardGroup>

## Platform integrations

Native integrations with popular web platforms:

<CardGroup cols={2}>
  <Card title="Next.js" icon="react" href="/apps/integrations/nextjs">
    Server and client components for Next.js apps.
  </Card>

  <Card title="Nuxt.js" icon="vuejs" href="/apps/integrations/nuxtjs">
    Nuxt module with SSR support.
  </Card>

  <Card title="Webflow" icon="globe" href="/apps/integrations/webflow">
    Embed components in Webflow sites.
  </Card>

  <Card title="Framer" icon="bezier-curve" href="/apps/integrations/framer">
    Interactive components for Framer projects.
  </Card>
</CardGroup>