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.