Try it!

In this tutorial we're going to guide you on how to create an RSVP-only event on Webflow.

People can request to attend the event by filling out their email. The admin will then determine whether or not the email is "allowed" to RSVP and get access to the event details.

Part 1: Cotter Setup

Go to https://dev.cotter.app to create an account. Once you have created an account, make sure to create a new project and grab the API Key ID. We will be using your API Key ID later in part 3.

Part 2: Webflow Setup

For this tutorial, we will create 3 pages: Event Homepage, Sign In Page, and Event Details Page. We will be using Webflow CMS to create the Event.

Event Homepage Setup

The Event Homepage contains a list of your events and an overview of each event. It also contains a form for people to request to RSVP to the event. A person who wants to see the event details will need to request to RSVP to the event. The event admin will then determine whether or not the person is allowed to RSVP. If the person is allowed to RSVP, then the person can login and access the event details.

Make the RSVP form

Step 1: Set up Google Sheets

Go to https://cotteremaillist.herokuapp.com to connect your Google Sheets that contains a list of emails and follow the instructions there. See an example Google Sheet here. (You can make this sheet private - you just need to connect your Google Account in the website above).

Step 2: Make elements to show the waitlist email form and a success message

  • Include a section element to load Cotter's login form. We need to set that section id "cotter-form-container".
  • Include a text element with id "waitlist-message". We will show if the email is successfully added to the waitlist here.

Step 3: Add Cotter JS SDK

After finishing the page setup we can start with adding custom code to the Event Homepage. Copy paste the code below to the custom code tab on the Event Homepage settings.

Page Settings
Scroll down to "Custom Code" section

Add the code below to the head of Event Homepage

<!--Get Cotter JS SDK-->
<script
    src="https://unpkg.com/[email protected]/dist/cotter.min.js"
    type="text/javascript"
></script>

Step 4: Add a function to insert email to your Google Sheets

Make sure you have already done Step 1 by going to https://cotteremaillist.herokuapp.com and connecting your Google Sheets that contains the waitlist (this can be empty, but make sure you follow the format specified).

Add the code below to the body of the Event homepage

<script>
    const insertEmail = async (payload) => {
        try {
            const body = {
                spreadsheetId: "YOUR SPREADSHEET ID",
                apiKeyID: "YOUR API KEY ID",
                email: payload.email,
                allowed: false // By default, new emails are not allowed to login
            };
            let resp = await fetch(
                "https://cotteremaillist.herokuapp.com/api/insertemail",
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify(body)
                }
            );
            let respBody = await resp.json();
            if (respBody.success) {
                document.getElementById("waitlist-message").innerHTML =
                    "RSVP request received.";
            } else {
                document.getElementById("waitlist-message").innerHTML =
                    "Something went wrong";
            }
        } catch (e) {
            document.getElementById("waitlist-message").innerHTML =
                "Something went wrong";
        }
    };
</script>

Make sure that you have pasted your Spreadsheet ID and your API Key ID on the code block above.

Step 5: Add the code below to show the email form ("RSVP" form)

Below the code on Step 4, add this code

<script>
    var cotter = new Cotter({
        	ApiKeyID: "YOUR API KEY ID",
		    ButtonText: "RSVP to Cotter Coding Club Events!",
        }); // 👈 Specify your API KEY ID here
    cotter
        .signInWithLink() // Verify email with Magic Link
        .showEmailForm() // Send Magic Link via email
        .then((payload) => {
        insertEmail(payload);
    })
        .catch((err) => {
        // handle error
    });
</script>

Make sure that you have pasted your API Key ID on the code block above.

If the person is on the "allowed" list and is already signed in, then he/she will be redirected to the Event Details Page.

<script>
// 1. We check if a user has already logged in
var cotterOAuthToken = localStorage.getItem("user_session");

// 2. Fetch the user data
let token = JSON.parse(cotterOAuthToken);

// 3. Display user email
let authButton = document.getElementById("auth-button")

if(!!cotterOAuthToken) authButton.innerHTML = "Sign Out"

authButton.addEventListener("click", () => {
	window.localStorage.setItem("redirect_url_after_login", window.location.href);
	window.localStorage.removeItem("user_session");
});
</script>

Login Page Setup (where the login form will show up)

Step 1: Follow Cotter's Webflow "Protected Page" Tutorial

Step 2: Add the code below to the body of the Login Page. Add this code before you initialize Cotter

<script>
    const checkEmail = async (payload) => {
        try {
            const body = {
                spreadsheetId: "<YOUR SPREADSHEET ID>",
                apiKeyID: "<YOUR API KEY ID>",
                email: payload.identifier
            };
            let resp = await fetch(
                "https://cotteremaillist.herokuapp.com/api/checkemail",
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify(body)
                }
            );
            let respBody = await resp.json();
            if (!respBody.allowed) {
                return "You are not allowed to log in";
            } else {
                return null;
            }
        } catch (e) {
            console.log(e);
            return "You are not allowed to log in";
        }
    };
</script>

Make sure that you have pasted your Spreadsheet ID and your API Key ID on the code block above.

Step 3: Change the code in the body of the Login Page to the code below

 <!-- 2. Initialize Cotter -->
 <script>
  var cotter = new Cotter("<YOUR_API_KEY_ID>"); // 👈 Specify your API KEY ID here
  cotter
  	// Choose what method of login do you want
    // Sign In with Magic Link
-    .signInWithLink()
+    .signInWithLink(checkEmail)
    // Send Magic Link via email
    .showEmailForm()
    
    .then(payload => {
	  // save OAuth token
      localStorage.setItem("user_session", JSON.stringify(payload));
      
      // redirect to location before login page
      const redirectURL = localStorage.getItem("redirect_url_after_login")
      if(!!redirectURL) window.location.href = redirectURL
      else window.location.href = "/protected";;
    })
    .catch(err => {
      // handle error
    });
 </script>

Make sure you deleted the line ".signInWithLink()" and added the line ".signInWithLink(checkEmail)".

Also, make sure that you have pasted your API Key ID on the code block above.

Event Details Page Setup (and any other page you want to protect/restrict to logged-in users only)

Change the code on the head to the code below

    <script>
    // 1. We check if a user has already logged in
    var cotterOAuthToken = localStorage.getItem("user_session");
    
    // 1a. Set the location for redirection after the user is logged in.
localStorage.setItem("redirect_url_after_login", window.location.href);

    // 2. If user is not logged in then we redirect to the login page
    if (!cotterOAuthToken || cotterOAuthToken.length <= 0) window.location.href = "/";

-    // 3. If user is logged in then we fetch the user data
-    let url = "https://cotterapp.herokuapp.com/login"

+     // 3. If user is logged in then we fetch the user data
+     // and check if the email is allowed based on our Google sheets
+      var body = JSON.parse(cotterOAuthToken);
+      body.spreadsheetId = "<YOUR SPREADSHEET ID>";
+      body.apiKeyID = "<YOUR API KEY ID>";

+    let url = "https://cotteremaillist.herokuapp.com/api/login"
    fetch(url, {
        method: 'POST',
        cache: 'no-cache',
        headers: {
          'Content-Type': 'application/json'
        },
-        body: cotterOAuthToken
+		 body: JSON.stringify(body)
      })
      .then(resp => resp.json())
      .then(data => {
        if(!data.success) { window.location.href = "/" }
      });
    </script>

Make sure you delete all lines with the "-" symbol and added all lines with the "+" symbol.

Also, make sure that you have pasted your Spreadsheet ID and your API Key ID on the code block above.

Add the code below to the body of the Event Details Page.

<script>
// 1. Fetch the user data
let token = JSON.parse(cotterOAuthToken);

// 2. Sign out
let authButton = document.getElementById("auth-button")

if(!!cotterOAuthToken) authButton.innerHTML = "Sign Out"

authButton.addEventListener("click", () => {
	window.localStorage.setItem("redirect_url_after_login", window.location.href);
	window.localStorage.removeItem("user_session");
});
</script>

That's it!

Try the demo here.

We've arrived at the last part of this tutorial and all that you need to do is to click publish and test Cotter's magic link authentication for your Webflow website!


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]