Summary (Cleanest Workflow)

⭐ Summary (Cleanest Workflow)

• ✔ Add new KPI data in a new tab inside your existing Google Sheets

• ✔ Update Apps Script to read the new tab and include it in the JSON

• ✔ Update existing deployment (NOT create a new one) to keep the same API URL

• ✔ Verify JSON output from your API URL

• ✔ Update index.html

  • add new KPI card HTML

  • add new CSS inside <style>

  • add new JS logic to read the new JSON block

• ✔ Redeploy Netlify using the same site

• ✔ Squarespace iframe updates automatically

• ✔ Test layout + data flow on desktop and mobile

⭐ Action Plan: Add a New KPI Card to Your Dashboard

1️⃣ Add New KPI Data to Google Sheets

• Create a new tab (e.g., KPI_NewCard).

• Add your metric name, value, hex colors, or any fields you need.

• Keep the tab modular and clean.

Use: Design new KPI tab

2️⃣ Update Apps Script to Include the New Tab

• Open your existing Apps Script project.

• Add a new getSheetByName("KPI_NewCard").

• Add logic to read the tab’s rows/columns.

• Add a new JSON block (e.g., "kpi_newcard": [...]).

• Deploy → Manage Deployments → Update existing deployment

  • This keeps your API URL the same.

Use: Update Apps Script

3️⃣ Verify JSON Output

• Open your API URL in the browser.

• Confirm you see the new "kpi_newcard" block.

• Ensure the structure is clean and predictable.

Use: Validate JSON

4️⃣ Update Your Netlify Project (index.html)

This is where you style the new KPI card.

Inside index.html:

A. Update HTML

• Add a new <div class="kpi-card ..."> for your new KPI.

Use: HTML structure for new KPI

B. Update CSS inside <style>

• Add new border style class (if needed).

• Add new hex colors.

• Add layout rules if the card changes the grid.

Use: Place new CSS

C. Update JavaScript

• Add logic to read "kpi_newcard" from the JSON.

• Insert the value into the new KPI card.

Use: Connect JSON

5️⃣ Redeploy Netlify

• Upload your updated project folder.

• Use the same Netlify site so your Squarespace iframe URL stays unchanged.

• Netlify publishes the new layout automatically.

Use: Netlify checklist

6️⃣ Squarespace Automatically Updates

• Because the Netlify URL stays the same, your iframe instantly reflects the new layout.

• No changes needed in Squarespace.

Use: Test Squarespace

7️⃣ Final Testing

• Verify the new KPI card loads data correctly.

• Check layout on desktop + mobile.

• Confirm holographic styling looks consistent.

Use: Style new KPI