#M Platform Technical Reference
This document outlines how the #M unified footer, modal system, and Firebase audience counter were designed and deployed. It also explains Google Scripts, Firebase, Google Sheets integrations, and Node.js/NPM setup for contributors or developers maintaining the system.
1. Overview
The unified Footer Injection Script combines the navigation, footer,
modals, success overlay, and audience counter into a single optimized code block.
It eliminates unnecessary animations and loads Firebase only on the homepage (/).
2. Architecture Summary
| Component | Description | Technologies Used |
|---|---|---|
| Floating Nav | Overlay triggered by ☰ icon | HTML, CSS, JS |
| Footer | Full-width layout with CTAs + legal links | HTML, CSS variables |
| Modals | Pop-ups for forms | JavaScript event handling |
| Success Overlay | Post-form confirmation | CSS transitions |
| Audience Counter | Realtime role tracking | Firebase Realtime DB |
3. Firebase Setup
Firebase is initialized silently on the homepage and listens to the /stats node.
Data structure example:
{
"stats": {
"decisionMakers": 0,
"entrepreneurs": 0,
"influencers": 0
}
}
Firebase Config:
{
"apiKey": "AIzaSyARbR-UwiihSoHEgHPLC9ajJoE_7HPL0hg",
"authDomain": "m-audience-counter.firebaseapp.com",
"databaseURL": "https://m-audience-counter-default-rtdb.firebaseio.com",
"projectId": "m-audience-counter",
"storageBucket": "m-audience-counter.firebasestorage.app"
}
4. Audience Counter Logic
- Loads Firebase SDKs dynamically when on
/. - Initializes and listens for
on("value")updates. - Updates DOM counts and bar charts in real-time.
- Stores visitor selection in
sessionStorageto prevent re-voting.
db.ref("/stats/"+key).transaction(cur => (cur || 0) + 1);
5. Google Sheets Integration (Optional)
You can sync Firebase stats to Google Sheets using a Google Apps Script Web App:
function doPost(e) {
var sheet = SpreadsheetApp.openById("YOUR_SHEET_ID").getSheetByName("Votes");
var data = JSON.parse(e.postData.contents);
sheet.appendRow([new Date(), data.role, data.count]);
return ContentService.createTextOutput("OK");
}
6. Google Apps Script Form Relay
Used when replacing Google Form embeds with silent submissions:
function doPost(e) {
var ss = SpreadsheetApp.openById("YOUR_SHEET_ID");
var sheet = ss.getSheetByName(e.parameter.formType || "Leads");
sheet.appendRow([new Date(), e.parameter.name, e.parameter.email, e.parameter.message]);
return ContentService.createTextOutput("formSuccess");
}
7. Performance Optimization
- Single inline bundle (CSS + JS combined).
- Firebase loads lazily only on the homepage.
- No console logs, animations, or external blocking scripts.
- Session caching prevents duplicate user votes.
8. NPM / Node.js Local Dev Setup
npm init -y
npm install firebase express node-fetch
import express from "express";
import { initializeApp } from "firebase/app";
import { getDatabase, ref, get } from "firebase/database";
const app = express();
initializeApp(firebaseConfig);
const db = getDatabase();
app.get("/", async (req, res) => {
const snap = await get(ref(db, "/stats"));
res.json(snap.val());
});
app.listen(3000, () => console.log("Local test server running"));
9. Security & Permissions
{
"rules": {
"stats": { ".read": true, ".write": true }
}
}
Writes are limited to numeric counters only — no PII is collected.
10. Maintenance & Troubleshooting
| Issue | Possible Cause | Solution |
|---|---|---|
| Modals not opening | Missing aria toggle | Ensure footer script loads last |
| Firebase not initializing | Not on homepage | Check location.pathname |
| Counter frozen | DB permission or null snapshot | Review Firebase rules |
11. Version Control
- Footer Injection Bundle: v3.0 (Oct 2025)
- Firebase Config: v1.2 (Oct 2025)
- Modal & Form Scripts: v2.1 (Oct 2025)
- Google Sheets Relay: v1.0 (Optional)
12. Future Enhancements
- Add Firebase Analytics to track engagement.
- Enable lazy-loading for modal iframes.
- Convert inline bundle into reusable Squarespace code blocks.
- Optional export automation to Google Sheets via Cloud Functions.