Quickstart Guide

Get personalized content on your site in under 10 minutes.

ASheet Format

Your CSV (or Google Sheet) must follow this structure:

key	default	agency	saas
headline	The fastest way to personalize	Agency-grade personalization	Personalize your SaaS
cta	Get Started	Get Agency Playbook	Start SaaS Trial

Rules:

First column must be named key
Second column should be default (fallback content)
Additional columns are segment names (lowercase recommended)
Keys are case-sensitive and must match your HTML attributes

BHow to Publish Your Sheet as CSV

Option 1: Google Sheets (recommended)

Create or import your sheet in Google Sheets
Go to File → Share → Publish to the web
Choose your sheet tab and select Comma-separated values (.csv)
Click "Publish" and copy the URL
The URL looks like: https://docs.google.com/spreadsheets/d/e/2PACX-.../pub?output=csv

Option 2: Static file hosting

Host the CSV file on GitHub (raw URL), AWS S3, Cloudflare R2, or your own domain. Any public URL that serves text/csv or text/plain will work.

CHow the Snippet Maps Keys & Segments

The snippet reads the URL query parameter specified by data-segment-param (default: sf). For example, if a visitor lands on yoursite.com/?sf=agency, the active segment is agency.

For each element with a data-sf-key attribute:

Look up the key in the CSV map (e.g., headline)
Try to get the value for the active segment (e.g., agency)
If that segment column is empty or missing, fall back to default
If data-sf-attr is set (e.g., data-sf-attr="href"), set that HTML attribute instead of text content
If no URL parameter is present, the default column is used

your-page.html

<!-- Add to <head> -->
<script src="https://mvp.snippetforge.app/snippet/v0.js"
  data-config-url="https://docs.google.com/.../pub?output=csv"
  data-segment-param="sf"></script>

<!-- In your page body -->
<h1 data-sf-key="headline">Default headline</h1>
<p data-sf-key="subheadline">Default subheadline</p>

<!-- Set an attribute instead of text -->
<a data-sf-key="cta_url" data-sf-attr="href" href="/default">
  <span data-sf-key="cta">Default CTA</span>
</a>

<!-- Works on any element -->
<img data-sf-key="hero_image" data-sf-attr="src" src="/default.jpg" alt="Hero" />

DTroubleshooting

CORS errors

If your CSV is hosted on a different domain, ensure the server sends Access-Control-Allow-Origin: * headers. Google Sheets published URLs include CORS headers by default. For static hosting (S3, R2), configure CORS on the bucket.

Content not updating

Google Sheets published CSV has a cache delay of a few minutes. If you just edited your sheet, wait 2-5 minutes and hard-refresh (Ctrl+Shift+R). For instant updates during development, host the CSV on your own domain.

Elements not personalizing

Check that:

The data-sf-key value exactly matches a key in your CSV (case-sensitive)
The script tag has data-config-url set to a valid, publicly accessible URL
Add data-debug="1" to the script tag and check the browser console for logs

Timeout errors

The snippet has a 2-second timeout. If your CSV host is slow, the snippet will fail gracefully and leave default content in place. Check your CSV URL loads directly in the browser.

EPrivacy

SnippetForge is privacy-first by design:

No cookies — the snippet never reads or writes cookies
No localStorage — nothing is persisted in the browser
No analytics or tracking — no pixels, no fingerprinting
No external requests — it only fetches YOUR CSV from YOUR URL
No server-side processing— everything runs client-side in the visitor's browser

The only network request is a single GET to the CSV URL you configure. No data about your visitors ever leaves their browser.

Ready to start?

📥 Download CSV Template See Live Demo →