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 <img>, <video>, and link tags.

You don't build anything — FlowDrive does it all

There's no backend to write and no tokens to handle. You connect Memberstack once, mark files as secure in the dashboard, and add one attribute to your markup. Everything else happens on FlowDrive's servers, on every request:

• We read the visitor's Memberstack session for you — no code on your side.
• We verify it with Memberstack — that it's a real, current member, and (if you chose specific plans) that they're on one.
• We serve the file only if they pass, and a branded placeholder if they don't. The file itself never leaves the server unauthorized.

You never see a member's token, never call Memberstack yourself, and never write an auth check. Your page just has an <img> or <video> tag — FlowDrive decides, per visitor, whether the real file loads.

How it works

1. 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.
2. 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):

<script data-fd-id="YOUR_FD_ID" src='https://files.tryflowdrive.com/index.min.js'></script>

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.

3. 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)

4. 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:

<!-- Image -->
<img src="https://files.tryflowdrive.com/KSLBd4a4a52" data-fd-secure>

<!-- Video (the attribute on the <video> tag covers its <source> tags too) -->
<video controls data-fd-secure>
  <source src="https://files.tryflowdrive.com/KSLBd4a/versions/v_abc">
</video>

<!-- Download link -->
<a href="https://files.tryflowdrive.com/annual-report.pdf" data-fd-secure download>Download report</a>

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:

<img data-fd-secure="https://files.tryflowdrive.com/KSLBd4a4a52">

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

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 <head>.
• 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.