Skip to main content

Web Components

HTML custom elements with Shadow DOM and CSS custom properties

Installation

npm 
npm install @aho-sdk/components-web
CDN 
<script src="https://js.aho.com/v1"></script>
<script src="https://js.aho.com/v1/components-web"></script>

Quick Start

Add a verification button to your page. First, include the SDK:

<script src="https://js.aho.com/v1"></script>

Then add a credential button:

Verify Age 
<credential-button
  publishable-key="aho_pub_xxx"
  claims="age_over_21">
  Verify Age
</credential-button>

Request multiple claims:

Verify Identity 
<credential-button
  publishable-key="aho_pub_xxx"
  claims="given_name,family_name,age_over_21">
  Verify Identity
</credential-button>

Using npm

Or install via npm and use ES modules:

npm install @aho-sdk/verify
import { configure } from '@aho-sdk/verify';

configure({ publishableKey: 'aho_pub_xxx' });

Examples

Custom Styling

Customize button appearance with CSS custom properties.

Verify Identity 
<style nonce="...">
  .custom-button {
    --aho-button-bg: #059669;
    --aho-button-bg-hover: #047857;
    --aho-button-radius: 9999px;
  }
</style>
<credential-button
  class="custom-button"
  publishable-key="aho_pub_xxx"
  claims="given_name,family_name">
  Verify Identity
</credential-button>

Event Handling

Listen for verification lifecycle events.

Verify (Watch Events) 
Click button to see events...
btn.addEventListener('aho:credential:verified', (e) => {
  console.log('Verified:', e.detail.result);
});
btn.addEventListener('aho:credential:error', (e) => {
  console.error('Error:', e.detail.message);
});

Credential Display

After verification, display the credential card automatically.

Verify Identity 
<credential-button
  id="verify-btn"
  publishable-key="aho_pub_xxx"
  claims="all">
  Verify Identity
</credential-button>
<div id="result-container" class="mt-4 hidden">
  <p class="text-green-600 font-medium mb-2">Verification successful!</p>
  <credential-display id="verified-credential" enable-download></credential-display>
</div>
<script nonce="...">
  (function() {
    const btn = document.getElementById('verify-btn');
    const resultDiv = document.getElementById('result-container');
    const display = document.getElementById('verified-credential');
    if (!btn || !resultDiv || !display) {
      console.error('Missing elements:', { btn: !!btn, resultDiv: !!resultDiv, display: !!display });
      return;
    }
    btn.addEventListener('aho:credential:verified', (e) => {
      if (e.detail.result?.renderUrl) {
        display.setAttribute('src', e.detail.result.renderUrl);
        resultDiv.classList.remove('hidden');
      }
    });
  })();
</script>

Display Size Variants

Display credentials in compact (280px), default (400px), or large (600px) max-widths.

Compact (max-width: 280px)

Default (max-width: 400px)

Large (max-width: 600px)

<div class="space-y-6">
  <div>
    <p class="text-sm font-medium text-gray-500 mb-2">Compact (max-width: 280px)</p>
    <credential-display
      size="compact"
      data='{&quot;format&quot;:&quot;svg&quot;,&quot;content&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; viewBox=\&quot;0 0 318 200\&quot;\u003e \u003crect width=\&quot;318\&quot; height=\&quot;200\&quot; rx=\&quot;8\&quot; fill=\&quot;#fafafa\&quot; stroke=\&quot;#22c55e\&quot; stroke-width=\&quot;1.5\&quot;/\u003e \u003crect width=\&quot;318\&quot; height=\&quot;32\&quot; rx=\&quot;8\&quot; fill=\&quot;#22c55e\&quot;/\u003e\u003crect y=\&quot;8\&quot; width=\&quot;318\&quot; height=\&quot;24\&quot; fill=\&quot;#22c55e\&quot;/\u003e \u003ctext x=\&quot;10\&quot; y=\&quot;22\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;11\&quot; font-weight=\&quot;700\&quot; fill=\&quot;white\&quot;\u003eDRIVER LICENSE\u003c/text\u003e\u003ctext x=\&quot;309\&quot; y=\&quot;24\&quot; font-size=\&quot;10\&quot; fill=\&quot;white\&quot; text-anchor=\&quot;end\&quot;\u003eCOMPACT\u003c/text\u003e \u003crect x=\&quot;10\&quot; y=\&quot;42\&quot; width=\&quot;52\&quot; height=\&quot;65\&quot; rx=\&quot;3\&quot; fill=\&quot;#e2e8f0\&quot;/\u003e \u003ccircle cx=\&quot;36\&quot; cy=\&quot;62\&quot; r=\&quot;12\&quot; fill=\&quot;#94a3b8\&quot;/\u003e\u003cellipse cx=\&quot;36\&quot; cy=\&quot;95\&quot; rx=\&quot;18\&quot; ry=\&quot;12\&quot; fill=\&quot;#94a3b8\&quot;/\u003e \u003ctext x=\&quot;72\&quot; y=\&quot;58\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;14\&quot; font-weight=\&quot;700\&quot; fill=\&quot;#1e293b\&quot;\u003eJane Doe\u003c/text\u003e \u003ctext x=\&quot;72\&quot; y=\&quot;75\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;9\&quot; fill=\&quot;#64748b\&quot;\u003e123 Main St, San Francisco\u003c/text\u003e \u003ctext x=\&quot;72\&quot; y=\&quot;100\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eDOB: 01/15/1990\u003c/text\u003e \u003ctext x=\&quot;170\&quot; y=\&quot;100\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eLIC: D1234567\u003c/text\u003e \u003cline x1=\&quot;0\&quot; y1=\&quot;165\&quot; x2=\&quot;318\&quot; y2=\&quot;165\&quot; stroke=\&quot;#e5e7eb\&quot;/\u003e \u003ctext x=\&quot;10\&quot; y=\&quot;185\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eCLASS: C\u003c/text\u003e \u003ctext x=\&quot;80\&quot; y=\&quot;185\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eEXP: 01/2030\u003c/text\u003e \u003c/svg\u003e&quot;,&quot;template&quot;:{&quot;key&quot;:&quot;mobile_drivers_license&quot;,&quot;source&quot;:&quot;built_in&quot;,&quot;verified&quot;:true}}'>
    </credential-display>
  </div>
  <div>
    <p class="text-sm font-medium text-gray-500 mb-2">Default (max-width: 400px)</p>
    <credential-display
      data='{&quot;format&quot;:&quot;svg&quot;,&quot;content&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; viewBox=\&quot;0 0 318 200\&quot;\u003e \u003crect width=\&quot;318\&quot; height=\&quot;200\&quot; rx=\&quot;8\&quot; fill=\&quot;#fafafa\&quot; stroke=\&quot;#0ea5e9\&quot; stroke-width=\&quot;1.5\&quot;/\u003e \u003crect width=\&quot;318\&quot; height=\&quot;32\&quot; rx=\&quot;8\&quot; fill=\&quot;#0ea5e9\&quot;/\u003e\u003crect y=\&quot;8\&quot; width=\&quot;318\&quot; height=\&quot;24\&quot; fill=\&quot;#0ea5e9\&quot;/\u003e \u003ctext x=\&quot;10\&quot; y=\&quot;22\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;11\&quot; font-weight=\&quot;700\&quot; fill=\&quot;white\&quot;\u003eDRIVER LICENSE\u003c/text\u003e\u003ctext x=\&quot;309\&quot; y=\&quot;24\&quot; font-size=\&quot;10\&quot; fill=\&quot;white\&quot; text-anchor=\&quot;end\&quot;\u003eDEFAULT\u003c/text\u003e \u003crect x=\&quot;10\&quot; y=\&quot;42\&quot; width=\&quot;52\&quot; height=\&quot;65\&quot; rx=\&quot;3\&quot; fill=\&quot;#e2e8f0\&quot;/\u003e \u003ccircle cx=\&quot;36\&quot; cy=\&quot;62\&quot; r=\&quot;12\&quot; fill=\&quot;#94a3b8\&quot;/\u003e\u003cellipse cx=\&quot;36\&quot; cy=\&quot;95\&quot; rx=\&quot;18\&quot; ry=\&quot;12\&quot; fill=\&quot;#94a3b8\&quot;/\u003e \u003ctext x=\&quot;72\&quot; y=\&quot;58\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;14\&quot; font-weight=\&quot;700\&quot; fill=\&quot;#1e293b\&quot;\u003eJane Doe\u003c/text\u003e \u003ctext x=\&quot;72\&quot; y=\&quot;75\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;9\&quot; fill=\&quot;#64748b\&quot;\u003e123 Main St, San Francisco\u003c/text\u003e \u003ctext x=\&quot;72\&quot; y=\&quot;100\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eDOB: 01/15/1990\u003c/text\u003e \u003ctext x=\&quot;170\&quot; y=\&quot;100\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eLIC: D1234567\u003c/text\u003e \u003cline x1=\&quot;0\&quot; y1=\&quot;165\&quot; x2=\&quot;318\&quot; y2=\&quot;165\&quot; stroke=\&quot;#e5e7eb\&quot;/\u003e \u003ctext x=\&quot;10\&quot; y=\&quot;185\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eCLASS: C\u003c/text\u003e \u003ctext x=\&quot;80\&quot; y=\&quot;185\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eEXP: 01/2030\u003c/text\u003e \u003c/svg\u003e&quot;,&quot;template&quot;:{&quot;key&quot;:&quot;mobile_drivers_license&quot;,&quot;source&quot;:&quot;built_in&quot;,&quot;verified&quot;:true}}'>
    </credential-display>
  </div>
  <div>
    <p class="text-sm font-medium text-gray-500 mb-2">Large (max-width: 600px)</p>
    <credential-display
      size="large"
      data='{&quot;format&quot;:&quot;svg&quot;,&quot;content&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; viewBox=\&quot;0 0 318 200\&quot;\u003e \u003crect width=\&quot;318\&quot; height=\&quot;200\&quot; rx=\&quot;8\&quot; fill=\&quot;#fafafa\&quot; stroke=\&quot;#8b5cf6\&quot; stroke-width=\&quot;1.5\&quot;/\u003e \u003crect width=\&quot;318\&quot; height=\&quot;32\&quot; rx=\&quot;8\&quot; fill=\&quot;#8b5cf6\&quot;/\u003e\u003crect y=\&quot;8\&quot; width=\&quot;318\&quot; height=\&quot;24\&quot; fill=\&quot;#8b5cf6\&quot;/\u003e \u003ctext x=\&quot;10\&quot; y=\&quot;22\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;11\&quot; font-weight=\&quot;700\&quot; fill=\&quot;white\&quot;\u003eDRIVER LICENSE\u003c/text\u003e\u003ctext x=\&quot;309\&quot; y=\&quot;24\&quot; font-size=\&quot;10\&quot; fill=\&quot;white\&quot; text-anchor=\&quot;end\&quot;\u003eLARGE\u003c/text\u003e \u003crect x=\&quot;10\&quot; y=\&quot;42\&quot; width=\&quot;52\&quot; height=\&quot;65\&quot; rx=\&quot;3\&quot; fill=\&quot;#e2e8f0\&quot;/\u003e \u003ccircle cx=\&quot;36\&quot; cy=\&quot;62\&quot; r=\&quot;12\&quot; fill=\&quot;#94a3b8\&quot;/\u003e\u003cellipse cx=\&quot;36\&quot; cy=\&quot;95\&quot; rx=\&quot;18\&quot; ry=\&quot;12\&quot; fill=\&quot;#94a3b8\&quot;/\u003e \u003ctext x=\&quot;72\&quot; y=\&quot;58\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;14\&quot; font-weight=\&quot;700\&quot; fill=\&quot;#1e293b\&quot;\u003eJane Doe\u003c/text\u003e \u003ctext x=\&quot;72\&quot; y=\&quot;75\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;9\&quot; fill=\&quot;#64748b\&quot;\u003e123 Main St, San Francisco\u003c/text\u003e \u003ctext x=\&quot;72\&quot; y=\&quot;100\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eDOB: 01/15/1990\u003c/text\u003e \u003ctext x=\&quot;170\&quot; y=\&quot;100\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eLIC: D1234567\u003c/text\u003e \u003cline x1=\&quot;0\&quot; y1=\&quot;165\&quot; x2=\&quot;318\&quot; y2=\&quot;165\&quot; stroke=\&quot;#e5e7eb\&quot;/\u003e \u003ctext x=\&quot;10\&quot; y=\&quot;185\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eCLASS: C\u003c/text\u003e \u003ctext x=\&quot;80\&quot; y=\&quot;185\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eEXP: 01/2030\u003c/text\u003e \u003c/svg\u003e&quot;,&quot;template&quot;:{&quot;key&quot;:&quot;mobile_drivers_license&quot;,&quot;source&quot;:&quot;built_in&quot;,&quot;verified&quot;:true}}'>
    </credential-display>
  </div>
</div>

Controlled Mode

Pass pre-fetched render data directly to skip the fetch.

Static (inline data)

<credential-display
  data='{&quot;format&quot;:&quot;svg&quot;,&quot;content&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; viewBox=\&quot;0 0 318 200\&quot;\u003e \u003crect width=\&quot;318\&quot; height=\&quot;200\&quot; rx=\&quot;8\&quot; fill=\&quot;#fafafa\&quot; stroke=\&quot;#10b981\&quot; stroke-width=\&quot;1.5\&quot;/\u003e \u003crect width=\&quot;318\&quot; height=\&quot;32\&quot; rx=\&quot;8\&quot; fill=\&quot;#10b981\&quot;/\u003e\u003crect y=\&quot;8\&quot; width=\&quot;318\&quot; height=\&quot;24\&quot; fill=\&quot;#10b981\&quot;/\u003e \u003ctext x=\&quot;10\&quot; y=\&quot;22\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;11\&quot; font-weight=\&quot;700\&quot; fill=\&quot;white\&quot;\u003eDRIVER LICENSE\u003c/text\u003e\u003ctext x=\&quot;309\&quot; y=\&quot;24\&quot; font-size=\&quot;10\&quot; fill=\&quot;white\&quot; text-anchor=\&quot;end\&quot;\u003eSAMPLE\u003c/text\u003e \u003crect x=\&quot;10\&quot; y=\&quot;42\&quot; width=\&quot;52\&quot; height=\&quot;65\&quot; rx=\&quot;3\&quot; fill=\&quot;#e2e8f0\&quot;/\u003e \u003ccircle cx=\&quot;36\&quot; cy=\&quot;62\&quot; r=\&quot;12\&quot; fill=\&quot;#94a3b8\&quot;/\u003e\u003cellipse cx=\&quot;36\&quot; cy=\&quot;95\&quot; rx=\&quot;18\&quot; ry=\&quot;12\&quot; fill=\&quot;#94a3b8\&quot;/\u003e \u003ctext x=\&quot;72\&quot; y=\&quot;58\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;14\&quot; font-weight=\&quot;700\&quot; fill=\&quot;#1e293b\&quot;\u003eJohn Smith\u003c/text\u003e \u003ctext x=\&quot;72\&quot; y=\&quot;75\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;9\&quot; fill=\&quot;#64748b\&quot;\u003e123 Main St, San Francisco\u003c/text\u003e \u003ctext x=\&quot;72\&quot; y=\&quot;100\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eDOB: 01/15/1990\u003c/text\u003e \u003ctext x=\&quot;170\&quot; y=\&quot;100\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eLIC: D1234567\u003c/text\u003e \u003cline x1=\&quot;0\&quot; y1=\&quot;165\&quot; x2=\&quot;318\&quot; y2=\&quot;165\&quot; stroke=\&quot;#e5e7eb\&quot;/\u003e \u003ctext x=\&quot;10\&quot; y=\&quot;185\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eCLASS: C\u003c/text\u003e \u003ctext x=\&quot;80\&quot; y=\&quot;185\&quot; font-family=\&quot;system-ui\&quot; font-size=\&quot;8\&quot; fill=\&quot;#94a3b8\&quot;\u003eEXP: 01/2030\u003c/text\u003e \u003c/svg\u003e&quot;,&quot;template&quot;:{&quot;key&quot;:&quot;mobile_drivers_license&quot;,&quot;source&quot;:&quot;built_in&quot;,&quot;verified&quot;:true}}'>
</credential-display>

Dynamic (fetch then set)

Verify Identity 
<credential-button
  id="verify-btn"
  publishable-key="aho_pub_xxx"
  claims="given_name,family_name">
  Verify Identity
</credential-button>
<credential-display id="credential-display"></credential-display>

<script nonce="...">
  (function() {
    const btn = document.getElementById('verify-btn');
    const display = document.getElementById('credential-display');

    btn.addEventListener('aho:credential:verified', async (e) => {
      const response = await fetch(e.detail.result.renderUrl);
      const svg = await response.text();
      display.setAttribute('data', JSON.stringify({ format: 'svg', content: svg }));
    });
  })();
</script>

Display Styling

Customize display appearance with CSS custom properties.

<style nonce="...">
  .custom-display {
    --aho-display-bg: #1f2937;
    --aho-display-border: 2px solid #4ade80;
    --aho-display-radius: 1rem;
  }
</style>
<credential-display
  class="custom-display"
  data='{&quot;format&quot;:&quot;svg&quot;,&quot;content&quot;:&quot;\u003csvg xmlns=\&quot;http://www.w3.org/2000/svg\&quot; viewBox=\&quot;0 0 300 150\&quot;\u003e\u003crect fill=\&quot;#374151\&quot; width=\&quot;300\&quot; height=\&quot;150\&quot; rx=\&quot;12\&quot;/\u003e\u003ctext x=\&quot;150\&quot; y=\&quot;65\&quot; fill=\&quot;#4ade80\&quot; text-anchor=\&quot;middle\&quot; font-size=\&quot;14\&quot; font-weight=\&quot;bold\&quot;\u003eCUSTOM STYLED\u003c/text\u003e\u003ctext x=\&quot;150\&quot; y=\&quot;95\&quot; fill=\&quot;white\&quot; text-anchor=\&quot;middle\&quot; font-size=\&quot;12\&quot;\u003eDark theme with green accent\u003c/text\u003e\u003c/svg\u003e&quot;}'>
</credential-display>

Display Events

Listen for display lifecycle events.

display.addEventListener('aho:display:loaded', (e) => {
  console.log('Loaded:', e.detail.format, e.detail.templateKey);
});
display.addEventListener('aho:display:error', (e) => {
  console.error('Error:', e.detail.message);
});
display.addEventListener('aho:display:download', (e) => {
  console.log('Downloaded:', e.detail.format, e.detail.filename);
});

API Reference

<credential-button>

A button that initiates the credential verification flow.

Attributes

Attribute Type Default Description
publishable-key string — Publishable key (aho_pub_xxx). Required unless set via configure() or AhoProvider.
claims string | string[] — Claims to request. Comma-separated string or array. Use 'all' for all claims.
return-claims boolean | 'all' | string[] true Which claims to return in the result. true=all requested, false=none, 'all'=all, array=specific claims. Must be subset of claims.
document-types string | string[] all Accepted document types (e.g., 'mDL', 'passport'). Defaults to all.
client-name string — Display name shown in wallet dialog.
base-url string https://api.aho.com API base URL. Defaults to production.
unsupported 'hide' | 'disable' | 'fallback' disable Behavior when browser doesn't support Digital Credentials API.
disabled boolean false Disable the button.

Events

Event Detail Description
aho:credential:started { claims: string[] } Verification process started.
aho:credential:statechange { state: VerifyState, previousState: VerifyState } Verification state changed.
aho:credential:verified { result: VerifyResult } Verification completed successfully.
aho:credential:failed { error: Error } Verification failed (credential rejected).
aho:credential:error { error: Error } Error occurred during verification.
aho:credential:cancelled {} User cancelled the verification.
aho:credential:unsupported { reason: string, platform: Platform, apiAvailable: boolean } Browser doesn't support Digital Credentials API.

CSS Custom Properties

Property Default Description
--aho-button-bg #2563eb Background color
--aho-button-bg-hover #1d4ed8 Hover background
--aho-button-bg-verifying #6b7280 Verifying state background
--aho-button-bg-success #059669 Success state background
--aho-button-bg-error #dc2626 Error state background
--aho-button-color white Text color
--aho-button-padding 0.75rem 1.5rem Padding
--aho-button-radius 0.5rem Border radius
--aho-button-gap 0.5rem Gap between icon and text
--aho-button-border none Border style
--aho-button-font inherit Font family
--aho-button-font-size 1rem Font size
--aho-button-font-weight 500 Font weight
--aho-button-line-height 1.25 Line height
--aho-button-disabled-opacity 0.5 Disabled state opacity
--aho-button-outline 2px solid #60a5fa Focus outline
--aho-button-outline-offset 2px Focus outline offset
--aho-button-transition background-color 0.15s, opacity 0.15s Transition effects
--aho-button-shadow none Box shadow
--aho-button-shadow-hover none Box shadow on hover
--aho-button-transform-hover none Transform on hover

<credential-display>

Displays a rendered credential.

Attributes

Attribute Type Default Description
src string — URL to fetch rendered credential from.
data string | object — Pre-fetched render response. JSON string (web) or object (React/Vue).
size 'compact' | 'default' | 'large' default Display size variant. Controls max-width.
enable-download boolean false Show download button on hover.
loading-text string Loading... Text shown while loading.
error-text string Failed to load credential Text shown on error.
verify-authenticity boolean false Verify credential authenticity and show trust indicator with link to verification page.

Events

Event Detail Description
aho:display:loaded { format: string, templateKey?: string } Content loaded successfully.
aho:display:error { error: Error, message: string } Error loading content.
aho:display:download { format: string, filename: string } Download triggered.
aho:display:authenticity-verified { verifyUrl: string } Credential authenticity verified successfully.
aho:display:authenticity-failed { error: Error, message: string } Credential authenticity verification failed.

CSS Custom Properties

Property Default Description
--aho-display-bg #ffffff Container background
--aho-display-border 1px solid #e5e7eb Container border
--aho-display-radius 0.75rem Border radius
--aho-display-compact-width 280px Compact size max-width
--aho-display-default-width 400px Default size max-width
--aho-display-large-width 600px Large size max-width
--aho-display-loading-bg rgba(255, 255, 255, 0.9) Loading overlay background
--aho-display-spinner-color #e5e7eb Spinner track color
--aho-display-spinner-active #3b82f6 Spinner active color
--aho-display-error-color #dc2626 Error text color
--aho-display-download-bg rgba(255, 255, 255, 0.9) Download button background
--aho-display-download-border 1px solid #e5e7eb Download button border
--aho-display-download-radius 0.375rem Download button radius
--aho-display-download-bg-hover #f3f4f6 Download button hover background
--aho-display-download-icon #374151 Download icon color
--aho-display-trust-bg #10b981 Trust indicator background
--aho-display-trust-color #ffffff Trust indicator text color