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.
The Hey Chocolate API can drive Lottie and Rive animations with real-time sustainability data, creating dynamic visual experiences that respond to product impact scores.
Our API can also deliver personalised lottie jsons (with audio), ready to be embedded in your app or web app, and enable a video-like experience without server-side rendering involved.
Lottie integration
Getting animation parameters
mutation {
renderVisualisation(input: {
productId: "prod_abc123"
format: LOTTIE
template: SCORE_GAUGE
parameters: {
colorScheme: "brand"
animationDuration: 3000
}
}) {
templateUrl
parameters
}
}
Using with lottie-web
import lottie from 'lottie-web';
const response = await fetch('/api/visualisation', {
method: 'POST',
body: JSON.stringify({
productId: 'prod_abc123',
format: 'LOTTIE',
template: 'SCORE_GAUGE',
}),
});
const { templateUrl, parameters } = await response.json();
const animation = lottie.loadAnimation({
container: document.getElementById('impact-animation'),
path: templateUrl,
renderer: 'svg',
loop: false,
autoplay: true,
});
// Apply data-driven parameters
animation.addEventListener('DOMLoaded', () => {
// Update text layers with impact data
animation.renderer.elements.forEach((element) => {
if (element.data?.nm === 'score') {
element.updateDocumentData({ t: parameters.score.toString() });
}
});
});
Using with LottieFiles
<dotlottie-player
src="https://assets.heychocolate.com/lottie/score-gauge.lottie"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
autoplay
></dotlottie-player>
Rive integration
mutation {
renderVisualisation(input: {
productId: "prod_abc123"
format: RIVE
template: IMPACT_DASHBOARD
}) {
templateUrl
stateMachineInputs
parameters
}
}
Using with @rive-app/canvas
import { Rive } from '@rive-app/canvas';
const response = await fetch('/api/visualisation', { /* ... */ });
const { templateUrl, stateMachineInputs } = await response.json();
const rive = new Rive({
src: templateUrl,
canvas: document.getElementById('impact-canvas'),
stateMachines: 'ImpactDashboard',
autoplay: true,
onLoad: () => {
const inputs = rive.stateMachineInputs('ImpactDashboard');
// Set score value (drives gauge animation)
const scoreInput = inputs.find(i => i.name === 'score');
scoreInput.value = stateMachineInputs.score;
// Set category (triggers state change)
const categoryInput = inputs.find(i => i.name === 'category');
categoryInput.value = stateMachineInputs.category;
},
});
Available templates
| Template | Format | Description |
|---|
SCORE_GAUGE | Lottie, Rive | Animated circular score indicator |
IMPACT_BREAKDOWN | Lottie | Animated pie/bar chart of lifecycle phases |
IMPACT_DASHBOARD | Rive | Interactive dashboard with multiple metrics |
COMPARISON_CHART | Lottie, Rive | Animated side-by-side comparison |
CARBON_BADGE | Lottie | Animated sustainability badge |
SAVINGS_COUNTER | Lottie | Counter animation showing CO2 savings |
