< Webflow

Webflow + Cotter

In this recipe, you'll learn how to build a webflow site with passwordless login using magic link.

If you need any help following this tutorial, head to our Slack Channel! We're here to help.



Instructions:

  1. Create a Call to Action button (for example: Login)

  2. 

  3. Go to https://dev.cotter.app to create an account. 

  4. On the left menu bar, click "Forms & Fields".

  5. Copy the Login Link URL and insert it to your Call-to-Action button.

  6. 

  7. Copy and paste the following code block to your Project Settings Custom Code <head> section.

    <script
        src="https://unpkg.com/cotter@0.3.31/dist/cotter.loader.js"
        type="text/javascript"
        data-cotter-api-key-id="<YOUR API KEY ID>"
    ></script>







Optional Features:

Feature 1: Protected Pages To protect a page is to limit the page's access only to logged-in users.



Set protected page URL

  1. On the left menu bar, click "Protected Pages".

  2. Enter the URL of the page you want to protect.





Only allow certain emails or phone numbers to login to your site

  1. Still under "Protected Pages" in the left menu bar, click on "Who can login to your website?"

  2. Follow the prompts.



Feature 2: Form Rules Only allow certain emails/phone numbers to use your login form

  1. On the left menu bar, click "Rules".

  2. Click on "Who can use this form?" and follow the prompts.





Send successful form submission (logged in user data) to 3rd party apps

  1. Still under "Rules" in the left menu bar, click on "Send successful form submission".

  2. Follow the prompts.





☁️Made with Typedream