Trust badge

The <asiri-trust-badge> component is part of the @asiri-ng/elements family — a collection of dependency-free web components for Asiri. It renders a buyer-facing badge that links to your published Trust Center, shows achieved compliance frameworks, and displays a live status signal — all without any backend code on your side.

Prerequisites

You must have a published Trust Center in your workspace. Go to Trust Center → Settings, publish it, then open Developer → Embeds to find your tenant slug.
The widget calls GET /v1/public/trust/{slug}/widget (unauthenticated, CORS-open). No API key is needed.

Quick start — no build required

Paste two lines anywhere in your page:


<script
  async
  src="https://cdn.jsdelivr.net/npm/@asiri-ng/elements@0.1.0/dist/trust-badge.global.js"
  integrity="sha384-REPLACE_WITH_SRI_HASH"
  crossorigin="anonymous"
></script>
<asiri-trust-badge tenant="YOUR_TENANT_SLUG"></asiri-trust-badge>

Replace YOUR_TENANT_SLUG with the slug from Developer → Embeds. Replace REPLACE_WITH_SRI_HASH with the Subresource Integrity hash published in the release notes for the version you pin. Loading an external script without SRI exposes your site to CDN-level compromise, so always pin both the version and its hash.

Attributes

Attribute	Required	Default	Description
`tenant`	Yes	—	Your tenant slug (used to load the public trust widget).
`api-base`	No	`https://api.asiri.ng`	Override the API base URL (e.g. staging).
`variant`	No	`compact`	Layout: `mini`, `compact`, `card`, `status`, `floating`, `full`.
`theme`	No	`light`	Colour mode: `light`, `dark`, `auto` (follows OS preference).
`accent`	No	`#C58A2A`	Brand accent colour (any valid CSS colour value).
`radius`	No	`lg`	Corner radius: `sm` (12px), `md` (16px), `lg` (22px), `pill`.
`size`	No	`md`	Relative size: `sm`, `md`, `lg`.
`position`	No	`bottom-right`	Floating variant anchor: `bottom-left/right`, `top-left/right`.
`show-frameworks`	No	`true`	Show achieved framework chips.
`show-updated`	No	`true`	Show “Updated …” timestamp in the footer.
`show-powered-by`	No	`true`	Show “Powered by ASIRI” in the footer.
`locale`	No	browser default	BCP 47 locale for date formatting (e.g. `en-NG`).
`trust-url`	No	auto-generated	Override the Trust Center link URL.

Variants

The badge ships six layout variants. Pick the one that fits the page context.

Variant	Best for
`mini`	Footer, legal pages, compact nav areas.
`compact`	Navbar or footer seal with a hover/focus proof preview popover.
`card`	Security pages and landing-page trust sections.
`status`	Trust posture callouts with a progress meter and a stronger live signal.
`floating`	Persistent buyer-proof tab that expands into a full trust drawer.
`full`	Enterprise pages where trust proof is a primary conversion asset.


<!-- Mini pill -->
<asiri-trust-badge tenant="acme" variant="mini"></asiri-trust-badge>
 
<!-- Compact popover (default) -->
<asiri-trust-badge tenant="acme" variant="compact"></asiri-trust-badge>
 
<!-- Card -->
<asiri-trust-badge tenant="acme" variant="card" theme="auto"></asiri-trust-badge>
 
<!-- Status -->
<asiri-trust-badge tenant="acme" variant="status" theme="auto"></asiri-trust-badge>
 
<!-- Full -->
<asiri-trust-badge tenant="acme" variant="full" theme="auto"></asiri-trust-badge>
 
<!-- Floating drawer anchored to the bottom-right corner -->
<asiri-trust-badge tenant="acme" variant="floating" position="bottom-right"></asiri-trust-badge>

Install via npm

For React, Vue, Svelte, or any bundler-based project:


pnpm add @asiri-ng/elements

Import the trust-badge component once — it self-registers the asiri-trust-badge custom element:


import '@asiri-ng/elements/trust-badge';

Then place the element anywhere in your markup:


<asiri-trust-badge tenant="YOUR_TENANT_SLUG" variant="card" theme="auto"></asiri-trust-badge>

React

The element is a standard custom element and works directly in JSX.


import '@asiri-ng/elements/trust-badge';
 
export function TrustBadge() {
  return (
    <asiri-trust-badge
      tenant={process.env.NEXT_PUBLIC_ASIRI_TENANT_SLUG}
      variant="card"
      theme="auto"
      accent="#C58A2A"
    />
  );
}

Vue


<template>
  <asiri-trust-badge :tenant="tenantSlug" variant="card" theme="auto" accent="#C58A2A" />
</template>
 
<script setup>
import '@asiri-ng/elements/trust-badge';
 
const tenantSlug = import.meta.env.VITE_ASIRI_TENANT_SLUG;
</script>

WordPress / Google Tag Manager

Paste into a Custom HTML block (WordPress block editor) or a Custom HTML tag (GTM):


<script
  async
  src="https://cdn.jsdelivr.net/npm/@asiri-ng/elements@0.1.0/dist/trust-badge.global.js"
  integrity="sha384-REPLACE_WITH_SRI_HASH"
  crossorigin="anonymous"
></script>
<asiri-trust-badge tenant="YOUR_TENANT_SLUG" variant="compact" theme="auto" accent="#C58A2A">
</asiri-trust-badge>

Use the SRI hash from the release notes .

Programmatic mount

Use mountAsiriTrustBadge when you need to attach the badge from JavaScript rather than HTML:


import { mountAsiriTrustBadge } from '@asiri-ng/elements/trust-badge';
 
mountAsiriTrustBadge({
  tenant: 'YOUR_TENANT_SLUG',
  variant: 'card',
  theme: 'auto',
  accent: '#C58A2A',
  target: document.querySelector('#trust-section') ?? undefined,
});

The function appends the element to target (defaults to document.body) and returns the HTMLElement.

Theming

CSS custom properties

All design tokens live on :host and can be overridden from the outside:


asiri-trust-badge {
  --asiri-tb-accent: #7c3aed;
  --asiri-tb-bg: #0f172a;
  --asiri-tb-radius: 8px;
}

Property	Default (light)	Description
`--asiri-tb-accent`	`#C58A2A`	Primary accent colour.
`--asiri-tb-bg`	`#ffffff`	Card background.
`--asiri-tb-bg-2`	`#f8fafc`	Secondary / gradient stop.
`--asiri-tb-text`	`#101322`	Body text colour.
`--asiri-tb-muted`	`#647084`	Secondary / muted text.
`--asiri-tb-border`	`#dfe4ee`	Border colour.
`--asiri-tb-radius`	`22px`	Card corner radius.
`--asiri-tb-shadow`	`0 22px 64px rgba(16,24,40,.14)`	Card drop shadow.

`::part()` selectors

Target specific shadow parts for precise CSS overrides:


asiri-trust-badge::part(card) {
  border-width: 2px;
}
 
asiri-trust-badge::part(name) {
  font-family: 'Inter', sans-serif;
}

Available parts: card, mark, name, kicker, live, footer, chip, chips, cta, button, drawer, trigger, root, float-button.

Public REST API reference

The widget endpoint is unauthenticated and CORS-open — any origin can call it from a browser.


GET https://api.asiri.ng/v1/public/trust/{slug}/widget

Response — 200


{
  "data": {
    "name": "Acme Ltd",
    "slug": "acme",
    "achievedFrameworks": ["ndpa", "iso_27001"],
    "updatedAt": "2026-06-01T12:00:00.000Z"
  }
}

Error — 404 — tenant not found or Trust Center not published.