Widgets

Embed campaigns, petitions, events, jobs, listings, reviews, blog posts, and profiles with an iframe or script tag.

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.

Type	Shows	Embed path
`campaign`	image, title, progress, raised vs goal, Donate button	`/embed/campaign/:slug`
`card`	compact title, progress, Donate link	`/embed/card/:slug`
`petition`	title, signature progress, Sign button	`/embed/petition/:slug`
`event`	image, title, date, location, tickets/View button	`/embed/event/:slug`
`job`	title, employer, type, location, View button	`/embed/job/:slug`
`listing`	image, title, price, rating, View button	`/embed/listing/:id`
`review`	logo, name, TrustScore, review count, View button	`/embed/review/:slug`
`blog`	image, title, excerpt, Read button	`/embed/blog/:slug`
`badge`	avatar, name, signatures, profile link	`/embed/badge/:username`

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-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):

Option	Script attribute	iframe query	Values
Theme	`data-ardent-theme`	`?theme=`	`light` (default), `dark`
Height	`data-ardent-height`	n/a	pixels
Max width	`data-ardent-width`	n/a	pixels

<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.

Attribution

Widgets link to ardent.africa. Please keep the Donate and Sign links intact so supporters reach the real campaign.

Last updated: 3 August 2026