account_balance_wallet เชื่อมกระเป๋า Wallet

วาง Wallet Address ของคุณ (เริ่มต้นด้วย 0x)
🦊 วิธีคัดลอก Wallet Address จาก MetaMask
  1. เปิดแอป MetaMask บนมือถือ
  2. กดที่ ที่อยู่กระเป๋า ด้านบน (ขึ้นต้นด้วย 0x...)
  3. ระบบจะคัดลอก Address ให้อัตโนมัติ
  4. กลับมาที่หน้านี้ แล้ว วาง ลงในช่องด้านบน
open_in_new เปิดแอป MetaMask

code Widget สำหรับเว็บไซต์

เพิ่มปุ่ม "ลงทะเบียนบน Blockchain" ในหน้าบริหารเว็บไซต์ของคุณ ด้วย varo-registry.js เพียงแค่ 2 บรรทัด — เจ้าของเว็บใช้ลงทะเบียนผลงานของตัวเองจากหน้า admin ได้ทันที

rocket_launch เริ่มต้นใช้งาน (Quick Start)

เพียง 2 ขั้นตอนก็ใช้งานได้ทันที (ใส่เฉพาะในหน้า admin ที่ต้อง login):

1

เพิ่ม script ก่อนปิด </body>

HTML <script src="https://cdn.varoriya.com/varo-registry.js"></script>
2

ใส่ attribute บนรูปภาพ

HTML <img src="artwork.jpg" data-varo-register data-partner="รหัสของคุณ">

เพียงเท่านี้! เมื่อเจ้าของเว็บเอาเมาส์ไปวางบนรูปในหน้า admin จะเห็นปุ่ม 🔏 Register โผล่ขึ้นมา กดแล้วจะไปหน้าลงทะเบียนบน Blockchain ทันที

play_circle ลองเลย (Live Demo)

เอาเมาส์ไปวางบนรูปด้านล่าง — ปุ่ม 🔏 Register จะโผล่ขึ้นมาจริง ๆ (ลองคลิกได้เลย เปิดในแท็บใหม่)

ปุ่มบนรูปภาพ — 3 ธีม

Light (default) Demo Light
Dark Demo Dark
Brand + Always Demo Brand

ลิงก์ธรรมดา (Link Mode)

🔏 ลงทะเบียนบน Blockchain

↑ คลิกลิงก์นี้ — href ถูก auto-set โดย varo-registry.js

link แบบลิงก์ธรรมดา (Link Mode)

ถ้าไม่ต้องการปุ่มลอยบนรูป ใส่ลิงก์ธรรมดาในหน้า admin ก็ได้:

HTML <a href="#" data-varo-link data-partner="yourcode"> ลงทะเบียนบน Blockchain </a>

Script จะเปลี่ยน href ให้อัตโนมัติเป็น URL ที่ถูกต้อง พร้อมแนบรหัส partner ของคุณ

tune ตัวเลือกทั้งหมด (Attributes)

Attribute ค่า คำอธิบาย
data-varo-register — จำเป็น — ระบุว่า element นี้ต้องแสดงปุ่ม
data-partner ตัวอักษร, ตัวเลข, _ - รหัส partner ของคุณ (สูงสุด 50 ตัว) ใช้ติดตามว่ามาจากเว็บไหน
data-ref ตัวอักษร, ตัวเลข, _ - . รหัสอ้างอิง (สูงสุด 100 ตัว) เช่น ID ของรูป หรือชื่อสินค้า
data-label ข้อความใดก็ได้ เปลี่ยนข้อความบนปุ่ม (ค่าเริ่มต้น: "🔏 Register")
data-theme light dark brand สีของปุ่ม — สว่าง / มืด / ม่วง Varo
data-position top-right top-left bottom-right bottom-left ตำแหน่งปุ่มบนภาพ (ค่าเริ่มต้น: มุมขวาบน)
data-size small medium large ขนาดปุ่ม (ค่าเริ่มต้น: medium)
data-always — แสดงปุ่มตลอดเวลา ไม่ต้อง hover

web ตัวอย่างเต็ม

ตัวอย่างหน้าบริหารแกลเลอรีศิลปิน ที่มีปุ่มลงทะเบียนบนทุกรูป (เฉพาะเจ้าของเว็บเห็น):

HTML <!DOCTYPE html> <html> <body> <h1>My Art Gallery — Admin</h1> <!-- ใส่ data-varo-register บนรูปที่ต้องการ (หน้า admin หลัง login) --> <img src="painting1.jpg" data-varo-register data-partner="artgallery" data-ref="painting-001"> <img src="painting2.jpg" data-varo-register data-partner="artgallery" data-ref="painting-002" data-theme="dark" data-position="bottom-left"> <!-- ลิงก์ธรรมดา --> <p> <a href="#" data-varo-link data-partner="artgallery"> ลงทะเบียนบน Blockchain </a> </p> <!-- โหลด varo-registry.js (ครั้งเดียว ก่อน </body>) --> <script src="https://cdn.varoriya.com/varo-registry.js"></script> </body> </html>

palette ตัวอย่างการปรับแต่ง

ธีมมืด + มุมซ้ายล่าง + ขนาดใหญ่

HTML <img src="photo.jpg" data-varo-register data-partner="mysite" data-theme="dark" data-position="bottom-left" data-size="large">

ธีม Varo + แสดงตลอด + ข้อความไทย

HTML <img src="design.jpg" data-varo-register data-partner="designstudio" data-theme="brand" data-label="ลงทะเบียน" data-always>

ขนาดเล็ก + มุมขวาล่าง (เหมาะกับ thumbnail)

HTML <img src="thumb.jpg" data-varo-register data-partner="mysite" data-size="small" data-position="bottom-right">

terminal JavaScript API

สำหรับนักพัฒนาที่ต้องการควบคุมมากขึ้น สามารถใช้ JavaScript API ได้:

VaroRegistry.scan()

สแกน DOM ใหม่เพื่อหา element ที่มี data-varo-register หรือ data-varo-link — ใช้เมื่อเพิ่ม element แบบ dynamic (เช่น AJAX, SPA)

JS // เพิ่มรูปใหม่แบบ dynamic var img = document.createElement('img'); img.src = 'new-artwork.jpg'; img.setAttribute('data-varo-register', ''); img.setAttribute('data-partner', 'mysite'); document.getElementById('gallery').appendChild(img); // สแกนใหม่ (ปกติจะ auto-scan แต่ถ้าต้องการ scan ทันที) VaroRegistry.scan();

VaroRegistry.url(partner, ref)

สร้าง URL ลงทะเบียนเอง ไม่ต้องใช้ DOM:

JS var url = VaroRegistry.url('artgallery', 'item-5'); // → "https://registry.varoriya.com/service/certify/?partner=artgallery&ref=item-5" // ใช้ร่วมกับ link window.open(url, '_blank');

info varo-registry.js จะ auto-scan อัตโนมัติด้วย MutationObserver เมื่อมี element ใหม่ถูกเพิ่มเข้า DOM ส่วนใหญ่ไม่จำเป็นต้องเรียก scan() เอง

handshake รหัส Partner คืออะไร?

รหัส Partner คือตัวระบุเว็บไซต์ของคุณ เมื่อผู้ใช้มาจากเว็บของคุณแล้วลงทะเบียนบน Blockchain ระบบจะบันทึกว่ามาจาก partner ใด

badge กฎของรหัส Partner

  • ใช้ได้: ตัวอักษร (a-z, A-Z), ตัวเลข (0-9), ขีดล่าง (_), ขีดกลาง (-)
  • ความยาวสูงสุด: 50 ตัวอักษร
  • ตัวอย่าง: artgallery, my-studio, web_shop_01

tag กฎของรหัส Reference

  • ใช้ได้: ตัวอักษร, ตัวเลข, ขีดล่าง (_), ขีดกลาง (-), จุด (.)
  • ความยาวสูงสุด: 100 ตัวอักษร
  • ตัวอย่าง: painting-001, product.v2, IMG_4502

account_tree ทำงานอย่างไร

looks_one ฝัง Widget ในหน้า Admin

คุณใส่ varo-registry.js ในหน้าบริหารเว็บไซต์ (หลัง login) พร้อมระบุ data-partner ของคุณ — ปุ่มจะเห็นเฉพาะเจ้าของเว็บ ไม่ใช่ผู้ชมทั่วไป

looks_two เจ้าของเว็บเห็นปุ่ม

ในหน้า admin เมื่อเอาเมาส์ไปวางบนรูปผลงาน จะเห็นปุ่ม "🔏 Register" โผล่ขึ้นมา

looks_3 เปิดหน้าลงทะเบียน

กดปุ่ม → เปิด Registry ในแท็บใหม่ พร้อมรหัส partner ของคุณ

looks_4 บันทึกบน Blockchain

เจ้าของเว็บลงทะเบียนผลงาน → hash + metadata ถูกบันทึกบน Polygon Blockchain ถาวร พร้อมระบุว่ามาจาก partner ของคุณ

security สำคัญ: ควรใส่ varo-registry.js เฉพาะในหน้าที่ต้อง login เท่านั้น (เช่น หน้า admin, dashboard) ไม่ควรใส่ในหน้าที่ผู้ชมทั่วไปเห็น — เพราะปุ่มนี้สำหรับเจ้าของผลงานใช้ลงทะเบียนเท่านั้น

พร้อมเริ่มใช้งานแล้ว?

ลงทะเบียนผลงานบน Blockchain วันนี้

ลงทะเบียนเลย

ดู Source Code บน GitHub