Embed Demo
See the <recipe-price> web component in action.
It automatically detects recipes from JSON-LD structured data.
Classic Spaghetti Carbonara
A traditional Italian pasta dish with eggs, cheese, pancetta, and pepper.
- 400gSpaghetti
- 200gPancetta, diced
- 4Large eggs
- 100gPecorino romano
- 50gParmesan
- 2Garlic cloves
- 2 tbspOlive oil
Component Variations
Default (Floating Badge)
Look at the bottom-right corner of this page! The default component appears as a floating badge. Click it to expand and see the full ingredient breakdown.
Minimal Theme (Inline)
A compact pill that fits inline with your content:
Headless Mode (Custom UI)
Use events to build your own UI:
Integration Code
Add recipe pricing to your website in minutes
Quick Start
<!-- Add the embed script -->
<script src="https://api.recipeprice.com/embed.js"
data-api-key="rp_live_your_key"></script>
<!-- Add the component -->
<recipe-price></recipe-price>The component auto-detects recipes from JSON-LD structured data on the page.
Custom UI with Events
document.querySelector('recipe-price')
.addEventListener('price-calculated', (e) => {
const {
totalCost, // 12.50
costPerServing, // 3.12
servings, // 4
currency, // "AUD", "EUR", "NZD"
currencySymbol, // "$", "€"
region, // "AU-NSW", "IE-DUB"
recipe, // { name, ingredients, servings }
ingredients // Array of parsed ingredients
} = e.detail;
// Each ingredient has confidence level
ingredients.forEach(ing => {
console.log(ing.original); // "400g spaghetti"
console.log(ing.cost); // 1.20
console.log(ing.price.confidence); // "high", "medium", "low"
});
});
Events: price-loading, price-calculated, price-error
Themes & Styling
<!-- Minimal inline badge -->
<recipe-price theme="minimal" position="inline"></recipe-price>
<!-- Custom colors via CSS -->
<style>
recipe-price {
--rp-primary: #8b5cf6;
--rp-background: #1f2937;
--rp-text: #f3f4f6;
}
</style>
Themes: default, minimal, card, inline
Domain Allowlist (No Exposed API Key)
curl -X POST https://api.recipeprice.com/v1/embed/domains \
-H "X-API-Key: rp_live_your_key" \
-H "Content-Type: application/json" \
-d '{"domains": ["yourblog.com", "*.yourblog.com"]}'After registering domains, use the embed without an API key:
<script src="https://api.recipeprice.com/embed.js"></script>
<recipe-price></recipe-price>Ready to add pricing to your recipe site?
Get started with our API to embed recipe pricing on your website.