Widgets

Widgets let you put live Ardent content on your own site. They show a small, isolated card and link visitors to ardent.africa to donate, sign, get tickets, or view. The widget itself never takes payments and never runs your visitors' data through anything; it only reads the public API on our servers.

There are two ways to embed, both safe. The script tag is just a convenience that writes the iframe for you. To make a pasted Ardent link auto-render (in WordPress, Notion, etc.) without any code, see oEmbed.

Widget types

The hazard widget is different, and you should read this before using it

Every other widget here advertises something. The hazard widget warns somebody, which changes what it is allowed to do.

Three things on that card are not configurable and never will be:

• The verification label. Most hazard reports are unverified community reports, which means somebody reported something and nobody checked it. The card says which kind you are looking at, in full, in words.
• The emergency number. Anybody reading a hazard card is reading about danger, quite possibly on a site that offers no other route to help.
• The case reference and the date. This card will be screenshotted off your page and into WhatsApp, where it loses every trace of being live. Both are printed so the screenshot carries them.

It is also the tallest card on this page (440px). Do not shorten it below that: an iframe clips silently from the bottom, and the bottom of this card is exactly those three things.

iframe embed

Drop this anywhere. No JavaScript runs on your page.

<iframe
  src="https://docs.ardent.africa/embed/campaign/clean-water-for-tamale"
  style="border:0;width:100%;max-width:420px;height:340px"
  sandbox="allow-scripts allow-popups"
  loading="lazy"
  title="Ardent Africa campaign"
></iframe>

For a petition, use /embed/petition/<slug>; for the compact card, /embed/card/<slug>.

Script embed

The script tag injects the sandboxed iframe for you and is handy in CMSs.

<script
  src="https://docs.ardent.africa/widget.js"
  data-ardent-campaign="clean-water-for-tamale"
></script>

Every other type works the same way. Use the matching data attribute:

<script src="https://docs.ardent.africa/widget.js" data-ardent-petition="pass-the-affirmative-action-bill"></script>
<script src="https://docs.ardent.africa/widget.js" data-ardent-card="clean-water-for-tamale"></script>
<script src="https://docs.ardent.africa/widget.js" data-ardent-event="accra-tech-summit-2026"></script>
<script src="https://docs.ardent.africa/widget.js" data-ardent-job="senior-nurse-accra"></script>
<script src="https://docs.ardent.africa/widget.js" data-ardent-survey="what-should-we-build-next"></script>
<script src="https://docs.ardent.africa/widget.js" data-ardent-durbar="harmattan-town-hall"></script>
<script src="https://docs.ardent.africa/widget.js" data-ardent-listing="9b1e0000-0000-0000-0000-000000000000"></script>
<script src="https://docs.ardent.africa/widget.js" data-ardent-review="amas-bakery"></script>
<script src="https://docs.ardent.africa/widget.js" data-ardent-blog="how-tipping-works"></script>
<script src="https://docs.ardent.africa/widget.js" data-ardent-badge="ama"></script>

Customization

Add data attributes (script embed) or query params (iframe):

<script
  src="https://docs.ardent.africa/widget.js"
  data-ardent-campaign="clean-water-for-tamale"
  data-ardent-theme="dark"
  data-ardent-height="360"
></script>

Reviews: building your own JSON-LD

If you'd rather render the rating natively on your own page (for SEO rich results) instead of embedding the iframe, call GET /reviews/entities/:slug directly and build the AggregateRating/Review markup yourself:

const entity = await fetch(
  'https://api.ardent.africa/public/v1/reviews/entities/amas-bakery',
).then((r) => r.json())

const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Organization',
  name: entity.display_name,
  ...(entity.trust_score != null && {
    aggregateRating: {
      '@type': 'AggregateRating',
      ratingValue: (entity.trust_score / 20).toFixed(1),
      reviewCount: entity.published_review_count,
      bestRating: '5',
      worstRating: '1',
    },
  }),
  review: entity.recent_reviews.map((r) => ({
    '@type': 'Review',
    author: { '@type': 'Person', name: r.display_name },
    datePublished: r.created_at,
    reviewBody: r.body,
    reviewRating: { '@type': 'Rating', ratingValue: r.overall_rating, bestRating: '5', worstRating: '1' },
  })),
}

trust_score is 0–100; divide by 20 for the conventional 1–5 star scale search engines expect. recent_reviews returns up to the 10 most recent published reviews, the same projection the review embed and ardent.africa's own entity pages use.

Why this is safe

• The iframe is sandboxed without allow-same-origin, so it cannot read your page.
• No API key appears in your page source; the embed reads the public API on our servers.
• The script does nothing but insert one iframe. No eval, no tracking, no data sent from your visitors.

Last updated: 24 August 2026