How it works

In our previous Zapier + Google Sheets tutorial, we were able to send user emails to Google Sheets. 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 Google Sheets 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 Google Sheets (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: "Full Name",
          name: "name",
          placeholder: "Enter your full name"
        },
        {
          label: "Address",
          name: "address",
          placeholder: "Enter your address"
        }
      ]
    });
    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.

Google Sheets Zap

To send the data to Google sheets, add a Google sheets zap.

  1. Under "Do this ...", choose Google Sheets.
  2. Choose action: "Lookup Spreadsheet Row".

We want to look at existing rows to find the user and only add a new row if the user does not exist (new user).

2. Choose your account and spreadsheet

Create a Google Sheets with these headers. Then, choose that spreadsheet in the Zap.

3. Select which column to check if the user already exists

  • Lookup Column: ID
  • Lookup Value: User ID
  • Supporting Lookup Column and Supporting Lookup Value: empty
  • Bottom-up: True

4. Check the box "Create Google Sheets Spreadsheet Row if it doesn't exist yet" and fill out the fields as follows:

This way, it will either grab the existing user row by checking if the user ID is already in the spreadsheet, or it will create a new row if the user doesn't exist.

5. Press "Continue" > "Test and Review"

You should see something like this:

You should also see the row added to your Google Sheets:

That's it! πŸŽ‰

Turn on Zap and you'll start receiving user data in your Google Sheets.


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]