@veryai/widget

Very Widget

A cross-framework Very hand verification component, implemented in native JavaScript, can be used in any front-end framework.

Features

• 🌐 Cross-framework support: Implemented in native JavaScript, can be used in React, Vue, Angular, Svelte, etc.
• 🎨 Theme customization: Supports default, light, dark three themes
• 📱 Mobile adaptation: Automatically detects mobile devices and redirects to Very App
• 🔒 Security and reliability: Built-in encryption and verification mechanism
• 🚀 Lightweight: No additional dependencies, excellent performance

Installation

npm install @veryai/widget
# Or
yarn add @veryai/widget
# Or
pnpm add @veryai/widget

Usage

Native JavaScript (Recommended)

This is the most universal way, can be used in any framework:

import { createVeryWidget } from "@veryai/widget";

const widget = createVeryWidget({
  appId: "your-app-id",
  context: "your-context",
  typeId: "your-type-id",
  query: "your-query",
  verifyUrl: "https://your-verify-url.com",
  onSuccess: (proof) => {
    console.log("Verification successful:", proof);
    // Handle verification success
  },
  onError: (error) => {
    console.error("Verification failed:", error);
    // Handle verification failure
  },
  theme: "default", // 'default' | 'light' | 'dark'
  triggerElement: "#verify-btn", // Optional: auto-bind trigger element
});

// Open manually
widget.open();

// Clean up resources
widget.destroy();

Using in React

import React, { useEffect, useRef } from "react";
import { createVeryWidget } from "@veryai/widget";

function VeryButton() {
  const widgetRef = useRef(null);

  useEffect(() => {
    widgetRef.current = createVeryWidget({
      appId: "your-app-id",
      context: "your-context",
      typeId: "your-type-id",
      query: "your-query",
      verifyUrl: "https://your-verify-url.com",
      onSuccess: (proof) => {
        console.log("Verification successful:", proof);
      },
      onError: (error) => {
        console.error("Verification failed:", error);
      },
      theme: "default",
    });

    return () => {
      widgetRef.current?.destroy();
    };
  }, []);

  return (
    <button onClick={() => widgetRef.current?.open()}>Verify with Very</button>
  );
}

Using in Vue 3

<template>
  <button @click="openWidget">Verify with Very</button>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import { createVeryWidget } from "@veryai/widget";

const widget = ref(null);

onMounted(() => {
  widget.value = createVeryWidget({
    appId: "your-app-id",
    context: "your-context",
    typeId: "your-type-id",
    query: "your-query",
    verifyUrl: "https://your-verify-url.com",
    onSuccess: (proof) => {
      console.log("Verification successful:", proof);
    },
    onError: (error) => {
      console.error("Verification failed:", error);
    },
    theme: "default",
  });
});

onUnmounted(() => {
  widget.value?.destroy();
});

const openWidget = () => {
  widget.value?.open();
};
</script>

Using in Angular

// very.service.ts
import { Injectable, OnDestroy } from "@angular/core";
import { createVeryWidget } from "@veryai/widget";

@Injectable({
  providedIn: "root",
})
export class VeryService implements OnDestroy {
  private widget: any = null;

  constructor() {
    this.widget = createVeryWidget({
      appId: "your-app-id",
      context: "your-context",
      typeId: "your-type-id",
      query: "your-query",
      verifyUrl: "https://your-verify-url.com",
      onSuccess: (proof: string) => {
        console.log("Verification successful:", proof);
      },
      onError: (error: string) => {
        console.error("Verification failed:", error);
      },
      theme: "default",
    });
  }

  openWidget(): void {
    this.widget?.open();
  }

  ngOnDestroy(): void {
    this.widget?.destroy();
  }
}

Using in Svelte

<script>
    import { onMount, onDestroy } from 'svelte';
    import { createVeryWidget } from '@veryai/widget';

    let widget = null;

    onMount(() => {
        widget = createVeryWidget({
            appId: 'your-app-id',
            context: 'your-context',
            typeId: 'your-type-id',
            query: 'your-query',
            verifyUrl: 'https://your-verify-url.com',
            onSuccess: (proof) => {
                console.log('Verification successful:', proof);
            },
            onError: (error) => {
                console.error('Verification failed:', error);
            },
            theme: 'default'
        });
    });

    onDestroy(() => {
        widget?.destroy();
    });

    function openWidget() {
        widget?.open();
    }
</script>

<button on:click={openWidget}>Verify with Very</button>

API Reference

createVeryWidget(config)

Create a Very Widget instance.

Parameters

• config (object): Configuration object
  • appId (string, required): Application ID
  • context (string, required): Context
  • typeId (string, required): Type ID
  • query (string, required): Query parameters
  • verifyUrl (string, optional): Verification URL
  • onSuccess (function, required): Verification success callback
  • onError (function, optional): Verification failure callback
  • theme (string, optional): Theme, optional values: 'default' | 'light' | 'dark'
  • triggerElement (string | HTMLElement, optional): Trigger element

Return value

Returns a VeryWidget instance, containing the following methods:

• open(): Open widget
• close(): Close widget
• refresh(): Refresh verification
• destroy(): Destroy instance and clean up resources

Theme

Supports three preset themes:

• default: Default theme, dark background
• light: Light theme, white background
• dark: Dark theme, black background

Mobile support

On mobile devices, the widget will automatically detect and redirect to Very App for verification.

Notes

1. Ensure calling the destroy() method to clean up resources when the component is destroyed
2. Styles will be automatically injected, no need to manually import CSS
3. Supports SSR, but needs to be initialized on the client
4. All callback functions are asynchronous

Backward compatibility

To maintain backward compatibility, the React component is still available:

import { ReactVeryWidget } from "@veryai/widget";

License

Apache-2.0