@asiri-ng/elements

@asiri-ng/elements

Asiri embeddable web components — framework-agnostic, dependency-free.

Component	Status	Tag
Consent banner	Available	<asiri-consent>
Trust badge	Available	<asiri-trust-badge>
DSR (Data Subject Request)	Available	<asiri-dsr>
Trust access request	Available	<asiri-trust-access>
Trust subscribe	Available	<asiri-trust-subscribe>

---

Install via npm (recommended)

npm install is the recommended way to integrate every component: your lockfile pins the exact version, updates arrive through your normal dependency workflow, bundlers tree-shake unused components, and there is no CDN script or SRI hash to maintain. Use the plain <script> tag only when you cannot run a build step (e.g. WordPress or Google Tag Manager).

pnpm add @asiri-ng/elements

Import the consent component (self-registers the asiri-consent custom element):

import '@asiri-ng/elements/consent';

Or import everything (registers all available components):

import '@asiri-ng/elements';

Place the element in your markup:

<asiri-consent notice-id="YOUR_NOTICE_ID"></asiri-consent>

Programmatic mount

import { mountAsiriConsent } from '@asiri-ng/elements/consent';

mountAsiriConsent({ noticeId: 'YOUR_NOTICE_ID' });

---

Plain <script> tag (no build)

Consent component only:

<script
  src="https://cdn.jsdelivr.net/npm/@asiri-ng/elements@0.6.3/dist/consent.global.js"
  integrity="sha384-REPLACE_WITH_HASH_FROM_NPM_PUBLISH"
  crossorigin="anonymous"
></script>
<asiri-consent notice-id="YOUR_NOTICE_ID"></asiri-consent>

All components (consent + future additions):

<script
  src="https://cdn.jsdelivr.net/npm/@asiri-ng/elements@0.6.3/dist/elements.global.js"
  integrity="sha384-REPLACE_WITH_HASH_FROM_NPM_PUBLISH"
  crossorigin="anonymous"
></script>
<asiri-consent notice-id="YOUR_NOTICE_ID"></asiri-consent>

Always pin the version and include integrity/crossorigin for Subresource Integrity (SRI) protection. Generate the hash after publishing:

curl -sL https://cdn.jsdelivr.net/npm/@asiri-ng/elements@0.6.3/dist/consent.global.js \
  | openssl dgst -sha384 -binary | openssl base64 -A | sed 's/^/sha384-/'

---

Gating API

window.AsiriConsent.onDecision(({ purposes }) => {
  if (purposes['analytics']) startAnalytics();
});
// or listen to DOM events:
document.addEventListener('asiri-consent', (e) => console.log(e.detail));

window.AsiriConsent methods

Method	Returns	Description
get()	ConsentState | null	Current decision, or null before any decision.
onDecision(cb)	() => void	Subscribe to decisions; fires immediately if already decided. Returns an unsubscribe function.
open()	void	Re-open the preferences panel.

<asiri-consent> attributes

Attribute	Required	Default	Description
notice-id	Yes	—	Your published consent notice ID.
api-base	No	https://api.asiri.ng	Override the API base URL (e.g. staging).

CSS custom properties (design tokens)

The banner ships with a neutral light look. Every colour, radius, shadow, and font is exposed as a --asiri-consent-* custom property that pierces the shadow boundary, so you can restyle it from your page CSS without forking the component:

asiri-consent {
  /* surfaces */
  --asiri-consent-bg: #ffffff; /* banner + panel background */
  --asiri-consent-bg-2: #f7f4ef; /* purpose rows in the preferences panel */
  --asiri-consent-border: #d9dde7;
  --asiri-consent-radius: 16px;
  --asiri-consent-shadow: 0 12px 40px rgba(20, 23, 43, 0.18);
  /* text */
  --asiri-consent-text: #14172b;
  --asiri-consent-muted: #4b5163;
  --asiri-consent-font: -apple-system, sans-serif;
  /* actions */
  --asiri-consent-primary-bg: #19203f; /* Accept all / Save choices */
  --asiri-consent-primary-fg: #f7f3ec;
  --asiri-consent-outline-border: #19203f; /* Reject non-essential */
  --asiri-consent-outline-fg: #19203f;
  --asiri-consent-ghost-fg: #4b5163; /* Customize */
  /* controls */
  --asiri-consent-accent: #19203f; /* toggle "on" state */
  --asiri-consent-toggle-off: #d9dde7;
  --asiri-consent-pill-bg: #f4ead2; /* "Required" pill */
  --asiri-consent-pill-fg: #854a00;
}

Dark-site example (only override what you need):

asiri-consent {
  --asiri-consent-bg: #141d36;
  --asiri-consent-text: #eef2fc;
  --asiri-consent-muted: #7d8db4;
  --asiri-consent-border: #2c3757;
  --asiri-consent-bg-2: #232c44;
  --asiri-consent-primary-bg: #f5c542;
  --asiri-consent-primary-fg: #070b16;
  --asiri-consent-outline-fg: #eef2fc;
  --asiri-consent-accent: #f5c542;
}

::part() selectors

For styling beyond the design tokens, the following shadow parts are exposed:

banner, title, description, actions, button, accept, reject, customize, panel, panel-title, panel-description, purposes, purpose, toggle, panel-footer, save.

asiri-consent::part(banner) {
  backdrop-filter: blur(8px);
}
asiri-consent::part(button accept) {
  text-transform: uppercase;
}

Troubleshooting

If the configured notice cannot be loaded (unpublished, deleted, or wrong api-base), the banner still renders with generic copy so visitors are never blocked — but consent decisions are not recorded, and the component logs a [asiri-consent] warning to the console explaining why. Treat that warning as a deploy blocker.

---

Trust badge

Quick start — no build required

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

Install via npm

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

Place the element in your markup:

<asiri-trust-badge tenant="YOUR_TENANT_SLUG"></asiri-trust-badge>

Programmatic mount

import { mountAsiriTrustBadge } from '@asiri-ng/elements/trust-badge';

mountAsiriTrustBadge({
  tenant: 'YOUR_TENANT_SLUG',
});

<asiri-trust-badge> 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	Backwards-compatible no-op. The element always renders badge-only.
design	No	saved app setting	Badge artwork: option-1 through option-10. Overrides the saved Trust Center setting when present.
theme	No	light	Backwards-compatible no-op for older snippets.
accent	No	#C58A2A	Focus-ring accent colour (CSS colour value).
radius	No	lg	Backwards-compatible no-op for older snippets.
size	No	md	Backwards-compatible no-op for older snippets.
position	No	bottom-right	Backwards-compatible no-op for older snippets.
show-frameworks	No	true	Backwards-compatible no-op for older snippets.
show-updated	No	true	Backwards-compatible no-op for older snippets.
show-powered-by	No	true	Backwards-compatible no-op for older snippets.
locale	No	browser default	Backwards-compatible no-op for older snippets.
trust-url	No	https://asiri.ng/trust/{tenant}	Override the Trust Center link URL.

The api-base override is intended for Asiri production, Asiri staging, and localhost development. Badge attestation verification only trusts JWKS from https://api.asiri.ng, https://api.staging.asiri.ng, or localhost when the embedding page is also local.

CSS custom properties

The badge artwork is bundled into the package as transparent PNG data, so npm and CDN installs do not need separate asset hosting. The element renders only the selected badge image inside a link to the Trust Center. If design is omitted, the element uses the tenant's saved badge design from Settings → Trust Center → Website badge and updates after the public widget cache refreshes. Use design only when you want a specific website install to stay pinned to one badge artwork.

All design tokens are exposed on :host so you can override them from outside:

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

::part() selectors

The following shadow parts are exposed for targeted styling:

mark, cta, badge-image.

---

DSR (Data Subject Request)

Allow your users to submit privacy requests (access, erasure, rectification, portability, restriction, objection) directly from your product.

Quick start — no build required

<script
  async
  src="https://cdn.jsdelivr.net/npm/@asiri-ng/elements@0.6.3/dist/dsr.global.js"
></script>
<asiri-dsr tenant="YOUR_TENANT_SLUG"></asiri-dsr>

Install via npm

import '@asiri-ng/elements/dsr';

Place the element in your markup:

<asiri-dsr tenant="YOUR_TENANT_SLUG" variant="button" theme="auto"></asiri-dsr>

Programmatic mount

import { mountAsiriDsr } from '@asiri-ng/elements/dsr';

mountAsiriDsr({ tenant: 'YOUR_TENANT_SLUG', variant: 'inline', theme: 'auto' });

<asiri-dsr> attributes

Attribute	Required	Default	Description
tenant	Yes	—	Your tenant slug.
api-base	No	https://api.asiri.ng	Override the API base URL (e.g. staging).
variant	No	button	Layout: button (trigger → modal), inline, floating (fixed).
theme	No	light	Colour mode: light, dark, auto.
accent	No	#142044	Brand accent colour (CSS colour value).
radius	No	md	Corner radius: sm, md, lg, pill.
size	No	md	Relative size: sm, md, lg.
position	No	bottom-right	Floating variant position: bottom-left/right, top-left/right.
label	No	Privacy request	Trigger button text.
locale	No	browser default	BCP 47 locale (reserved for future use).
turnstile-site-key	No	—	Cloudflare Turnstile site key — enables captcha on the form.

CSS custom properties (design tokens)

All tokens are exposed on :host so you can override from outside:

asiri-dsr {
  --asiri-dsr-accent: #7c3aed;
  --asiri-dsr-radius: 8px;
  --asiri-dsr-bg: #ffffff;
  --asiri-dsr-bg-2: #f8fafc;
  --asiri-dsr-text: #101322;
  --asiri-dsr-muted: #647084;
  --asiri-dsr-border: #dfe4ee;
  --asiri-dsr-shadow: 0 22px 64px rgba(16, 24, 40, 0.14);
  --asiri-dsr-danger: #c0392b;
  --asiri-dsr-success: #2f9b63;
  --asiri-dsr-font: Inter, sans-serif;
}

Token precedence: accent / radius attributes take priority over CSS token overrides, which take priority over built-in defaults. Only set them if explicitly provided by the consumer.

::part() selectors

trigger, float-button, dialog, backdrop, header, form, field, label, input, select, textarea, submit, cancel, success, error, close.

Captcha (Turnstile)

When turnstile-site-key is set the component lazily injects the Cloudflare Turnstile script and renders the challenge widget inside the form. The resulting token is sent as captchaToken in the POST body. If the attribute is omitted the form submits without a token.

---

Trust access request

Let prospects request access to gated resources (SOC 2 report, security questionnaire, sandbox) straight from your Trust Center. Renders a button that opens a modal email-capture form (or an inline form).

Quick start — no build required

<script
  async
  src="https://cdn.jsdelivr.net/npm/@asiri-ng/elements@0.6.3/dist/trust-access.global.js"
></script>
<asiri-trust-access tenant="YOUR_TENANT_SLUG"></asiri-trust-access>

Install via npm

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

<asiri-trust-access tenant="YOUR_TENANT_SLUG" variant="button" theme="auto"></asiri-trust-access>

Programmatic mount

import { mountAsiriTrustAccess } from '@asiri-ng/elements/trust-access';

mountAsiriTrustAccess({ tenant: 'YOUR_TENANT_SLUG', variant: 'inline', theme: 'auto' });

<asiri-trust-access> attributes

Attribute	Required	Default	Description
tenant	Yes	—	Your tenant slug.
api-base	No	https://api.asiri.ng	Override the API base URL (e.g. staging).
variant	No	button	Layout: button (trigger → modal) or inline.
label	No	Request access	Trigger button text.
resource-id	No	—	Identifier of the gated resource being requested.
theme	No	light	Colour mode: light, dark, auto.
accent	No	#142044	Brand accent colour (CSS colour value).
radius	No	md	Corner radius: sm, md, lg, pill.
size	No	md	Relative size: sm, md, lg.
locale	No	browser default	BCP 47 locale (reserved for future use).
turnstile-site-key	No	—	Cloudflare Turnstile site key — enables captcha on the form.

Form fields: email (required), name (optional), company (optional), message (required).

CSS custom properties (design tokens)

asiri-trust-access {
  --asiri-ta-accent: #7c3aed;
  --asiri-ta-radius: 8px;
  --asiri-ta-bg: #ffffff;
  --asiri-ta-bg-2: #f8fafc;
  --asiri-ta-text: #101322;
  --asiri-ta-muted: #647084;
  --asiri-ta-border: #dfe4ee;
  --asiri-ta-shadow: 0 22px 64px rgba(16, 24, 40, 0.14);
  --asiri-ta-danger: #c0392b;
  --asiri-ta-success: #2f9b63;
  --asiri-ta-font: Inter, sans-serif;
}

Token precedence: accent / radius attributes beat CSS token overrides, which beat built-in defaults.

::part() selectors

trigger, dialog, backdrop, header, form, field, label, input, textarea, submit, cancel, success, error, close.

---

Trust subscribe

Capture emails for security/compliance update notifications from your Trust Center. Renders a button that opens a modal email-capture form (or an inline form).

Quick start — no build required

<script
  async
  src="https://cdn.jsdelivr.net/npm/@asiri-ng/elements@0.6.3/dist/trust-subscribe.global.js"
></script>
<asiri-trust-subscribe tenant="YOUR_TENANT_SLUG"></asiri-trust-subscribe>

Install via npm

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

<asiri-trust-subscribe
  tenant="YOUR_TENANT_SLUG"
  variant="button"
  theme="auto"
></asiri-trust-subscribe>

Programmatic mount

import { mountAsiriTrustSubscribe } from '@asiri-ng/elements/trust-subscribe';

mountAsiriTrustSubscribe({ tenant: 'YOUR_TENANT_SLUG', variant: 'inline', theme: 'auto' });

<asiri-trust-subscribe> attributes

Attribute	Required	Default	Description
tenant	Yes	—	Your tenant slug.
api-base	No	https://api.asiri.ng	Override the API base URL (e.g. staging).
variant	No	button	Layout: button (trigger → modal) or inline.
label	No	Subscribe to updates	Trigger button text.
segment	No	—	Subscription segment / list identifier.
theme	No	light	Colour mode: light, dark, auto.
accent	No	#142044	Brand accent colour (CSS colour value).
radius	No	md	Corner radius: sm, md, lg, pill.
size	No	md	Relative size: sm, md, lg.
locale	No	browser default	BCP 47 locale (reserved for future use).
turnstile-site-key	No	—	Cloudflare Turnstile site key — enables captcha on the form.

Form fields: email (required), name (optional), company (optional).

CSS custom properties (design tokens)

asiri-trust-subscribe {
  --asiri-ts-accent: #7c3aed;
  --asiri-ts-radius: 8px;
  --asiri-ts-bg: #ffffff;
  --asiri-ts-bg-2: #f8fafc;
  --asiri-ts-text: #101322;
  --asiri-ts-muted: #647084;
  --asiri-ts-border: #dfe4ee;
  --asiri-ts-shadow: 0 22px 64px rgba(16, 24, 40, 0.14);
  --asiri-ts-danger: #c0392b;
  --asiri-ts-success: #2f9b63;
  --asiri-ts-font: Inter, sans-serif;
}

Token precedence: accent / radius attributes beat CSS token overrides, which beat built-in defaults.

::part() selectors

trigger, dialog, backdrop, header, form, field, label, input, submit, cancel, success, error, close.