#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
ComponentDescriptionTechnologies Used
Floating NavOverlay triggered by ☰ iconHTML, CSS, JS
FooterFull-width layout with CTAs + legal linksHTML, CSS variables
ModalsPop-ups for formsJavaScript event handling
Success OverlayPost-form confirmationCSS transitions
Audience CounterRealtime role trackingFirebase 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
  1. Loads Firebase SDKs dynamically when on /.
  2. Initializes and listens for on("value") updates.
  3. Updates DOM counts and bar charts in real-time.
  4. Stores visitor selection in sessionStorage to 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
IssuePossible CauseSolution
Modals not openingMissing aria toggleEnsure footer script loads last
Firebase not initializingNot on homepageCheck location.pathname
Counter frozenDB permission or null snapshotReview 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.
Now Live Loading...