Division Network Integration
Copy-paste code for divisional apps to sync with SUN network
What This Does
- ✅ Users active on your division show as "available" on SphereUs.com
- ✅ Real-time availability status across the entire SUN network
- ✅ Members can find available service providers instantly
- ✅ Auto-offline after 10 minutes of inactivity
Prerequisites
⚠️ Your division app must:
- Already have SSO login working (redirect to SphereUs.com)
- Store the
sphereus_tokenin localStorage after login - Be a Base44 app OR any web app that can make API calls
If you don't have SSO yet, see the Division API Guide
Step 1: Add Network Activity Tracker (React)
Create a new component in your division app:
// Add this to your division app's main layout or App component
// This keeps users showing as "active" across the SUN network
import { useEffect, useRef } from 'react';
export default function NetworkActivityTracker() {
const lastUpdateRef = useRef(null);
const updateNetworkActivity = async () => {
const token = localStorage.getItem('sphereus_token'); // Token from SSO
if (!token) return;
const now = Date.now();
// Only ping every 2 minutes to avoid excessive API calls
if (!lastUpdateRef.current || now - lastUpdateRef.current > 120000) {
try {
await fetch('https://wirks.com/api/functions/updateNetworkActivity', {
method: 'POST',
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
}
});
lastUpdateRef.current = now;
} catch (error) {
console.error('Failed to update network activity:', error);
}
}
};
useEffect(() => {
// Track user activity
const handleActivity = () => updateNetworkActivity();
const events = ['mousedown', 'keydown', 'scroll', 'touchstart'];
events.forEach(e => window.addEventListener(e, handleActivity));
// Initial ping
handleActivity();
return () => {
events.forEach(e => window.removeEventListener(e, handleActivity));
};
}, []);
return null; // No UI needed
}
// Then add <NetworkActivityTracker /> to your main layout✅ That's it!
Once added to your layout, users active on your app will automatically show as available on SphereUs.com
Alternative: Vanilla JavaScript (Non-React Apps)
Add this script to your HTML or main JavaScript file:
// If you're NOT using React, use this vanilla JavaScript version:
(function() {
let lastUpdate = null;
function updateNetworkActivity() {
const token = localStorage.getItem('sphereus_token');
if (!token) return;
const now = Date.now();
if (!lastUpdate || now - lastUpdate > 120000) {
fetch('https://wirks.com/api/functions/updateNetworkActivity', {
method: 'POST',
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
}
}).then(() => {
lastUpdate = now;
}).catch(err => {
console.error('Failed to update network activity:', err);
});
}
}
// Track activity
const events = ['mousedown', 'keydown', 'scroll', 'touchstart'];
events.forEach(e => window.addEventListener(e, updateNetworkActivity));
// Initial ping
updateNetworkActivity();
})();Optional: Check User Availability
If you want to show availability status in your division UI:
// Check if a user is available (optional - for showing availability in your UI)
const checkUserAvailability = async (userEmail) => {
const token = localStorage.getItem('sphereus_token');
const response = await fetch(
'https://wirks.com/api/functions/getUserAvailability?email=' + userEmail,
{
headers: { 'Authorization': 'Bearer ' + token }
}
);
const data = await response.json();
// data.availability_status: "available", "busy", "away", or "offline"
// data.is_available: true/false
// data.last_activity: timestamp
return data;
};
// Example: Show availability badge
const user = await checkUserAvailability('user@example.com');
if (user.is_available) {
console.log(user.full_name + ' is available!');
}Testing the Integration
- Add the code to your division app and deploy
- Log in to your division app via SSO from SphereUs.com
- Use your division app for 30 seconds (click, scroll, etc.)
- Go to SphereUs.com/MemberDirectory
- Your profile should show a Availablebadge
API Endpoints
POST
https://wirks.com/api/functions/updateNetworkActivityHeaders: Authorization: Bearer YOUR_TOKEN
GET
https://wirks.com/api/functions/getUserAvailability?email=user@example.comHeaders: Authorization: Bearer YOUR_TOKEN
💬 Need Help?
Contact the SphereUs platform team for integration support or questions.