skincited-embed

Embed evidence-based health widgets for Skin Health on any website. Zero dependencies, Shadow DOM style isolation, 3 built-in themes (light, dark, clinical), and peer-reviewed research data from the SkinCited database.

Every widget includes a medical disclaimer and "Powered by SkinCited" backlink — ensuring your readers are directed to the full evidence base.

Try the interactive widget builder at widget.skincited.com

Quick Start

<!-- Place widget div where you want it to appear -->
<div data-skincited="evidence" data-slug="vitamin-d" data-theme="light"></div>

<!-- Load the embed script once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/skincited-embed@1/dist/embed.min.js"></script>

That's it. The widget fetches evidence data from the SkinCited API and renders it with full style isolation.

Widget Types

| Type | Usage | Description | |------|-------|-------------| | evidence | <div data-skincited="evidence" data-slug="..."></div> | Evidence summary card — grade, effect size, study count | | ingredient | <div data-skincited="ingredient" data-slug="..."></div> | Supplement ingredient profile — benefits, dosage, safety | | condition | <div data-skincited="condition" data-slug="..."></div> | Health condition overview — symptoms, treatments, evidence | | paper | <div data-skincited="paper" data-slug="..."></div> | Research paper citation — authors, journal, findings | | figure | <div data-skincited="figure" data-slug="..."></div> | Study figure or chart with caption | | search | <div data-skincited="search" data-slug="..."></div> | Search box linking to the full database | | safety | <div data-skincited="safety" data-slug="..."></div> | Safety grade badge — A/B/C/D/F rating with tooltip |

Widget Options

| Attribute | Values | Default | Description | |-----------|--------|---------|-------------| | data-skincited | evidence, ingredient, condition, paper, figure, search, safety | required | Widget type | | data-slug | e.g. "vitamin-d", "insomnia" | — | Entity slug from the SkinCited database | | data-theme | light, dark, clinical | light | Visual theme | | data-style | modern, clinical, research | modern | Widget design style | | data-size | default, compact | default | Widget size | | data-placeholder | any string | "Search Skin Health…" | Search box placeholder |

Themes

<!-- Light (default) -->
<div data-skincited="evidence" data-slug="vitamin-d" data-theme="light"></div>

<!-- Dark -->
<div data-skincited="evidence" data-slug="vitamin-d" data-theme="dark"></div>

<!-- Clinical (white, clean, medical) -->
<div data-skincited="evidence" data-slug="vitamin-d" data-theme="clinical"></div>

Examples

Evidence Summary Card

<div data-skincited="evidence" data-slug="vitamin-d" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/skincited-embed@1/dist/embed.min.js"></script>

Ingredient Profile

<div data-skincited="ingredient" data-slug="magnesium" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/skincited-embed@1/dist/embed.min.js"></script>

Safety Grade Badge (compact)

<div data-skincited="safety" data-slug="melatonin" data-size="compact"></div>
<script src="https://cdn.jsdelivr.net/npm/skincited-embed@1/dist/embed.min.js"></script>

Search Box

<div data-skincited="search" data-placeholder="Search Skin Health…"></div>
<script src="https://cdn.jsdelivr.net/npm/skincited-embed@1/dist/embed.min.js"></script>

Research Paper Citation

<div data-skincited="paper" data-slug="example-paper-slug" data-theme="research"></div>
<script src="https://cdn.jsdelivr.net/npm/skincited-embed@1/dist/embed.min.js"></script>

CDN Options

jsDelivr (recommended — global CDN, auto-updates with npm)

<script src="https://cdn.jsdelivr.net/npm/skincited-embed@1/dist/embed.min.js"></script>

npm (for bundlers)

npm install skincited-embed

import 'skincited-embed';

Technical Details

• Shadow DOM: Complete style isolation — no CSS conflicts with your site
• Zero dependencies: No jQuery, React, or any external library
• System fonts: No Google Fonts request — loads instantly
• CORS: SkinCited API has CORS enabled for all origins
• MutationObserver: Works with dynamically added elements (SPAs)
• Medical disclaimer: Auto-injected on every widget — educational content, not medical advice
• Bundle size: ~8KB gzipped

Learn More About Skin Health

Visit skincited.com — SkinCited is a comprehensive evidence-based health reference with peer-reviewed research, supplement profiles, and clinical condition summaries.

• API docs: skincited.com/developers/
• Widget builder: widget.skincited.com
• npm package: npmjs.com/package/skincited-embed

CITED Health Network

Part of Cited Health — Evidence-based health information.

| Site | Domain | Focus | Package | |------|--------|-------|---------| | Cited Health | citedhealth.com | All health topics — supplements, conditions, evidence | npm | | HairCited | haircited.com | Hair growth, loss, scalp health, DHT, biotin | npm | | SleepCited | sleepcited.com | Sleep quality, insomnia, melatonin, circadian rhythm | npm | | GutCited | gutcited.com | Gut microbiome, probiotics, IBS, digestive health | npm | | ImmuneCited | immunecited.com | Immune function, vitamin C, zinc, inflammation | npm | | BrainCited | braincited.com | Cognitive function, nootropics, mood, memory | npm | | WeightCited | weightcited.com | Weight management, metabolism, appetite, fat loss | npm | | HeartCited | heartcited.com | Cardiovascular health, cholesterol, blood pressure | npm | | SkinCited | skincited.com | Skin health, collagen, acne, UV protection | npm |

License

MIT — see LICENSE.

Built with care by Cited Health Inc.. Not medical advice.