FEATURE

No-Code Dashboard: Two Simple Steps to Add Login Form to Webflow Websites

All new Cotter No-Code Dashboard: Add magic link to your Webflow site in 2 simple steps!


ALBERT PUTRA PURNAMA

28 JAN 2021 • 2 MIN READ







In this tutorial, we are going to guide you on how to authenticate your users using magic link with Cotter's new no-code dashboard and Webflow.

Here's what you'll need:

  • A basic Webflow plan

  • A Cotter account (click here to get one)



Step 1: Customize your Cotter login form

Head to Cotter's developer dashboard > Projects > Forms & Fields





This whole page is designed for the no-code community to easily customize their login forms and add them to their no-code website builders (Webflow, Bubble, etc.).

Fill in the page you want to redirect your users to after they successfully logged in

(See the bottom red square on the previous screenshot). For this example, the redirect page is set to /welcome.



Step 2: Webflow setup

Create 2 pages, you can design these 2 pages however you like

  1. A login page that contains a login button.

  2. A welcome page to welcome your newly registered users. The URL needs to match the URL you will take your users to after successful login (from previous example: /welcome).

Next, you have to add the following code to your custom code <head> section  in projects settings page.



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



You should have something like the following:





Insert Login Link to the login button you created on your login page

Head to Cotter's developer dashboard > Projects > Forms & Fields





Then click on the purple Login Link button then click on the copy icon indicated by the red square.

Finally, insert the Login Link to the login button you created.

You're done 🎉

You can save the project and publish it. You should be able to log your users in.


Questions & Feedback

Come and talk to the founders of Cotter and other developers who are using Cotter on Cotter's Slack Channel.

Ready to use Cotter?

If you enjoyed this tutorial and want to integrate Cotter into your website or app, you can create a free account and check out our documentation.

If you need help, ping us on our Slack channel or email us at [email protected]

Made in Typedream