Urochithi Setup Guide

Complete documentation to deploy your own anonymous letter platform. Follow these steps to set up Urochithi on Netlify, GitHub, and Google Sheets in under 15 minutes.

📋

Prerequisites

Before you begin, make sure you have:

  • A GitHub account (free)
  • A Google account for Google Sheets
  • A Netlify account (free, can sign up with GitHub)
  • Basic understanding of copy-pasting and following instructions
💡 Note: No coding experience required! Just follow the steps carefully.
1

Fork the Repository

Start by creating your own copy of the Urochithi project on GitHub.

  1. Visit the Urochithi GitHub Repository
  2. Click the "Fork" button in the top-right corner
  3. Select your account as the destination
  4. Wait for GitHub to create your fork (takes ~10 seconds)
✓ Success: You now have your own copy at github.com/YOUR_USERNAME/urochithi
Fork on GitHub →
2

Create Google Sheet

Set up a Google Sheet to store all incoming anonymous messages.

  1. Go to Google Sheets
  2. Click "Blank" to create a new spreadsheet
  3. Name it something like "Urochithi Messages" or "Anonymous Letters"
  4. Leave the sheet completely blank - don't add any headers yet
💡 Important: The Apps Script will automatically create column headers (Timestamp, Message, Session ID) when the first message arrives. Keep the sheet empty!
Create New Sheet →
3

Set Up & Deploy Apps Script

Configure the Google Apps Script to receive and store messages from your website.

3.1 Open Apps Script Editor

  1. In your Google Sheet, click Extensions → Apps Script
  2. A new tab will open with the Apps Script editor
  3. Delete any existing code in the editor

3.2 Paste the Script

Copy and paste this entire code into the Apps Script editor:

function doPost(e) { try { const data = JSON.parse(e.postData.contents); const sheet = SpreadsheetApp.getActiveSheet(); if (sheet.getLastRow() === 0) { sheet.appendRow(["Timestamp", "Message", "Session ID"]); const headerRange = sheet.getRange(1, 1, 1, 3); headerRange.setFontWeight("bold"); headerRange.setBackground("#f0ede5"); headerRange.setHorizontalAlignment("center"); sheet.setColumnWidth(1, 180); sheet.setColumnWidth(2, 400); sheet.setColumnWidth(3, 200); } const row = [ data.timestamp || new Date().toISOString(), data.message || "", data.sessionId || "N/A" ]; sheet.appendRow(row); const lastRow = sheet.getLastRow(); sheet.getRange(lastRow, 2).setWrap(true); if (lastRow % 2 === 0) { sheet.getRange(lastRow, 1, 1, 3).setBackground("#faf8f3"); } return ContentService .createTextOutput(JSON.stringify({ ok: true })) .setMimeType(ContentService.MimeType.JSON); } catch (error) { return ContentService .createTextOutput(JSON.stringify({ ok: false, error: error.toString() })) .setMimeType(ContentService.MimeType.JSON); } }

3.3 Deploy as Web App

  1. Click the 💾 Save icon (or Ctrl+S / Cmd+S)
  2. Click Deploy → New deployment
  3. Click the gear icon ⚙️ next to "Select type"
  4. Choose Web app
  5. Configure settings:
    • Description: "Urochithi message receiver" (or anything)
    • Execute as: Select "Me"
    • Who has access: Select "Anyone"
  6. Click Deploy
  7. You may need to authorize the script - click Authorize access
  8. Choose your Google account and click Allow
⚠️ CRITICAL: Copy the Web app URL that appears after deployment. It looks like: https://script.google.com/macros/s/ABC.../exec

You'll need this URL in Step 6!
4

Customize Your Site

Edit the configuration file to personalize your Urochithi instance.

  1. Go to your forked repository on GitHub
  2. Navigate to js/config.js
  3. Click the pencil icon ✏️ to edit
  4. Update these values:
const CONFIG = { username: "your_username", // Your username or handle siteName: "YOUR SITE NAME", // Name of your letter site siteTagline: "Your custom tagline", // Tagline below name maxMessageLength: 2000, // Maximum characters (keep as-is) onboardingUrl: "/onboard.html" // Keep as-is };

Example configuration:

const CONFIG = { username: "john_doe", siteName: "JOHN'S INBOX", siteTagline: "Send me your thoughts", maxMessageLength: 2000, onboardingUrl: "/onboard.html" };
  1. Scroll down and click Commit changes
  2. Add a commit message like "Customize site config"
  3. Click Commit changes again
✓ Done: Your site is now personalized with your information!
5

Deploy to Netlify

Connect your GitHub repository to Netlify for automatic deployment.

5.1 Create Netlify Account (if needed)

  1. Go to Netlify
  2. Click Sign up and choose Sign up with GitHub
  3. Authorize Netlify to access your GitHub account

5.2 Import Your Repository

  1. On the Netlify dashboard, click Add new site → Import an existing project
  2. Click Deploy with GitHub
  3. Find and select your urochithi repository
  4. Leave all build settings as default (empty)
  5. Click Deploy [your-site-name]

Netlify will start deploying your site. This takes 1-2 minutes.

✓ Success: Your site will be live at https://random-name-123.netlify.app
You can customize this URL later in Netlify settings.
Deploy on Netlify →
6

Configure Environment Variables

Connect your site to the Google Apps Script by adding the deployment URL as an environment variable.

  1. In your Netlify site dashboard, go to Site configuration
  2. Click Environment variables in the left sidebar
  3. Click Add a variable → Add a single variable
  4. Fill in:
    • Key: GSCRIPT_URL (exactly as written, case-sensitive!)
    • Value: Your Google Apps Script Web App URL from Step 3
  5. Click Create variable
⚠️ Important: After adding the environment variable, you MUST redeploy:
  1. Go to Deploys tab
  2. Click Trigger deploy → Deploy site
  3. Wait for the new deployment to finish (~1 minute)
💡 Troubleshooting: If you get errors later, double-check:
  • Variable name is exactly GSCRIPT_URL (all caps)
  • URL is the complete Apps Script deployment URL
  • You redeployed after adding the variable
7

Test & Launch

Time to test your anonymous letter platform!

7.1 Send a Test Message

  1. Visit your Netlify site URL
  2. You should see your customized site name and username
  3. Type a test message in the textarea
  4. Click Send Letter
  5. You should see: "Your letter has been sent successfully!"

7.2 Verify in Google Sheet

  1. Go back to your Google Sheet
  2. Refresh the page
  3. You should see:
    • Column headers: Timestamp, Message, Session ID
    • Your test message in row 2
🎉 Congratulations! Your anonymous letter platform is live and working!

7.3 Share Your Site

Share your Netlify URL with friends, add it to your social media bio, or wherever you want to receive anonymous messages!

💡 Pro Tips:
  • Customize your Netlify domain: Site settings → Domain management → Options → Edit site name
  • Add a custom domain if you have one
  • Check your Google Sheet regularly for new messages
  • Session IDs help you identify messages from the same person

Need help? Found a bug? Want to contribute?

View on GitHub ← Back to Home