Password protecting a link to an EXTERNAL site

This is admittedly an odd scenario: My client needs to password protect a link to an external site where they host other content. We both realize this is technically not secure (usually the external site would be password protected, not the outbound site), however the external content is not highly sensitive, just music education content. (The back story is rather long and complex, involving pandemic-era changes in IT policies at public schools blah blah blah).

So here’s the intended user journey:

  1. User goes to page (share link below) and can read general descriptions of curriculum
  2. User clicks on one of the six categories that links to content on Teachable (the external site; totally different platform than Webflow). This opens password entry page. Users with the password can then proceed to Teachable; other users cannot.

Again, this is a completely weird scenario, but nonetheless it’s what I’m being asked to do.

Any tips?


Here is my site Read-Only: Webflow - Lead Guitar

Hey! You could likely achieve this with the password protection form completing and going to a blank page that has some custom javascript code to handle the redirect onload. Something like this should do the trick: javascript - HTML redirect on page load - Stack Overflow

Sure, you can do that. How you do it depends a lot on specifics.
Here are 3 approaches.

CMS PASSWORD-PROTECTED PAGE

  1. Put your curriculum items in a collection, let’s call it Curriculums
  2. In that collection, put your image, title, descriptive text, and the URL to the external content
  3. On your curriculum overview page, put a collection list and show that content ( the 6 curriculum overviews ) with button to open them. Set that to open in a new tab.
  4. Wire the button to go to the Collection Page for “current curriculum”
  5. Password-protect that Collection Page ( under its settings ).
  6. You can put further content on that page, with the button to the external resource… or you could just put a redirect on that page, so that the user is automatically sent to the external resource.

Note, everyone would have the same password, this is using Webflow’s basic password-protect feature.

USE PASSWORD-PROTECTED LINKS
Some URL services like Short.io offer password protection on their links.
With Short.io is part of their paid feature set, about $20/mo.

You generate a link, e.g. https://53c2.short.gy/locked
( password is 123 )

Then just use that link in your Webflow site.
Again, everyone must use the same password, and there’s a monthly fee- but you get nice pretty links if you want to configure them, plus link-click stats.

USE MEMBERSTACK, OR WEBFLOW MEMBERSHIPS BETA
These will give you similar abilities but with user-specific passwords that you can revoke. Again you’re adding monthly costs and some dev work but long term this gives you much more control than “change the password for everyone and notify the current userbase.”

Hey, Austin!
Thanks so much. This looks like it might be a good option. I checked out the Stack Overflow you provided but I’m a little new to the custom code thing. So I set the link (for first item; Lead Guitar Digital) to go to a blank page with a password set for it, dropped the embed code element in, and pasted in the code from the Stack Exchange thread, substituting the URL for the page I want to redirect to. My code snippet looks like this:

window.onload = function() {
    // similar behavior as clicking on a link
    window.location.href = "http://stackoverflow.com";
}

But despite having set the password on page settings, in Preview the link redirects to the blank redirect page with no “enter Password” stage. Furthermore, I can actually read the javascript code on the blank redirect page, which doesn’t seem right. What have I done wrong?

Here’s the Share Link for the blank page: Webflow - Lead Guitar

That’s because the browser needs to know that the code you are embedding is javascript edit your embed code to be as follows:

<script type="text/javascript">
window.onload = function() {
    // similar behavior as clicking on a link
    window.location.href = "https://your_website_here.com/";
}
</script> 
1 Like

I’m guessing you’ve already ruled out using password protection on the teachable site? I wasn’t clear by your description if (or why) that wasn’t an option for you.

Otherwise…

Another option I’m not seeing listed so far is to use a Make (Integromat) router. I do this kind of stuff all the time:

  1. Submit a native Webflow form to Make
  2. Make checks the passcode the user entered
  3. Redirects them to your own failure page or to teachable

Ahhh, gotcha. And now I see the message saying “This embed will only appear on the published site.”

Thanks a million, Austin! This is such a cool thing to learn. I really appreciate all the help folks like you provide. Take the rest of the day off and go buy yourself a margarita!

Hi, Chris,

Yes, while it would make far more sense for the Teachable site to have a password, my client doesn’t want to do that for reasons including there’s a range of different Users for the Teachable site, including students as young as 3rd grade to classroom teachers who are password-saturated. So we’re doing this the backwards way. :person_shrugging:

I’m going to try Austin’s suggestion as iot seems like the easiest for a Webflow beginner like me. But thanks a million for your input!

Hi, Michael.
Thanks for these suggestions (seriously, you guys are astounding in both breadth of knowledge and generosity). Because my client is a nonprofit, I will try Austin’s suggestion above as this will not incur any additional expense.
Cheers,
Scott

Austin and I were writing at the same time, and responded with the same #1.

The difference is if you have 6 resources you’re redirecting to, you’ll need 6 different password protected pages to do that. It’s why I suggested you just use the CMS for that, as you already have it in your project. Same approach, just a bit more centralized. Also a bit easier in that the client can add resources and change URLs later without trying to find the code.

Either way, make sure your client understands that once they give the password out, they won’t be able to take it back. That person will have access forever. The only way to revoke access is to change the password systemwide, and then notify everyone of the change.

1 Like

I see. That totally makes sense. Every time I hit a speed bump in Webflow, it turns into a valuable lesson thanks to you guys. Cheers!