@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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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.