Password protected section

A Carrd plugin template for a password-protecting a section(s) in Carrd.The /#pro Section is password-protected.
Click on the navigation link πŸ”’Pro to try it out! (Password is carrd). Tutorial here on how to set this plugin up on your Carrd site.
The /#customer01 Section is requires both username and password to access.
Click on the navigation link πŸ‘€Log in to try it out! (Username is john and password is carrd)

🚨 NOTE: This is only client-side protection. Anyone who's somewhat familiar with coding can view source and see it. To properly protect your page, please use a secured connection with your server.


Made by @jasonleowsg using plain vanilla Javascript.


About

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non consectetur a erat nam at lectus urna duis. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Mauris augue neque gravida in fermentum et sollicitudin ac. Massa massa ultricies mi quis hendrerit dolor magna eget. Erat pellentesque adipiscing commodo elit. Congue quisque egestas diam in. Suspendisse in est ante in nibh. Enim sed faucibus turpis in eu mi bibendum neque egestas. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Faucibus nisl tincidunt eget nullam non nisi est sit amet. Egestas erat imperdiet sed euismod nisi porta lorem. Morbi tincidunt ornare massa eget egestas purus viverra. Non quam lacus suspendisse faucibus. Faucibus a pellentesque sit amet porttitor. Tristique sollicitudin nibh sit amet commodo nulla. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Purus non enim praesent elementum facilisis leo vel fringilla est. Sapien pellentesque habitant morbi tristique senectus et netus et. Integer quis auctor elit sed.Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Pharetra sit amet aliquam id diam. Bibendum neque egestas congue quisque egestas. In tellus integer feugiat scelerisque varius. Est velit egestas dui id. Dignissim cras tincidunt lobortis feugiat vivamus at. Quisque id diam vel quam elementum pulvinar. Diam ut venenatis tellus in metus. Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Aliquam purus sit amet luctus venenatis. Ut morbi tincidunt augue interdum velit euismod in. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Accumsan in nisl nisi scelerisque eu ultrices vitae.

Features

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non consectetur a erat nam at lectus urna duis. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Mauris augue neque gravida in fermentum et sollicitudin ac. Massa massa ultricies mi quis hendrerit dolor magna eget. Erat pellentesque adipiscing commodo elit. Congue quisque egestas diam in. Suspendisse in est ante in nibh. Enim sed faucibus turpis in eu mi bibendum neque egestas. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Faucibus nisl tincidunt eget nullam non nisi est sit amet. Egestas erat imperdiet sed euismod nisi porta lorem. Morbi tincidunt ornare massa eget egestas purus viverra. Non quam lacus suspendisse faucibus. Faucibus a pellentesque sit amet porttitor. Tristique sollicitudin nibh sit amet commodo nulla. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Purus non enim praesent elementum facilisis leo vel fringilla est. Sapien pellentesque habitant morbi tristique senectus et netus et. Integer quis auctor elit sed.Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Pharetra sit amet aliquam id diam. Bibendum neque egestas congue quisque egestas. In tellus integer feugiat scelerisque varius. Est velit egestas dui id. Dignissim cras tincidunt lobortis feugiat vivamus at. Quisque id diam vel quam elementum pulvinar. Diam ut venenatis tellus in metus. Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Aliquam purus sit amet luctus venenatis. Ut morbi tincidunt augue interdum velit euismod in. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Accumsan in nisl nisi scelerisque eu ultrices vitae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non consectetur a erat nam at lectus urna duis. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Mauris augue neque gravida in fermentum et sollicitudin ac. Massa massa ultricies mi quis hendrerit dolor magna eget. Erat pellentesque adipiscing commodo elit. Congue quisque egestas diam in. Suspendisse in est ante in nibh. Enim sed faucibus turpis in eu mi bibendum neque egestas. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Faucibus nisl tincidunt eget nullam non nisi est sit amet. Egestas erat imperdiet sed euismod nisi porta lorem. Morbi tincidunt ornare massa eget egestas purus viverra. Non quam lacus suspendisse faucibus. Faucibus a pellentesque sit amet porttitor. Tristique sollicitudin nibh sit amet commodo nulla. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Purus non enim praesent elementum facilisis leo vel fringilla est. Sapien pellentesque habitant morbi tristique senectus et netus et. Integer quis auctor elit sed.Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Pharetra sit amet aliquam id diam. Bibendum neque egestas congue quisque egestas. In tellus integer feugiat scelerisque varius. Est velit egestas dui id. Dignissim cras tincidunt lobortis feugiat vivamus at. Quisque id diam vel quam elementum pulvinar. Diam ut venenatis tellus in metus. Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Aliquam purus sit amet luctus venenatis. Ut morbi tincidunt augue interdum velit euismod in. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Accumsan in nisl nisi scelerisque eu ultrices vitae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non consectetur a erat nam at lectus urna duis. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Mauris augue neque gravida in fermentum et sollicitudin ac. Massa massa ultricies mi quis hendrerit dolor magna eget. Erat pellentesque adipiscing commodo elit. Congue quisque egestas diam in. Suspendisse in est ante in nibh. Enim sed faucibus turpis in eu mi bibendum neque egestas. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Faucibus nisl tincidunt eget nullam non nisi est sit amet. Egestas erat imperdiet sed euismod nisi porta lorem. Morbi tincidunt ornare massa eget egestas purus viverra. Non quam lacus suspendisse faucibus. Faucibus a pellentesque sit amet porttitor. Tristique sollicitudin nibh sit amet commodo nulla. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Purus non enim praesent elementum facilisis leo vel fringilla est. Sapien pellentesque habitant morbi tristique senectus et netus et. Integer quis auctor elit sed.Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Pharetra sit amet aliquam id diam. Bibendum neque egestas congue quisque egestas. In tellus integer feugiat scelerisque varius. Est velit egestas dui id. Dignissim cras tincidunt lobortis feugiat vivamus at. Quisque id diam vel quam elementum pulvinar. Diam ut venenatis tellus in metus. Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Aliquam purus sit amet luctus venenatis. Ut morbi tincidunt augue interdum velit euismod in. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Accumsan in nisl nisi scelerisque eu ultrices vitae.

Contact us

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non consectetur a erat nam at lectus urna duis. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Mauris augue neque gravida in fermentum et sollicitudin ac. Massa massa ultricies mi quis hendrerit dolor magna eget. Erat pellentesque adipiscing commodo elit. Congue quisque egestas diam in. Suspendisse in est ante in nibh. Enim sed faucibus turpis in eu mi bibendum neque egestas. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Faucibus nisl tincidunt eget nullam non nisi est sit amet. Egestas erat imperdiet sed euismod nisi porta lorem. Morbi tincidunt ornare massa eget egestas purus viverra. Non quam lacus suspendisse faucibus. Faucibus a pellentesque sit amet porttitor. Tristique sollicitudin nibh sit amet commodo nulla. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Purus non enim praesent elementum facilisis leo vel fringilla est. Sapien pellentesque habitant morbi tristique senectus et netus et. Integer quis auctor elit sed.Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Pharetra sit amet aliquam id diam. Bibendum neque egestas congue quisque egestas. In tellus integer feugiat scelerisque varius. Est velit egestas dui id. Dignissim cras tincidunt lobortis feugiat vivamus at. Quisque id diam vel quam elementum pulvinar. Diam ut venenatis tellus in metus. Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Aliquam purus sit amet luctus venenatis. Ut morbi tincidunt augue interdum velit euismod in. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Accumsan in nisl nisi scelerisque eu ultrices vitae.

TUTORIAL

How to set up the password section plugin for your Carrd site:


1. Scroll to the #pro Section of this template. Recreate the Embed element password script in your Carrd site by copy-pasting over the code.


2. Position the Embed element inside your password protected Section.


3. Edit the code in the passport script Embed element you just copied over - change your preferred password at this line of the code:
var password = carrdSay your preferred password is join123, then the edited code should look like:var password = join123


4. Add this to the Settings > On Open field of the password-protected Section:
promptPass();Repeat this step to password-protect as many Sections as you want.


5. Publish, and done! Now whenever this particular Section is opened, users will be prompted for the password before they can view the contents of the Section. The password prompt happens even if they copy-paste the URL directly in the browser bar.