Know who logs in to your site and get the list of user emails, along with their names and other additional fields data imported to Webflow CMS.

How it works

In our previous Zapier + Webflow CMS tutorial, we were able to send user emails to Webflow CMS. In this tutorial, we will be able to send user emails, as well as other user data from additional fields such as name and address to Webflow CMS using Zapier Webhooks.

For this tutorial, please make sure that you have followed the HTML, React, or Webflow Tutorial to integrate Cotter Login Form to your website.

Cotter doesn't store your additional fields data, so you can't use Cotter's Zapier. However, you can still send additional fields data to Webflow CMS (for example) using Zapier Webhooks.

You'll need to use Zapier Webhooks to receive the data.

Zapier:

  1. Add Cotter Zap using this invite link: https://zapier.com/developer/public-invite/116551/4631eb564ecce1c57f7fe88aa8c90671/.
  2. Click "Make a Zap".

Zapier Webhook Zap

  1. Under "When this happens ..." choose "Webhooks by Zapier" and choose the trigger "Catch Hook".

Copy the custom webhook URL. We're going to send the response from Cotter to this URL.

2. Send Cotter's response to the Zapier URL

var cotter = new Cotter({
      ApiKeyID: "API_KEY_ID",  // 👈 Specify your API KEY ID here
      AdditionalFields: [      // 👈 Add your additional fields here
        {
          label: "Username",
          name: "username",
          placeholder: "Enter your username"
        },
      ]
    });
    cotter
      .signInWithLink()
      .showEmailForm()
      .then((response) => {
        sendToZapier(response); // 👈 send to Zapier
      })
      .catch((err) => console.log(err));
  }, []);

// SEND TO ZAPIER
  const sendToZapier = async (payload) => {
    const zapierURL = "ZAPIER_WEBHOOK_URL"; // 👈 specify the URL here
    try {
      const response = await fetch(zapierURL, {
        method: "POST",
        mode: "cors",
        body: JSON.stringify(payload)
      });
      const resp = await response.json();
      console.log(resp);
    } catch (e) {
      console.log(e);
    }
  };

Send the response from Cotter to Zapier using a POST HTTP request, using fetch or similar functions.

  • Zapier has a strict CORS policy. Follow the code above using fetch, mode: "cors" and no content-type header.

Try this Codesandbox with the code above.

3. Test Zapier Webhook

After adding the code above, try logging in while filling in all the additional fields. Once successful, press "Test Trigger" in Zapier.

You should see something like this:

You'll get the user's email and the additional fields data.

Webflow CMS Zap

To send the data to Webflow CMS, add a Webflow CMS zap.

  1. Create a CMS Collection called Users.
  2. Under "Collection Fields", set the first field label to "Email" and the second field label to "Cotter User ID" (the second field will be used as the slug). Add an additional field to store the Username.

3. Under "Do this ...", choose Webflow.

4. Choose action: "Create Item" to make a test item, or "Create Live Item" to make the user data available in your published site. Make sure you use  Create Live Item when your site is ready to be published and you want the user data to be available in your published site.

5. Login, Pick your site, then pick the "Users" collection that you created earlier.

6. For the Username: use Username (username)

For the Email: use identifier (email or phone).

7. For the Cotter User ID: use ID (Cotter User ID).

8. Select False for both Archived and Draft.

9. Click "Continue" and then "Test & Review". Reload your Webflow project and see if there's a new item in the Users collection.

10. If it succeeded, you can turn on the Zap and it will insert new users to your Users collection. (Zapier will check for new users every 2 minutes, please be patient when testing or click Run to fetch the data).

That's it! 🎉

You should be able to see something like this under your "Users" CMS.

Under the "Email" section, you will see all emails that log in to your Webflow site (a list of your users' emails and usernames).

Display "Username" when signed in

<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. Change the "Sign In" Button to Username
let authButton = document.getElementById("auth-button")

if(!!cotterOAuthToken) authButton.innerHTML = `Welcome ${token.username}`;

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

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]