Register
Home About Services Search Contact Donate Us Donor Login Admin Login
Developer API Access

Integrate BloodWay API

Add BloodWay donor search directly into your website, mobile application or healthcare platform.

16

Active Heroes

24/7

API Access

API Integration

Follow these steps to integrate BloodWay donor search.

  1. Create a file named search.html
  2. Copy the code below
  3. Replace YOUR_API_KEY with your API key
  4. Upload the file to your hosting
  5. Open search.html and start searching donors
🔑 Get API Key

BloodWay Search Integration Template

Copy the complete code below and save it as search.html

search.html 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BloodWay Donor Search</title>
    <script type="text/javascript" src="https://bloodway.xyz/js/js_state.js"></script>
    <style>
        body{ margin:0; font-family:Arial, sans-serif; background:#f5f7fb; }
        .header{ background:#d90429; color:#fff; padding:20px; text-align:center; }
        .search-box{ max-width:900px; margin:20px auto; background:#fff; padding:20px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.1); }
        .row{ display:flex; gap:10px; flex-wrap:wrap; }
        input,select{ flex:1; min-width:200px; padding:12px; border:1px solid #ddd; border-radius:5px; }
        button{ background:#d90429; color:#fff; border:none; padding:12px 25px; border-radius:5px; cursor:pointer; }
        button:hover{ background:#b00020; }
        button:disabled{ background:#ccc; cursor:not-allowed; }
        .results{ max-width:900px; margin:20px auto; }
        .card{ background:#fff; border-radius:10px; padding:15px; margin-bottom:15px; box-shadow:0 2px 10px rgba(0,0,0,.08); border-left:5px solid #d90429; position: relative; }
        .card h3{ margin:0 0 10px; color:#d90429; }
        .info{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; align-items: center; }
        .loading{ text-align:center; padding:20px; display:none; }
        .no-data{ text-align:center; padding:20px; color:#666; }
        
        .badge { position: absolute; top: 15px; right: 15px; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: bold; }
        .badge.available { background: #e8f5e9; color: #2e7d32; }
        .badge.unavailable { background: #ffebee; color: #c62828; }

        /* Secure Call Button Styling */
        .call-btn { background: #2e7d32; color: #fff; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 13px; width: fit-content; display: inline-flex; align-items: center; gap: 5px; }
        .call-btn:hover { background: #1b5e20; }

        /* Pagination Layout Controls */
        .pagination-container { display: flex; justify-content: center; align-items: center; gap: 15px; margin: 30px auto; max-width: 900px; }
        .page-info { font-weight: bold; color: #555; }
    </style>
</head>

<body>

<div class="header">
    <h1>&#129656; BloodWay Donor Search</h1>
</div>

<div class="search-box">
    <div class="row">
        <select id="blood_group">
            <option value="">All Blood Groups</option>
            <option value="O+">O+</option>
            <option value="O-">O-</option>
            <option value="A+">A+</option>
            <option value="A-">A-</option>
            <option value="B+">B+</option>
            <option value="B-">B-</option>
            <option value="AB+">AB+</option>
            <option value="AB-">AB-</option>
        </select>
        
        <select id="state_input" name="state_input" class="neon-input" required></select>
        <select id="district_input" name="district_input" class="neon-input" required></select>
        
        <script language="javascript">
            populateStates("state_input", "district_input");
        </script>
        
        <input type="text" id="location" placeholder="Location">

        <button onClick="resetSearch()">Search</button>
    </div>
</div>

<div class="loading" id="loading">Searching donors...</div>
<div class="results" id="results"></div>

<div class="pagination-container" id="pagination_controls" style="display: none;">
    <button id="prev_btn" onClick="changePage(-1)">&larr; Previous</button>
    <span class="page-info" id="page_num">Page 1 of 1</span>
    <button id="next_btn" onClick="changePage(1)">Next &rarr;</button>
</div>

<script>
let currentPage = 1;
const itemsPerPage = 10; 
let totalPages = 1;

function resetSearch() {
    currentPage = 1;
    searchDonors();
}

function changePage(direction) {

    currentPage += direction;
    searchDonors();
}

function searchDonors() {
    let blood_group = document.getElementById('blood_group').value.trim();
    let state = document.getElementById('state_input').value.trim();
    let district = document.getElementById('district_input').value.trim();
    let location = document.getElementById('location').value.trim();

    document.getElementById('loading').style.display = 'block';
    document.getElementById('results').innerHTML = '';
    document.getElementById('pagination_controls').style.display = 'none';
	
	
    // Replace with your BloodWay API Key
    const API_KEY = "YOUR_API_KEY"; 



    let params = new URLSearchParams();
    params.append('api_key', API_KEY);
    params.append('page', currentPage);
    params.append('limit', itemsPerPage);

    if (blood_group !== '') params.append('blood_group', blood_group);
    if (state !== '')       params.append('state_input', state);
    if (district !== '')    params.append('district_input', district);
    if (location !== '')    params.append('location', location);

    let url = 'https://bloodway.xyz/api/index.php?' + params.toString();

    fetch(url)
    .then(response => response.json())
    .then(data => {
        document.getElementById('loading').style.display = 'none';
        let html = '';

        if (data.success && data.total > 0) {
            totalPages = data.total_pages;

            data.donors.forEach(function(donor) {
                let statusBadge = donor.available 
                    ? `<span class="badge available">Available</span>` 
                    : `<span class="badge unavailable">Unavailable (${donor.days_until_next} days left)</span>`;

                html += `
                <div class="card">
                    ${statusBadge}
                    <h3>${donor.name}</h3>
                    <div class="info">
                        <div><b>Blood Group:</b> ${donor.blood_group}</div>
                        
                        <div> <button onclick="redirectToCall(${donor.id})" class="call-btn">&#128222; Call Donor</button></div>
                        
                        <div><b>Last Donation:</b> ${donor['last-donation'] || 'Never'}</div>
                        <div><b>State:</b> ${donor.state}</div>
                        <div><b>District:</b> ${donor.district}</div>
                        <div><b>Location:</b> ${donor.loccation}</div>
                    </div>
                </div>`;
            });

            document.getElementById('results').innerHTML = html;

            if(totalPages > 1) {
                document.getElementById('pagination_controls').style.display = 'flex';
                document.getElementById('page_num').innerText = `Page ${currentPage} of ${totalPages} (Total Donors: ${data.total})`;
                document.getElementById('prev_btn').disabled = (currentPage === 1);
                document.getElementById('next_btn').disabled = (currentPage === totalPages);
            }

        } else {
            let message = data.message || data.error || 'No donors found.';
            document.getElementById('results').innerHTML = `<div class="no-data">${message}</div>`;
        }
    })
    .catch(error => {
        document.getElementById('loading').style.display = 'none';
        document.getElementById('results').innerHTML = '<div class="no-data">Unable to load donors.</div>';
        console.error(error);
    });
}

// Redirect client interaction handler
function redirectToCall(donorId) {
    // Navigates the current tab view straight into our verification endpoint using URL queries
    window.location.href = 'https://bloodway.xyz/api/log_contact.php?donor_id=' + donorId;
}

searchDonors();
</script>

</body>
</html>
🛡️

BloodWay Community

Every blood donor is a lifesaver.
Join BloodWay and help patients find blood donors during emergencies.

❤ Save Lives ⛨ Emergency Alerts 🏥 Help Your Community
Join BloodWay Now
...