Register
Home About Services Search Contact Host Camp API Donor Login Admin Login
Developer API Access

Integrate BloodWay API

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

22

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_BLOODWAY_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>`;

    // Detect if the donor profile is female (handles variation in data syntax)
    let isFemale = donor.gender && (donor.gender.toLowerCase().trim() === 'female' || donor.gender.toLowerCase().trim() === 'f');

    // Dynamically change UI layout and click handler depending on privacy criteria
    let contactButton = isFemale
        ? `<button onclick="handleContact(${donor.id}, 'female')" class="call-btn" style="background: #0288d1;"><span style="font-size: 14px;">&#x2709;</span> Sent Mail Request</button>`
        : `<button onclick="handleContact(${donor.id}, 'male')" class="call-btn">&#128222; Call Donor</button>`;

    html += `
    <div class="card">
        ${statusBadge}
        <h3>${donor.name}</h3>
        <div class="info">
            <div><b>Blood Group:</b> ${donor.blood_group}</div>
            
            <div>${contactButton}</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);
    });
}

// Controls conditional routing logic based on donor gender classification
function handleContact(donorId, gender) {
    if (gender === 'female') {
        // Secure email pathway protocol for female donors
        let searcherPhone = prompt("To protect donor privacy, female donors are contacted via secure alerts. Please enter your phone number so they can call you back:");
        
        if (searcherPhone === null) return; // Action aborted by user
        
        searcherPhone = searcherPhone.trim().replace(/[^0-9+]/g, '');
        if (searcherPhone.length < 10) {
            alert("Please provide a valid contact number so the donor can reach you.");
            return;
        }

        // Change target button display context to prevent double clicks
        const eventButton = window.event ? window.event.target : null;
        let originalText = "";
        if (eventButton && eventButton.tagName === 'BUTTON') {
            originalText = eventButton.innerHTML;
            eventButton.disabled = true;
            eventButton.innerHTML = "Sending Alert...";
        }

        let formData = new FormData();
        formData.append('donor_id', donorId);
        formData.append('searcher_phone', searcherPhone);

       // Executes asynchronous processing matching your backend structural setup
fetch('https://bloodway.xyz/inc/send_email.php', {
    method: 'POST',
    body: formData
})
.then(async response => {
    // Read the raw text response from the server (can contain PHP crash details or custom errors)
    const serverResponseText = await response.text();
    
    if (response.ok) {
        alert("Contact request sent successfully! The donor has been notified with your information.");
    } else {
        // This will pop up the exact HTTP error code and whatever message PHP outputted
        alert(`Server Error (${response.status}): ${serverResponseText || 'No response text provided by server.'}`);
    }
})
.catch(error => {
    console.error("Handshake Failure Error:", error);
    alert("Failed to submit contact request. Check your internet connection.");
})
.finally(() => {
    if (eventButton && eventButton.tagName === 'BUTTON') {
        eventButton.disabled = false;
        eventButton.innerHTML = originalText;
    }
});
    } else {
        // Direct processing phone routing line for male donors
        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
...