Add to MetaMask Button

Demo Tombol

Klik tombol di bawah untuk mencoba menambahkan token demo ke MetaMask:

Token yang akan ditambahkan:

Nama: Tether USD Bridged ZED 20

Simbol: USDT.z

Alamat: 0xAea99b533a36E1e254bc1B9C2d0000827e792333

Desimal: 18

Varian Tombol Lainnya

Pilih gaya tombol yang sesuai dengan desain website Anda:

Cara Menggunakan di Website Anda

Salin kode di bawah ini ke website Anda:

<!-- Tambahkan di head website Anda -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
/* STYLE TOMBOL ADD TO METAMASK */
.metamask-add-btn {
    background: linear-gradient(90deg, #f6851b 0%, #e2761b 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(246, 133, 27, 0.3);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.metamask-add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(246, 133, 27, 0.4);
}

.metamask-add-btn i {
    font-size: 18px;
    margin-right: 8px;
}

/* Status Message Styles */
.metamask-status {
    padding: 10px 15px;
    border-radius: 6px;
    margin: 10px 0;
    font-size: 14px;
    display: none;
}

.metamask-status.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
}

.metamask-status.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

.metamask-status.warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
    display: block;
}
</style>

<!-- Tambahkan tombol di body website Anda -->
<button class="metamask-add-btn" onclick="addToMetaMask()">
    <i class="fab fa-ethereum"></i> Add to MetaMask
</button>

<div id="statusMessage" class="metamask-status"></div>

<script>
// Fungsi untuk menambahkan token ke MetaMask
async function addToMetaMask() {
    const statusElement = document.getElementById('statusMessage');
    statusElement.className = 'metamask-status';
    
    // Data token Anda - GANTI dengan data token Anda
    const tokenData = {
        address: '0xMASUKKAN_ALAMAT_TOKEN_ANDA_DISINI', // Alamat kontrak token
        symbol: 'SIMBOL', // Simbol token (maks 5 karakter)
        decimals: 18, // Desimal token
        image: 'https://URL_LOGO_TOKEN_ANDA.png' // URL logo token (opsional)
    };
    
    // Cek apakah MetaMask terinstal
    if (typeof window.ethereum === 'undefined') {
        showStatus('MetaMask is not installed. Please install it first.', 'error');
        return;
    }
    
    try {
        // Tambahkan token ke MetaMask
        const wasAdded = await window.ethereum.request({
            method: 'wallet_watchAsset',
            params: {
                type: 'ERC20',
                options: tokenData
            }
        });
        
        if (wasAdded) {
            showStatus('Token successfully added to MetaMask!', 'success');
        } else {
            showStatus('Token addition was cancelled.', 'warning');
        }
    } catch (error) {
        console.error('Error adding token:', error);
        showStatus('Failed to add token: ' + error.message, 'error');
    }
}

// Fungsi untuk menampilkan status
function showStatus(message, type) {
    const statusElement = document.getElementById('statusMessage');
    statusElement.textContent = message;
    statusElement.className = `metamask-status ${type}`;
    
    // Sembunyikan pesan setelah 5 detik
    setTimeout(() => {
        statusElement.style.opacity = '0';
        setTimeout(() => {
            statusElement.className = 'metamask-status';
            statusElement.textContent = '';
            statusElement.style.opacity = '1';
        }, 500);
    }, 5000);
}
</script>

Versi Ringkas (Single File)

Kode yang lebih ringkas untuk langsung dipasang:

<button id="addTokenBtn" style="
    background: linear-gradient(90deg, #f6851b, #e2761b);
    color: white; border: none; padding: 12px 24px;
    border-radius: 8px; cursor: pointer; font-weight: 600;
    display: inline-flex; align-items: center;
    box-shadow: 0 4px 12px rgba(246,133,27,0.3);
    transition: transform 0.3s;
" onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 6px 16px rgba(246,133,27,0.4)'" 
onmouseout="this.style.transform='';this.style.boxShadow='0 4px 12px rgba(246,133,27,0.3)'">
    <svg style="width:18px;height:18px;margin-right:8px" viewBox="0 0 212 189">
        <path fill="#E17726" d="M..."/><!-- SVG Fox MetaMask -->
    </svg>
    Add to MetaMask
</button>

<script>
document.getElementById('addTokenBtn').onclick = async function() {
    if(typeof window.ethereum === 'undefined') {
        alert('Please install MetaMask first!');
        return;
    }
    
    try {
        await window.ethereum.request({
            method: 'wallet_watchAsset',
            params: {
                type: 'ERC20',
                options: {
                     address: '0xAea99b533a36E1e254bc1B9C2d0000827e792333',
                symbol: 'USDT.z',
                decimals: 18,
                image: 'https://assets.geckoterminal.com/p35kh18ojlabm8haerrqjedlonl4'
          
                }
            }
        });
    } catch(error) {
        console.error('Error:', error);
    }
};
</script>