Enable reCAPTCHA to Protect Against Automated Abuse

We have decided to enable Google's reCAPTCHA to protects you against spam and other types of automated abuse from making verification requests, especially using SMS or WhatsApp as it will cause you to lose money from sending these messages.
Enabling Google reCAPTCHA
reCAPTCHA is now available for the JavaScript SDK. We are using invisible Google reCAPTCHA v2. This means that the reCAPTCHA prompt will be automatically triggered when the user press "Login", and if Google has suspicions about this request, it may prompt the user to solve some puzzle. Here's how it looks:
reCAPTCHA using Cotter's JS SDK
Step 1: To show the reCAPTCHA in your website, enable it in the dashboard:
Go to Settings > Branding > Magic Link Form or OTP Verification Form > Phone Number
Captcha settings can only be enabled for Phone Number verification
Adjust your container div to fit the reCAPTCHA prompt:
Option 1: Set the container div to at least 530px high, 300px wide.
<div
    id="cotter-container-signup"
    style="width: 300px; height: 530px"
></div>
Option 2: Allow scrolling.
<div
    id="cotter-container-signup"
    style="overflow: scroll; width: 300px; height: 300px;"
></div>
Step 2: To Require valid reCAPTCHA, update Rules in your dashboard
Under Rules, turn on Captcha Required:
Require Captcha for Email/Phone Number verification
Note that any verification request for email/phone number will require a valid reCAPTCHA token.
See reCAPTCHA in action
To test how reCAPTCHA looks like:
Step 1: Inspect element and click Toggle Device Toolbar
Inspect Element > Toggle Device Toolbar
Step 2: Click the dropdown to select a device and click Edit 
Select from the Dropdown and click Edit
Step 3: Add a custom device and name it Googlebot/2.1
Add a custom device called Googlebot/2.1
From now on, if you're using this emulated device, you will be prompted to solve the reCAPTCHA.
​

Last modified 3yr ago