code Widget for Websites
Add a "Register on Blockchain" button to your website's admin panel in just 2 lines of code — site owners can register their own works directly from the management page.
rocket_launch Quick Start
Just 2 steps to get started (add only to admin pages behind login):
Add the script before </body>
Add attributes to your images
That's it! When browsing images in your admin page, hover to see the 🔏 Register button. Click to go to the blockchain registration page.
play_circle Live Demo
Hover over the images below — the 🔏 Register button will appear for real (click to open in a new tab).
Image Buttons — 3 Themes
Link Mode
↑ Click this link — href is auto-set by varo-registry.js
link Simple Link Mode
If you don't need a hover button, add a simple link in your admin page:
The script automatically sets the correct href URL with your partner code attached.
tune All Attributes
| Attribute | Values | Description |
|---|---|---|
| data-varo-register | — | Required — marks element for hover button |
| data-partner | alphanumeric, _ - | Your partner code (max 50 chars) — tracks referral source |
| data-ref | alphanumeric, _ - . | Reference ID (max 100 chars) — e.g. image ID or product name |
| data-label | Any text | Custom button text (default: "🔏 Register") |
| data-theme | light dark brand | Button color theme — white / dark / Varo purple |
| data-position | top-right top-left bottom-right bottom-left | Button position on image (default: top-right) |
| data-size | small medium large | Button size (default: medium) |
| data-always | — | Always show button — no hover required |
web Full Example
Example admin page of an art gallery with a registration button on every image (only visible to site owner):
palette Customization Examples
Dark theme + bottom-left + large
Varo brand theme + always visible + custom label
Small size + bottom-right (for thumbnails)
terminal JavaScript API
For developers who need more control, use the JavaScript API:
VaroRegistry.scan()
Re-scan the DOM for new data-varo-register / data-varo-link elements — use after dynamically adding elements (AJAX, SPA).
VaroRegistry.url(partner, ref)
Generate a registration URL without DOM elements:
info varo-registry.js auto-scans via MutationObserver when new elements are added to the DOM. In most cases, you don't need to call scan() manually.
handshake What is a Partner Code?
A Partner Code identifies your website. When users come from your site and register on the Blockchain, the system records which partner referred them.
badge Partner Code Rules
- Allowed: letters (a-z, A-Z), numbers (0-9), underscore (_), hyphen (-)
- Maximum length: 50 characters
- Examples: artgallery, my-studio, web_shop_01
tag Reference ID Rules
- Allowed: letters, numbers, underscore (_), hyphen (-), dot (.)
- Maximum length: 100 characters
- Examples: painting-001, product.v2, IMG_4502
account_tree How It Works
looks_one Embed Widget in Admin Page
You add varo-registry.js to your admin/management page (behind login) with your data-partner code — the button is visible only to the site owner, not public visitors.
looks_two Site Owner Sees the Button
In the admin page, hovering over artwork images reveals the "🔏 Register" button.
looks_3 Opens Registration Page
Click → opens Registry in a new tab with your partner code attached.
looks_4 Stored on Blockchain
Site owner registers their work → hash + metadata is permanently stored on Polygon Blockchain, with your partner code recorded.
security Important: Only embed varo-registry.js on pages that require login (e.g. admin panel, dashboard). Do not place it on public-facing pages — this button is for content owners to register their own works.