Tracker Widget App

Instructions and code generators for trackerwidget.carrd.co

Part 1 – Set up the widget

1. Set up your Google Sheet
  • Create a new Sheet at sheets.new
  • In row 1:
    • Column A: add 'Date'
    • Column B: add 'Active'
  • Go to File → Share, select Anyone with the link → Viewer
  • Copy and note your Sheet ID (the bit in between /d/ and /edit in the URL)
2. Create a Google Sheets API Key
  • Go to Google Cloud Console
  • Create/select a project
  • Go to APIs & Services → Library → enable “Google Sheets API”
  • Then find Credentials → Create Credentials → API Key
  • Copy and note the API key
  • You should resctrict the key, but you can come back and do that later
(API limits: ~100,000 requests/day, ~60 requests/100s per user)
3. Use the iframe generator
  • Add your Sheet ID and API key
  • Generate and Copy the code
  • Embed this code where you want your tracker to display
  • Test your tracker widget displays*
*At this stage it will display blank/grey, as you have not logged anything yet.

Tracker iframe code generator

Copied

Embed this code where you want your widget to display.

Part 2 – Set up the log button

Instructions

1. Set up a Google Apps Script
  • In your Google Sheet, go to Extensions → Apps Script.
  • Paste in this script, replacing all placeholder code and changing NAME to your sheet's tab name, (not your Sheets file name):
    function doPost(e) { const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("NAME"); const timestamp = Utilities.formatDate(new Date(), "GMT", "yyyy-MM-dd"); sheet.insertRowBefore(2); sheet.getRange(2, 1, 1, 2).setValues([[timestamp, true]]); return ContentService.createTextOutput("Row added successfully"); } Copied
  • Name your App Script
  • Click Deploy → New deployment
  • Click the cog next to Select type, select Web app
  • Name the deployment
  • Set it to Execute as → Me, Who has access → Anyone
  • Click Deploy
  • Copy and note the Web App URL it gives
2. Use the log button generator
  • Add your Apps Script URL
  • Change the button colors if you want
  • Generate and Copy the code
  • Embed this code where you want your button to live**
  • Test your button works and updates the Sheet/Tracker
That's it. Make sure you thoroughly test the workflow is functioning.
**Embed your button somewhere private, as anyone with access will be able to log actvity.

Log button code generator

Copied

Embed this code where you want your button to live. Put it on a secret or private page, as anyone with access will be able to log your activity.

Note it includes HTML, JS and CSS. You may need to embed these separately depending on what platform you're using.

You could Embed the raw generated code on Notion, if you follow these steps:

  1. Create a new Pen at codepen.io
  2. Put the <style> content in the CSS panel
  3. Put the HTML content inside <body> in the HTML panel
  4. Put the <script> code in the JS panel
  5. Don’t include <!DOCTYPE html> or <html>, <body>, <head>, <style>, <script> tags, they’re not needed in CodePen.
  6. Save the Pen – you may need to signup for a free account
  7. Get the URL (e.g., https: //codepen.io/username/pen/abcd1234)
  8. In Notion add in an Embed then paste the CodePen URL – Notion will render it as an interactive iframe
  9. Tip: Notion sometimes doesn’t auto-resize embeds perfectly. You can tweak the embed’s height in CodePen before copying the embed code.

Need a plain HTML page template to host it on? Grab the code below and add your generated content. You will need separate the code that was generated into HTML, CSS and JS. Add these where noted below. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PAGE TITLE HERE</title>
    <meta name="description" content="PAGE DESCRIPTION HERE">
    <meta name="robots" content="index, follow">
    <link rel="icon" href="" type="image/x-icon">
    <style>/* Generated CSS here */</style>
</head>
<body>
    <header><!-- Anything for the header goes here --></header>
    <main><!-- Generated HTML here --></main>
    <script>// Generated Javascript here</script>
</body>
</html>
Copied

You could then host this for free on Cloudflare or similar.