API & Widget Docs

Quick Start

Get an API key on the signup page (instant confirmation link after submit). Then use the API or the embeddable widget below.

API

Compute net carbs via HTTP GET:

GET https://netcarbscalc.com/api?tc=30&df=10&sa=5&key=YOUR_API_KEY

Response:

{
  "netCarbs": 15.0,
  "units": "g"
}

Limits: 1,000 requests/day per key.

Widget (Embed)

Paste this where you want the widget to appear:

<script src="https://netcarbscalc.com/embed.js?tc=30&df=15&sa=4&theme=dark"></script>

Parameters

tc: Total Carbohydrates (grams)
df: Dietary Fiber (grams)
sa: Sugar Alcohols (grams)
theme: light | dark | auto (auto follows system preference)
accent: any CSS color or hex (e.g., %23FF7A00)
class: extra CSS class added to the widget root (for scoping custom styles)

You can also use data- attributes on the script tag (e.g., data-theme, data-accent, data-class). URL params take priority over data attributes.

Styling the Widget

The widget exposes stable selectors and CSS custom properties for easy theming by the host page:

Root classes: .netcarbs-widget plus .light or .dark, and any class=... you pass.
Inner selectors: .netcarbs-heading, .netcarbs-total, .netcarbs-footer.
Variables on root: --ncc-accent, --ncc-text, --ncc-bg, --ncc-border.

Light theme (preview)

Code

<script src="https://netcarbscalc.com/embed.js?tc=30&df=15&sa=4&theme=light"></script>

Dark theme (preview)

Code

<script src="https://netcarbscalc.com/embed.js?tc=30&df=15&sa=4&theme=dark"></script>

Custom CSS (preview)

Code

<style>
.netcarbs-widget.demo-custom {
  --ncc-accent: #ff7a00 !important;
  --ncc-text:   #0b2e59 !important;
  --ncc-bg:     #ffffff !important;
  --ncc-border: #d6e6ff !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
.netcarbs-widget.demo-custom .netcarbs-total { font-size: 2rem; }
.netcarbs-widget.demo-custom .netcarbs-heading { letter-spacing: .02em; }
</style>

<script src="https://netcarbscalc.com/embed.js?tc=22&df=12&sa=2&theme=auto&class=demo-custom"></script>