Documentation # Flowdrive docs

    # Secured Files with Memberstack

Protect files and folders so only your logged-in Memberstack members can view them — on your own site, with your normal ``, ``, and link tags.

## How it works

- **Connect Memberstack once** — Settings → Integrations → Memberstack. Paste your secret key(s). You can start with just your **sandbox key** (`sk_sb_...`) and add the live key when your site goes live.

- **Make sure the FlowDrive script is on your site** — it's the SAME script tag as the upload widget, so if you already use the widget you're done. Otherwise add it (Webflow → Site Settings → Custom Code → Head Code):

html

``

Your ready-to-paste snippet (with your real `data-fd-id`) is in **Settings → Integrations** on the Memberstack card. One script handles uploads and secured files, on your live domain **and** your `.webflow.io` staging site automatically.

- **Secure a folder or file** — in FlowDrive, open any file or folder → **⋯ → Secure** → Private → Memberstack. Choose who gets access: **All logged-in members**, or

- **Members on specific plans** (pick plans by name)

- **Mark your secured files in your markup with data-fd-secure** — add this one attribute to any image, video, or link that shows a secured file. It tells the script which elements to authorize, and members with access get the real file swapped in automatically:

html

`   tag covers its  tags too) -->     Download report`

In Webflow, select the element → Settings panel (⚙) → **Custom attributes** → add `data-fd-secure` with an empty value.

Your URLs stay exactly as they are — thumbnails (`?thumbnail`), versions, and **custom domains** (`assets.yoursite.com`) all keep working. On custom domains the attribute is **required** (it's how the script finds your files); on `files.tryflowdrive.com` URLs it's recommended but files are also detected automatically.

**Optional — no placeholder flash:** put the URL *inside* the attribute and leave `src`/`href` empty. The element loads nothing at all until the visitor is authorized — the real file for members, the placeholder for everyone else:

html

``

That's it. Visitors without access only ever see the branded placeholder — the file itself never leaves the server unauthorized.

## Securing a whole folder

Securing a folder protects **everything inside it**: all files, all subfolders, and **every future upload** into it. You'll see a confirmation before it applies.

- Files you've configured **individually** keep their own settings — a folder change never overrides them.

- Making a folder public again unlocks only the files **it** secured.

- Moving a file into a secured folder protects it; moving it out releases it.

## What visitors see

Visitor
Result

Logged-in member (with access)
The file, full speed

Logged-in member (wrong plan)
A branded "no access" placeholder

Not logged in
A branded "log in to view" placeholder

Link shared on another site
The placeholder — secured links are dead outside your site

Bots / scrapers / direct downloads
The placeholder

## Testing on your staging site

Your `.webflow.io` staging site runs Memberstack in **test mode** — add your sandbox key (`sk_sb_...`) in the integration settings and everything works there with your test members. Note: staging uses temporary signed links; your live domain gets full protection.

## Troubleshooting

**Members see the locked placeholder instead of files**

- The script tag is missing or below other failing scripts — it belongs in the site-wide ``.

- The element is missing the `data-fd-secure` attribute — required on custom file domains, recommended everywhere (see step 4 above).

- The member's plan isn't in the allowed list for that file/folder.

- Your site is live but only a sandbox key is connected — add your live key in Settings → Integrations → Manage.

**Files show as public after securing**

- Hit ↻ Refresh on the integration card, and check the file's Secure tab — files inside a secured folder show "Protected by its parent folder."

**Plans aren't showing in the plan picker**

- Plans appear once at least one member has joined them. Use ↻ Reload in the plan picker, or paste plan IDs manually.